我尝试捆绑两个 JavaScript 模块,以便生成的代码在 IE11 中工作。为此,我设置了一个 yarn/npm 项目,该项目使用 rollup.js 进行捆绑,使用 Babel 进行转译。一切正常,直到我添加(非开发)依赖 core-js
.
这里有详细信息:
1 添加core-js前的设置
JS文件
配置文件
包.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 中,我收到诸如对象不支持属性或方法“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 中作为非模块脚本工作?
最佳答案
我认为当您启用选项 useBuiltIns: "usage"
这意味着它将附加来自 corejs
的代码到你用 cjs
编写的模块文件中风格。所以你必须添加这个插件@rollup/plugin-commonjs
转换回 esm
,那么它将起作用:
import commonjs from '@rollup/plugin-commonjs';
export default {
// ...
plugins: [
// ...
commonjs(),
]
};
关于javascript - 将 JS 与 rollup 和 Babel 捆绑以在 IE11 中使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63407950/