webpack + babel：如何只在一个入口点中包含 polyfils 但使它们“全局”以便其他入口点可以工作

问题描述

我的 webpack 构建适用于多个入口点，因为我想提供一个 AMD 库，它具有各种独立的模块。任何时候都只会首先加载这些模块中的一个（我们称之为 core.js）。 Babel/Corejs3 将它的 polyfill 添加到每个入口点，使我的包比需要的要大得多。我希望 polyfill 仅在“core.js”中定义，但使它们“全局”（添加到 window 对象）。

我需要如何采用我的 .babelrc 或 webpack.config.js 来实现这一点？

我的 webpack.config 是动态构建的（入口点是动态添加的），这是一个只有几个入口点的示例，以保持简单，但它包含更多入口点。

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
    "entry": {
        "core": {
            "import": "./core.js"
        },"gallery": {
            "import": "./gallery.js"
        },"utils": {
            "import": "./utils.js"
        },},"output": {
        "devtoolNamespace": "http://","library": {
            "name": "[name]","type": "amd"
        },"path": "/path/to/libraryroot"
    },"devtool": "source-map","module": {
        "rules": [
            {
                "test": /\.js$/,"loader": "babel-loader"
            }
        ]
    },"optimization": {
        "minimizer": [
            new TerserPlugin({
                extractComments: true,})
        ]
    },"externals": {
        "core": {
            "amd": "core"
        },"gallery": {
            "amd": "gallery"
        },"utils": {
            "amd": "utils"
        },"resolve": {
        "modules": [
            __dirname,'node_modules',]
    },"mode": "development","amd": {
        "jQuery": true
    },"context": "/path/to/src"
};

这是我的 .babelrc

{
  "presets": [
    [
      "@babel/preset-env",{
      "debug": true,"useBuiltIns": "usage","corejs": 3
    }
    ],"@babel/preset-flow"
  ],"plugins": [
    ["@babel/plugin-transform-react-jsx",{ "pragma":"h" }]
  ]
}

如果所有 polyfill 都在一个额外的 js 文件中，那就更好了，该文件可以包含在文档标题中。

最好的结果是 - 当然是 - 如果所有 polyfil 都可以作为 amd deps 加载并添加到结果中的定义语句中。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）