Thanks for the guide Cristiana! I just went through this dance myself and here are some additional things I found interesting:
Use npm pack to test out what's getting placed in your published package. Also, it lets you npm i path/to/tarbal-0-0-0.tgz to verify. Much more reliable then pure npm linking on both sides.
where my tsconfig-cjs.json extended the main one just changing the module to CommonJS and outDir to dist/cjs. It seems dist is most popular default e.g. for create-react-app aka react-scripts it seems to "want" stuff in dist (I had put stuff in lib before).
It's probably worth experimenting with the postcss options:
I wanted my css minimized and not inlined. I thought I'd need to add module: true but there's a default in postcss that if you already name your files foo.module.css it'll treat it as a CSS module anyway (of course this is only for folks who care about that).
All this was done for my AgnosticUI React package (but similar for Vue and Svelte packages too)
I definitely took a lot of tweaking and I referenced many other blog articles and docs before getting it to my liking. Thanks again for yours Cristiana!
Thanks for the guide Cristiana! I just went through this dance myself and here are some additional things I found interesting:
npm packto test out what's getting placed in your published package. Also, it lets younpm i path/to/tarbal-0-0-0.tgzto verify. Much more reliable then pure npm linking on both sides.typescript({ declaration: true, }),and in my tsconfig
"noEmit": false, "emitDeclarationOnly": true,and then use
tscto build the types with:"build:types": "tsc -p tsconfig.json && tsc -p tsconfig-cjs.json",where my
tsconfig-cjs.jsonextended the main one just changing themoduletoCommonJSandoutDirtodist/cjs. It seemsdistis most popular default e.g. for create-react-app akareact-scriptsit seems to "want" stuff indist(I had put stuff inlibbefore).It's probably worth experimenting with the
postcssoptions:postcss({ minimize: true, sourceMap: true, extract: true, }),I wanted my css minimized and not inlined. I thought I'd need to add
module: truebut there's a default inpostcssthat if you already name your filesfoo.module.cssit'll treat it as a CSS module anyway (of course this is only for folks who care about that).All this was done for my AgnosticUI React package (but similar for Vue and Svelte packages too)
I definitely took a lot of tweaking and I referenced many other blog articles and docs before getting it to my liking. Thanks again for yours Cristiana!