@ima/plugin-cli takes care of building, linking and watching IMA.js plugins.
\n\n---\n\nSmall CLI wrapper around swc with few other plugins (typescript support), which takes care of building, watching and linking IMA.js plugins.\n\n## Installation\n\n```\nnpm install @ima/plugin-cli --save-dev\n```\n\n\n## Usage\n\nRun following commands from the root of your plugin directory.\n\n```\nnpx ima-plugin dev\nnpx ima-plugin build\nnpx ima-plugin link [target-project]\nnpx ima-plugin --help\n```\n\nThe plugin works **without the need to provide custom ima-plugin.config.js**. There are 3 configuration presets that should cover most situations, which can be forced using CLI args:\n - `npm run [build|dev|link]` - generates two bundles, one in cjs and other in esm. Use this for almost any plugin that doesn't need server/client specific bundles.\n - `npm run [build|dev|link] --nodeConfig` - generates only cjs bundle (in ./dist directory), useful for CLI and node plugins.\n - `npm run [build|dev|link] --clientServerConfig` - generates code in cjs and two bundles in esm, where you can drop client/server specific syntax using pragma comments.\n\n### jsxRuntime\nYou can override used React jsxRuntime to `classic` or newer `automatic` using `jsxRuntime` config option, or `-j=automatic` or `--jsxRuntime=classic` CLI argument.\n\n### additionalWatchPaths\nOptional array type option, which can be used to add additional watch paths to link command. This is useful if you want to watch and copy additional files outside of the `inputDir`.\n\n### Custom `ima-plugin.config.js`\nYou can always provide custom ima-plugin.config.js where you can either extend one of the provided default configurations or create completely new one:\n\n```js\n// ima-plugin.config.js\n\n// Use one of the default provided configurations\nconst {\n defaultConfig, // corresponds with CLI options described above\n clientServerConfig, // corresponds with CLI options described above\n nodeConfig, // corresponds with CLI options described above\n preprocessTransformer,\n swcTransformer,\n typescriptDeclarationsPlugin\n} = require('@ima/plugin-cli');\n\n/**\n * Or create custom config. You can export an array of configuration objects to support multiple configurations.\n *\n * @type import('@ima/plugin-cli').ImaPluginConfig\n */\nmodule.exports = {\n inputDir: './src',\n jsxRuntime: 'classic', // 'classic' or 'automatic' JSX runtime settings\n sourceMaps: true, // enabled by default\n /**\n * Optionally create additional transformers. There are 2 transformers\n * that plugin CLI exports - preprocessTransformer (for removing code\n * parts based on @if/@else pragma comments), swcTransformer (runs\n * JS code through swc/core transform).\n *\n * '...' -> this placeholder is replaced with default set of transformers.\n * This allows you to easily extend default configuration without the need\n * to re-define it again manually.\n *\n * You can also always opt out of using '...', in that case, default\n * transformers are not used, only the ones defined in the `transformers`\n * field below.\n */\n transformers: [\n preprocessTransformer({\n context: {\n production: true,\n development: false,\n },\n }),\n '...',\n ],\n output: [\n {\n dir: './dist/esm',\n format: 'es6',\n /**\n * Since we want to handle less/css files separately, we can exclude them\n * from this output dir. This extends the root `exclude` definition.\n * When the option is not defined, it copies all files to the dist folder.\n */\n exclude: /\\.(less|css)$/i\n },\n {\n dir: './dist/cjs',\n format: 'commonjs',\n exclude: /\\.(less|css)$/i\n },\n {\n dir: './dist/less',\n format: 'es6',\n // Here we can have an individual bundle just for less/css files.\n include: /\\.(less|css)$/i\n },\n ],\n plugins: [\n typescriptDeclarationsPlugin({ additionalArgs: ['--skipLibCheck'] }),\n ],\n exclude: [\n '**/__tests__/**',\n '**/node_modules/**',\n '**/dist/**',\n '**/typings/**',\n '**/.DS_Store/**',\n 'tsconfig.tsbuildinfo',\n ],\n /**\n * Optional, this adds additional glob paths to link watcher for files\n * which are also watched for changes and copied to the linked directory.\n * (Works only with `link` command).\n */\n additionalWatchPaths: ['./transform/**/*', './polyfill/**/*'],\n};\n```\n\n### `package.json` entry points\n\nWhen a plugin is built using this cli, it should provide following entry points in the `package.json` file:\n\n```json\n\"main\": \"./dist/cjs/index.js\",\n\"module\": \"./dist/esm/index.js\",\n```\n\nAnd in case of server/client specific bundles:\n\n```json\n\"main\": \"./dist/cjs/index.js\",\n\"module\": \"./dist/esm/server/index.js\",\n\"browser\": \"./dist/esm/client/index.js\",\n```\n\nThis makes sure that webpack uses correct entry points for each bundle, where the priorities are defined as:\n- `module` -> `main` for **server** bundle (we always prefer esm as it enables better code analysis and tree-shaking)\n- `browser` -> `module` -> `main` for **client** bundle\n\n---\n\nThis package is part of the IMA.js application stack, see [imajs.io](https://imajs.io/) for more info about the whole project.\n","readmeFilename":"README.md"}
![](\"https://imajs.io/img/logo.svg\"){kind=logo}
\n