DEV Community

How to easily create JS libraries with bundled dependencies compatible with ES/AMD/UMD/CJS module systems using Nx

Iulian Preda on January 22, 2022

General aspects If you haven't yet checked out my last post it's high time to do so as we will need it for this article. Getting that ...

Read full post

hugoazevedosoares • Feb 22 '22

Thank you for this post, it saved me a lot of time!

Iulian Preda • Feb 22 '22

You are welcome! I am glad i could help someone.
Whenever I have time I'll continue this series demonstrating how to

automatically publish to multiple package managers
automatically increase the version number
automatically link dependant internal projects in your package.json.

hugoazevedosoares • Feb 24 '22

That would be awesome. Also, a nice thing we have done here at my team is also bundling a css for a library, so we can also publish it to a cdn on the same build pipeline.

By the way, we went back to use rollup, I though the configuration overall it's simpler.

Andreas Clausen • Apr 22 '22

How did you get d.ts files into your build folder with rollup? I had to make another command that calls tsc "manually" (i.e. not with @nrwl/js:tsc) after the rollup. Did you find a better way?

Iulian Preda • Apr 22 '22

D.ts files should be created automatically. Please check your ts-vonfig files to have them emitted. That should be done using the "declaration":true flag

Andreas Clausen • Apr 22 '22

I have declarations on, and they are being generated when I call tsc with the same tsconfig. We are talking about the @nrwl/web:rollup executor, right?
Maybe this is only an issue when using swc, but I'm pretty sure it didn't work for me with babel either.

Iulian Preda • Apr 22 '22

Swc is nice, but until now I didn't have the best experience with it, maybe it's just my luck of experience, at least with babel with the version stated in the article I can guarantee that the declarations are emitted using the @nrwl/web:rollup executor

Samuel Hecquet • May 6 '22

I use @nrwl/web:rollup to build my library and it's very powerful. However, I'm having an issue now because I want to add font files in it and I can't find a way to compile it because I need webpack.
Have you already faced this situation?

Iulian Preda • May 6 '22

I think that is outside it's scope. Personally I would use @nrwl/web:webpack with a custom webpack config as presented in the article, you would need some more code to handle font import. Another solution would be to use some custom scripts that would be run after everything is bundled.

Samuel Hecquet • May 11 '22 • Edited

you're right!
For people being in the same situation that I was and ending up in this article, I fixed it by pointing to a customized rollup config file and using "@rollup/plugin-url" for the fonts:

const url = require('@rollup/plugin-url');
const nrwlConfig = require('@nrwl/react/plugins/bundle-rollup');

module.exports = (config) => {
  const originalConfig = nrwlConfig(config);
  return {
    ...originalConfig,
    plugins: [
      ...originalConfig.plugins,
      url({
        limit: 100000,
        include: ['**/*.woff', '**/*.woff2'],
      }),
    ],
  };
};

I think it also works with jpg

Iulian Preda • May 11 '22

Thank you for your contribution!