在自己的 npm 包中正确使用 Babel

Question

我有自己的使用 ES6 的 npm 包。 所以有 Babel 作为开发依赖项，在代码中有import "@babel/polyfill"

该包在我的项目中也使用 ES6，再次使用 Babel 作为开发依赖项并调用import "@babel/polyfill"; .
我在这个页面上不止一次加载了@babel/polyfill。

在库和项目中处理 Babel 的正确方法是什么？ 要将 Babel 导入库和项目本身，仅将其作为开发依赖项，而不导入它？

谢谢

Answer 1

这是@babel/polyfill包的已知问题， github上报告了多个问题

解决方案之一是使用idempotent-babel-polyfill

另一种解决方案是从 webpack 配置文件中的entry中删除 babel-polyfill，并使用 babel-preset-env 使用useBuiltIns : 'usage' 选项包含来自 babel- polyfill 的 polyfill ，因此您的 webpack 配置文件如下所示：

{
  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
            }]
          ]
        }
      }
    ]
  },
  // ...
}

变得

{
  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'
            }]
          ]
        }
      }
    ]
  },
  // ...
}