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

问题描述

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

I try to bundle two JavaScript modules, so that the resulting code works in IE11. For this I have setup a yarn/npm project which uses rollup.js for bundling and Babel for transpiling. Everything works fine until I add the (non-dev) dependency 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'
    })
  ]
};

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)中使用.到目前为止一切顺利.

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. The resulting file works even in modern browsers like Chrome. So far so good.

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

However the bundled file is not yet IE11 ready: In IE I get errors like Object doesn't support property or method 'getOwnPropertySymbols'. So the polyfills from core-js need to be added.

为此，我将 core-js 安装为产品依赖项.现在 rollup -c 不会给我警告-但是生成的 dist/main.js 就像

For this I install core-js as a prod dependency. Now rollup -c doesn't give me warnings - but the resulting dist/main.js begins like

(function (exports) {
  'use strict';

  var $ = require('../internals/export');
.
.
.

作为脚本既不能执行Chrome也不能执行IE！看起来， core-js 库的存在以某种方式使汇总捆绑程序脱颖而出.

which as a script can not neither Chrome nor IE execute! It looks like that somehow the presence of the core-js library throws the rollup bundler off.

如何解决我的设置问题，使生成的 dist/main.js 在Chrome和IE11中充当非模块脚本?

How can I fix my setup so that the resulting dist/main.js works as non-module script in Chrome and IE11?

推荐答案

我认为，当您启用选项 useBuiltIns:"usage" 时，这意味着它将从 corejs附加代码到以 cjs 样式编写的模块文件中.因此，您必须添加此插件 @ rollup/plugin-commonjs 才能转换回 esm ，然后它将起作用:

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. So you have to add this plugin @rollup/plugin-commonjs to convert back to esm, then it will work:

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

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

这篇关于将JS与Baup和Babel捆绑在一起，以在IE11中使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！