Custom NPM package with assets, tree shaking possible and TS declarations

Viewed 71

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:

  1. Using tsc to 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).
  2. 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 set sideEffects: false in 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?
0 Answers
Related