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

Question

我尝试捆绑两个JavaScript模块，以便生成的代码在IE11中工作。为此，我设置了一个yarn/npm项目，该项目使用rollup.js进行绑定，并使用Babel来进行传输。在添加(非dev(依赖项core-js之前，一切都很好。

这里的详细信息：

1在添加核心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等现代浏览器中使用。到目前为止还不错。

添加核心js后的问题

然而，捆绑文件还没有准备好IE11：在IE中，我遇到了一些错误，比如Object不支持属性或方法"getOwnPropertySymbols">。因此，需要添加corejs中的polyfill。

为此，我安装了corejs作为prod依赖项。现在rollup -c不会给我警告，但结果dist/main.js的开头类似

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

作为一个脚本，Chrome和IE都不能执行！看起来，corejs库的存在不知何故让汇总捆绑器崩溃了

如何修复我的设置，使生成的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(),
]    
};