CODEWITHSUNDEEP
javascriptbabeljs
o..o
o..o

Reputation: 1921

Using Babel in own npm package correct way

I have my own npm package using ES6. So there is Babel as a dev dependency and in the code there is import "@babel/polyfill"

The package is used in my project also using ES6, again using Babel as a dev dependency and calling import "@babel/polyfill";.
And I'm getting @babel/polyfill is loaded more than once on this page.

What is the correct way to treat Babel in a library and in a project? To have Babel imported in the library and in the project itself have it only as a dev dependency, but not to import it?

Thanks

Upvotes: 1

Views: 438

Answers (1)

ROOT
ROOT

Reputation: 11622

This is known issue for @babel/polyfill package, and there is multiple issue reported on github

One of the solution is to use idempotent-babel-polyfill

Another solution is to remove babel-polyfill from your entry in webpack config file, and use babel-preset-env to include polyfills from babel-polyfill using useBuiltIns: ‘usage’ option, so your webpack config file like this:

{
  entry: {
    'file1': ['babel-polyfill', './src/file1.js'],
    'file2': ['babel-polyfill', './src/file2.js'],
    // ...
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        loader: 'babel-loader',
        options: {
          presets: [
            ['@babel/preset-env', {
              targets: {
                browsers: ['last 2 versions', 'ie >= 11']
              },
              modules: false
            }]
          ]
        }
      }
    ]
  },
  // ...
}

become

{
  entry: {
    'file1': './src/file1.js',
    'file2': './src/file2.js',
    // ...
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        loader: 'babel-loader',
        options: {
          presets: [
            ['@babel/preset-env', {
              targets: {
                browsers: ['last 2 versions', 'ie >= 11']
              },
              modules: false,
              useBuiltIns: 'usage'
            }]
          ]
        }
      }
    ]
  },
  // ...
}

Upvotes: 1

Related Questions