How to correctly build an NPM library from ES6 classes?

Question

JavaScript

I am writing a simple library now. Using the syntax of Classes, Imports, and ASYNC/AWAIT

Set up Webpack and Babel. What am I confused about:

1. If I specify the supported 2 versions of Chrome only, then the package weighs 5 KB
   
2. If 2 versions and more than 1% - already 10 Kb
   

And if I don't specify "useBuiltIns": "usage" - then then I get errors that there is no Runtime regenerator. And if I specify, then the assembly size increases from 5Kb to 55Kb .

The library is not independent. It implies that it will be used in another project, which is also assembled by Webpack with babel. Then I don't understand why include in the assembly of the library all the polyfills it needs, if this is done later at the exit in the parent project.

---

It may be that you don't use Webpack or Babel at all, but simply specify type: "module" for the library - the latest versions of the node are understood as Es6 module imports. But then the parent project will understand that this import will need to be additionally transpiled? In it, the babel is used ...

How can I design a library if it is only needed as an additional module for other projects that are eventually built by Webpack and transpiled according to their configs?

Answer 1

My mistake was that I tried to add @babel/plugin-transform-runtime to the project build. And it was necessary to put in the library and collect with him. Therefore, the test fell on the project due to the fact that webpack / babel usually excludes plug-in libraries. The plugin added 5Kb and it became not 10 but 15 - everything is better than 55...

Answer 2

Maybe there is no use of Webpack or Babel at all.

Yes, this is a modern solution for modules.)
In package.jsonthe entry point, specify not main, but be done modulewith it.
Although webpack can still do a lot of useful things, but babel for the module library is superfluous.

But will the parent project then understand that this import will need to be additionally transpiled? In it, the babel is used ...

As you set up the babel-loader in the project, it will transpile. By default, it transpiles everything, and you must specifically specify exclude, so as not to climb into node_modules.
If you use some cli- there are special settings for this ( transpileDependencies).