将 JS 与 rollup 和 Babel 捆绑在一起，以便在 IE11 中使用

Question

我尝试捆绑两个 JavaScript 模块，以便生成的代码可以在 IE11 中运行。为此，我设置了一个 yarn/npm 项目，它使用 rollup.js 进行捆绑，使用 Babel 进行转译。在我添加（非开发）依赖项 core-js.

之前一切正常

这里是详细信息：

1 设置 before 添加 core-js

JS 文件

src/main.js
src/utils.js

配置文件

package.json

{
  "name": "rollup_for_ie",
  "devDependencies": {
    "@babel/core": "^7.11.1",
    "@babel/preset-env": "^7.11.0",
    "@rollup/plugin-babel": "^5.2.0",
    "@rollup/plugin-node-resolve": "^9.0.0",
    "rollup": "^2.24.0"
  },
}

rollup.config.js

import resolve from '@rollup/plugin-node-resolve';
import babel from '@rollup/plugin-babel';

export default {
  input: 'src/main.js',
    output: {
        file: 'dist/main.js',
        format: 'iife'
    },
  plugins: [
    resolve({
      browser: true
    }),
    babel({
        exclude: "node_modules/**", // only transpile our source code
        babelHelpers: 'bundled'
    })
  ]
};

babel.config.js

module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        targets: {
          browsers: "> 0.5%, ie >= 11"
        },
        modules: false,
        spec: true,
        useBuiltIns: "usage",
        forceAllTransforms: true,
        corejs: 3
      }
    ]
  ],
};

当我运行 rollup -c 我收到关于未解决的依赖项的警告，但是一个捆绑文件 dist/main.js 包含来自 src[=67 的（使用过的）东西=]目录生成。生成的文件甚至可以在像 Chrome 这样的现代浏览器中使用。到目前为止一切顺利。

添加 core-js
后出现问题
但是捆绑文件尚未准备好 IE11：在 IE 中，我收到类似 对象不支持属性或方法 'getOwnPropertySymbols' 的错误。所以需要添加来自 core-js 的 polyfills。

为此，我将 core-js 安装为产品依赖项。现在 rollup -c 没有给我警告 - 但结果 dist/main.js 开始像

(function (exports) { 'use strict'; var $ = require('../internals/export'); . . .

作为脚本，Chrome和IE都不能执行！看起来 core-js 库的存在以某种方式关闭了汇总打包程序。

如何修复我的设置，使生成的 dist/main.js 在 Chrome 和 IE11 中作为非模块脚本运行？

Answer 1

我认为当您启用选项 useBuiltIns: "usage" 时，这意味着它会将来自 corejs 的代码附加到您使用 cjs 风格编写的模块文件中。所以你必须添加这个插件 @rollup/plugin-commonjs 来转换回 esm，然后它会起作用：

import commonjs from '@rollup/plugin-commonjs';

export default {
  // ...
  plugins: [
    // ...
    commonjs(),
  ]    
};

将 JS 与 rollup 和 Babel 捆绑在一起，以便在 IE11 中使用

Bundle JS with rollup and Babel for use in IE11

javascript

internet-explorer

module

babeljs

rollupjs

1 设置 before 添加 core-js

JS 文件

配置文件

添加 core-js