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

Question

我尝试捆绑两个JavaScript模块，以便生成的代码在IE11中工作。为此，我设置了一个yarn/npm项目，它使用rollup.js进行捆绑，使用Babel进行转置。在我添加（非开发）依赖core-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'
    })
  ]
};

巴贝尔。配置。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等现代浏览器中使用。到现在为止，一直都还不错。

但是捆绑的文件还没有准备好IE11：在IE中，我收到错误，例如Object不支持属性或方法“getOwnProperty ty符号”。因此需要添加来自core-js的多边形。

为此，我将core js安装为prod依赖项。现在，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："use"选项时，这意味着它会将corejs中的代码附加到您的模块文件中，该文件是用cjs样式编写的。所以你必须添加这个插件@rollup/plugin-Common js来转换回esm，然后它就可以工作了：

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

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