Rollup / Babel / CoreJS --“未定义要求”

Question

我试图使用Rollup.js构建一些与IE11兼容的JS。经过几个小时非常令人沮丧的摆弄各种配置选项之后，我突然发现了以下几点：

import resolve from "@rollup/plugin-node-resolve"
import { babel } from '@rollup/plugin-babel';

export default {
  input: "app/javascript/application.js",
  output: {
    file: "app/assets/builds/application.js",
    format: "es",
    inlineDynamicImports: true,
    sourcemap: true
  },
  plugins: [
    babel({
      presets: [
        [
          "@babel/preset-env", {
            "useBuiltIns": "usage",
            "debug": true,
            "corejs": "3"
          }
        ]
      ]
    }),
    resolve(),
  ]
}

查看调试条目，我的填充似乎正在被添加(yay?)。但是，由于某些原因，它们似乎被添加到require中，例如，当我试图在浏览器中运行JS时，我得到：

Uncaught ReferenceError: require is not defined

令人反感的代码行似乎是：

var TO_STRING_TAG_SUPPORT = require('../internals/to-string-tag-support');

var redefine$2 = require('../internals/redefine');

var toString$3 = require('../internals/object-to-string'); // `Object.prototype.toString` method
// https://tc39.es/ecma262/#sec-object.prototype.tostring

但我不明白为什么会这样，如果Babel正在为浏览器转换代码，那么require就不应该接近我的代码了？请帮帮忙，我正在撕扯我在这件事上还留着的头发！

Answer 1

我对此做了一些研究，看起来Babel并没有真正地触摸require/import语句--它依赖于绑定程序来完成这一任务，不管是通过自身还是通过其他插件。我相信你可以用CommonJS插件解决这个问题

import commonjs from '@rollup/plugin-commonjs';
import resolve from "@rollup/plugin-node-resolve"
import { babel } from '@rollup/plugin-babel';

export default {
  input: "app/javascript/application.js",
  output: {
    file: "app/assets/builds/application.js",
    format: "es",
    inlineDynamicImports: true,
    sourcemap: true
  },
  plugins: [
    babel({
      presets: [
        [
          "@babel/preset-env", {
            "useBuiltIns": "usage",
            "debug": true,
            "corejs": "3"
          }
        ]
      ]
    }),
    resolve(),
    commonjs()
  ]
}

相关的添加行是插件数组中的第一行和最后一行。

我没有建立一个自己的系统，所以我不能测试这个，但我希望它有帮助！