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

Question

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

详细信息：

1设置之前添加 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 目录中的（使用过的）东西。生成的文件甚至可以在现代浏览器（例如Chrome）中使用。到目前为止一切顺利。

添加 core-js

之后的问题

但是捆绑的文件尚未支持IE11：在IE中，我收到类似 Object不支持属性或方法'getOwnPropertySymbols'的错误。因此，需要添加 core-js 中的polyfill。

为此，我将 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(),
  ]    
};