微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决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 举报,一经查实,本站将立刻删除。