In one of my projects I need to separate some piece of code to NPM package (there is a private Nexus for this purpose). I am hover wondering how to do it properly.
What I actually know and need:
- NPM package will contain some React components. Some of them use custom svg/png files and custom styles.
- I'd like to be able to do tree shaking. Application which will use the package should bundle only what is necessary from the package.
- TypeScript declarations are needed.
I tried the following solutions:
- Using
tscto emit js files along with their declarations (*.d.ts). The disadvantage of it are incorrect import paths to assets (tsc of course has nothing to do with moving assets to output directory). - Using webpack to bundle single index.js file + having a second script to emit declarations only (tsconfig contains
emitDeclarationOnly: true). I am not however sure if it's a correct approach to let the package to have ability to be treeshaked. Is it sufficient to setsideEffects: falsein application using my custom NPM package and make sure that only imports/exports are present in the package (no commonjs require)? Moreover, what about js minification in this case?