![](\"https://user-images.githubusercontent.com/4060187/52168303-574d3a00-26f6-11e9-9f3b-71dbec9ebfcb.gif\")
\n\nYour library will be rebuilt if you make edits.\n\n### `npm run build` or `yarn build`\n\nBundles the package to the `dist` folder.\nThe package is optimized and bundled with Rollup into multiple formats (CommonJS, UMD, and ES Module).\n\n![](\"https://user-images.githubusercontent.com/4060187/52168322-a98e5b00-26f6-11e9-8cf6-222d716b75ef.gif\")
\n\n### `npm test` or `yarn test`\n\nRuns the test watcher (Jest) in an interactive mode.\nBy default, runs tests related to files changed since the last commit.\n\n### `npm run lint` or `yarn lint`\n\nRuns Eslint with Prettier on .ts and .tsx files.\nIf you want to customize eslint you can add an `eslint` block to your package.json, or you can run `yarn lint --write-file` and edit the generated `.eslintrc.js` file.\n\n### `prepare` script\n\nBundles and packages to the `dist` folder.\nRuns automatically when you run either `npm publish` or `yarn publish`. The `prepare` script will run the equivalent of `npm run build` or `yarn build`. It will also be run if your module is installed as a git dependency (ie: `\"mymodule\": \"github:myuser/mymodule#some-branch\"`) so it can be depended on without checking the transpiled code into git.\n\n## Optimizations\n\nAside from just bundling your module into different formats, TSDX comes with some optimizations for your convenience. They yield objectively better code and smaller bundle sizes.\n\nAfter TSDX compiles your code with TypeScript, it processes your code with 3 Babel plugins:\n\n- [`babel-plugin-annotate-pure-calls`](https://github.com/Andarist/babel-plugin-annotate-pure-calls): Injects for `#__PURE` annotations to enable treeshaking\n- [`babel-plugin-dev-expressions`](https://github.com/4Catalyzer/babel-plugin-dev-expression): A mirror of Facebook's dev-expression Babel plugin. It reduces or eliminates development checks from production code\n- [`babel-plugin-rename-import`](https://github.com/laat/babel-plugin-transform-rename-import): Used to rewrite any `lodash` imports\n\n### Development-only Expressions + Treeshaking\n\n`babel-plugin-annotate-pure-calls` + `babel-plugin-dev-expressions` work together to fully eliminate dead code (aka treeshake) development checks from your production code. Let's look at an example to see how it works.\n\nImagine our source code is just this:\n\n```tsx\n// ./src/index.ts\nexport const sum = (a: number, b: number) => {\n if (process.env.NODE_ENV !== 'production') {\n console.log('Helpful dev-only error message');\n }\n return a + b;\n};\n```\n\n`tsdx build` will output an ES module file and 3 CommonJS files (dev, prod, and an entry file). If you want to specify a UMD build, you can do that as well. For brevity, let's examine the CommonJS output (comments added for emphasis):\n\n```js\n// Entry File\n// ./dist/index.js\n'use strict';\n\n// This determines which build to use based on the `NODE_ENV` of your end user.\nif (process.env.NODE_ENV === 'production') {\n module.exports = require('./mylib.cjs.production.js');\n} else {\n module.exports = require('./mylib.cjs.development.js');\n}\n```\n\n```js\n// CommonJS Development Build\n// ./dist/mylib.cjs.development.js\n'use strict';\n\nconst sum = (a, b) => {\n {\n console.log('Helpful dev-only error message');\n }\n\n return a + b;\n};\n\nexports.sum = sum;\n//# sourceMappingURL=mylib.cjs.development.js.map\n```\n\n```js\n// CommonJS Production Build\n// ./dist/mylib.cjs.production.js\n'use strict';\nexports.sum = (s, t) => s + t;\n//# sourceMappingURL=test-react-tsdx.cjs.production.js.map\n```\n\nAS you can see, TSDX stripped out the development check from the production code. **This allows you to safely add development-only behavior (like more useful error messages) without any production bundle size impact.**\n\nFor ESM build, it's up to end-user to build environment specific build with NODE_ENV replace (done by Webpack 4 automatically).\n\n#### Rollup Treeshaking\n\nTSDX's rollup config [removes getters and setters on objects](https://github.com/palmerhq/tsdx/blob/1f6a1b6819bb17678aa417f0df5349bec12f59ac/src/createRollupConfig.ts#L73) so that property access has no side effects. Don't do it.\n\n#### Advanced `babel-plugin-dev-expressions`\n\nTSDX will use `babel-plugin-dev-expressions` to make the following replacements _before_ treeshaking.\n\n##### `__DEV__`\n\nReplaces\n\n```ts\nif (__DEV__) {\n console.log('foo');\n}\n```\n\nwith\n\n```js\nif (process.env.NODE_ENV !== 'production') {\n console.log('foo');\n}\n```\n\n**IMPORTANT:** To use `__DEV__` in TypeScript, you need add `declare var __DEV__: boolean` somewhere in your project's type path (e.g. `./types/index.d.ts`).\n\n```ts\n// ./types/index.d.ts\ndeclare var __DEV__: boolean;\n```\n\n> **Note:** The `dev-expression` transform does not run when `NODE_ENV` is `test`. As such, if you use `__DEV__`, you will need to define it as a global constant in your test environment.\n\n##### `invariant`\n\nReplaces\n\n```js\ninvariant(condition, 'error message here');\n```\n\nwith\n\n```js\nif (!condition) {\n if ('production' !== process.env.NODE_ENV) {\n invariant(false, 'error message here');\n } else {\n invariant(false);\n }\n}\n```\n\nNote: TSDX doesn't supply an `invariant` function for you, you need to import one yourself. We recommend https://github.com/alexreardon/tiny-invariant.\n\nTo extract and minify `invariant` error codes in production into a static `codes.json` file, specify the `--extractErrors` flag in command line. For more details see [Error extraction docs](#error-extraction).\n\n##### `warning`\n\nReplaces\n\n```js\nwarning(condition, 'dev warning here');\n```\n\nwith\n\n```js\nif ('production' !== process.env.NODE_ENV) {\n warning(condition, 'dev warning here');\n}\n```\n\nNote: TSDX doesn't supply a `warning` function for you, you need to import one yourself. We recommend https://github.com/alexreardon/tiny-warning.\n\n### Using lodash\n\nIf you want to use a lodash function in your package, TSDX will help you do it the _right_ way so that your library does not get fat shamed on Twitter. However, before you continue, seriously consider rolling whatever function you are about to use on your own. Anyways, here is how to do it right.\n\nFirst, install `lodash` and `lodash-es` as _dependencies_\n\n```bash\nyarn add lodash lodash-es\n```\n\nNow install `@types/lodash` to your development dependencies.\n\n```bash\nyarn add @types/lodash --dev\n```\n\nImport your lodash method however you want, TSDX will optimize it like so.\n\n```tsx\n// ./src/index.ts\nimport kebabCase from 'lodash/kebabCase';\n\nexport const KebabLogger = (msg: string) => {\n console.log(kebabCase(msg));\n};\n```\n\nFor brevity let's look at the ES module output.\n\n\n```js\nimport o from\"lodash-es/kebabCase\";const e=e=>{console.log(o(e))};export{e as KebabLogger};\n//# sourceMappingURL=test-react-tsdx.esm.production.js.map\n```\n\nTSDX will rewrite your `import kebabCase from 'lodash/kebabCase'` to `import o from 'lodash-es/kebabCase'`. This allows your library to be treeshakable to end consumers while allowing to you to use `@types/lodash` for free.\n\n> Note: TSDX will also transform destructured imports. For example, `import { kebabCase } from 'lodash'` would have also been transformed to `import o from \"lodash-es/kebabCase\".\n\n### Error extraction\n\nAfter running `--extractErrors`, you will have a `./errors/codes.json` file with all your extracted `invariant` error codes. This process scans your production code and swaps out your `invariant` error message strings for a corresponding error code (just like React!). This extraction only works if your error checking/warning is done by a function called `invariant`.\n\nNote: We don't provide this function for you, it is up to you how you want it to behave. For example, you can use either `tiny-invariant` or `tiny-warning`, but you must then import the module as a variable called `invariant` and it should have the same type signature.\n\n⚠️Don't forget: you will need to host the decoder somewhere. Once you have a URL, look at `./errors/ErrorProd.js` and replace the `reactjs.org` URL with yours.\n\n> Known issue: our `transformErrorMessages` babel plugin currently doesn't have sourcemap support, so you will see \"Sourcemap is likely to be incorrect\" warnings. [We would love your help on this.](https://github.com/palmerhq/tsdx/issues/184)\n\n_TODO: Simple guide to host error codes to be completed_\n\n## Customization\n\n### Rollup\n\n> **❗⚠️❗ Warning**: ![\"\"/](\"https://avatars2.githubusercontent.com/u/4060187?v=4\") Jared Palmer 📖 🎨 👀 🔧 ⚠️ 🚧 💻 | \n ![\"\"/](\"https://avatars1.githubusercontent.com/u/6764957?v=4\") swyx 🐛 💻 📖 🎨 🤔 🚇 🚧 👀 | \n ![\"\"/](\"https://avatars1.githubusercontent.com/u/10660468?v=4\") Jason Etcovitch 🐛 ⚠️ | \n ![\"\"/](\"https://avatars0.githubusercontent.com/u/5314713?v=4\") Sam Kvale 💻 ⚠️ 🐛 📖 | \n ![\"\"/](\"https://avatars3.githubusercontent.com/u/41299650?v=4\") Lucas Polito 💻 📖 | \n ![\"\"/](\"https://avatars0.githubusercontent.com/u/10438373?v=4\") Steven Kalt 💻 | \n ![\"\"/](\"https://avatars2.githubusercontent.com/u/2524280?v=4\") Harry Hedger 🤔 📖 💻 | \n
![\"\"/](\"https://avatars0.githubusercontent.com/u/13774309?v=4\") Arthur Denner 🐛 💻 | \n ![\"\"/](\"https://avatars2.githubusercontent.com/u/5793483?v=4\") Carl 🤔 📖 💻 ⚠️ | \n ![\"\"/](\"https://avatars0.githubusercontent.com/u/900947?v=4\") Loïc Mahieu 💻 ⚠️ | \n ![\"\"/](\"https://avatars3.githubusercontent.com/u/985701?v=4\") Sebastian Sebald 📖 💻 ⚠️ | \n ![\"\"/](\"https://avatars2.githubusercontent.com/u/1935696?v=4\") Karl Horky 📖 | \n ![\"\"/](\"https://avatars2.githubusercontent.com/u/25279263?v=4\") James George 📖 | \n ![\"\"/](\"https://avatars3.githubusercontent.com/u/4970083?v=4\") Anton Gilgur 🚧 📖 💻 🐛 💡 🤔 💬 👀 | \n
![\"\"/](\"https://avatars1.githubusercontent.com/u/9523719?v=4\") Kyle Holmberg 💻 💡 ⚠️ | \n ![\"\"/](\"https://avatars1.githubusercontent.com/u/2206639?v=4\") Sigurd Spieckermann 🐛 💻 | \n ![\"\"/](\"https://avatars1.githubusercontent.com/u/1307267?v=4\") Kristofer Giltvedt Selbekk 💻 | \n