[英]Bundle JS with rollup and Babel for use in IE11
I try to bundle two JavaScript modules, so that the resulting code works in IE11.我尝试捆绑两个 JavaScript 模块,以便生成的代码在 IE11 中工作。 For this I have setup a yarn/npm project which uses rollup.js for bundling and Babel for transpiling.为此,我设置了一个 yarn/npm 项目,该项目使用rollup.js进行捆绑,使用Babel进行转译。 Everything works fine until I add the (non-dev) dependency core-js
.一切正常,直到我添加(非开发)依赖core-js
。
Here the details:这里有详细信息:
package.json 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 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 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
}
]
],
};
When I run rollup -c
I get warnings about unresolved dependencies, but a bundled file dist/main.js
with the (used) stuff from the src directory is generated.当我运行rollup -c
时,我会收到有关未解决依赖项的警告,但会生成一个捆绑文件dist/main.js
,其中包含src目录中的(使用过的)内容。 The resulting file works even in modern browsers like Chrome.生成的文件甚至可以在 Chrome 等现代浏览器中使用。 So far so good.到目前为止,一切都很好。
However the bundled file is not yet IE11 ready: In IE I get errors like Object doesn't support property or method 'getOwnPropertySymbols' .但是,捆绑的文件还没有 IE11 准备好:在 IE 中,我收到Object doesn't support property or method 'getOwnPropertySymbols' 之类的错误。 So the polyfills from core-js need to be added.所以需要添加来自core-js的 polyfill。
For this I install core-js as a prod dependency.为此,我将core-js安装为产品依赖项。 Now rollup -c
doesn't give me warnings - but the resulting dist/main.js begins like现在rollup -c
没有给我警告 - 但结果dist/main.js开始像
(function (exports) {
'use strict';
var $ = require('../internals/export');
.
.
.
which as a script can not neither Chrome nor IE execute!作为脚本,Chrome 和 IE 都不能执行! It looks like that somehow the presence of the core-js library throws the rollup bundler off.看起来core-js库的存在以某种方式使汇总捆绑器关闭。
How can I fix my setup so that the resulting dist/main.js
works as non-module script in Chrome and IE11?如何修复我的设置,以便生成的dist/main.js
在 Chrome 和 IE11 中作为非模块脚本工作?
I think as you enabled the option useBuiltIns: "usage"
which means it will append code from corejs
into your module files which is written with cjs
style.我认为当您启用选项useBuiltIns: "usage"
这意味着它将 append 代码从corejs
到您的模块文件中,这些文件是用cjs
样式编写的。 So you have to add this plugin @rollup/plugin-commonjs
to convert back to esm
, then it will work:因此,您必须添加此插件@rollup/plugin-commonjs
以转换回esm
,然后它将起作用:
import commonjs from '@rollup/plugin-commonjs';
export default {
// ...
plugins: [
// ...
commonjs(),
]
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.