如何解决 Babel 编译 ES6 后无法识别的 require 问题？

在使用 Babel 编译 ES6 代码时，经常会遇到 require 函数无法被正确解析的问题。这是因为 require 是 CommonJS 规范中的模块加载函数，在 ES6 中并不是一个原生的关键字，需要通过插件才能实现对其的支持。

以下是一个代码示例：

import fs from 'fs';

const data = fs.readFileSync('example.txt', 'utf8');
console.log(data);

在编译过程中，Babel 默认会将所有的 ES6 模块语法转换成 CommonJS 规范的代码，并且将其中的 import 语句转换成 require 函数。但是，在有些情况下，Babel 生成的代码中 require 函数无法被正确解析，例如：

(function(module, exports, require) {
    const fs = require("fs");
    
    const data = fs.readFileSync('example.txt', 'utf8');
    console.log(data);
});

在这种情况下，如果你直接在浏览器运行该代码，则会抛出“require is not defined”的错误。

如何解决这个问题呢？下面我们提供两种解决方案：

方案一：使用 @babel/plugin-transform-modules-systemjs 插件

在 .babelrc 或 babel.config.js 配置文件中添加如下内容：

{
  "plugins": [
    ["@babel/plugin-transform-modules-systemjs", {
      "systemGlobal": "System",
      "ignoreDynamicRequires": true
    }]
  ]
}

该插件可以将 ES6 模块语法转换成 SystemJS 规范的代码。使用该插件后，上述代码将被转换为：

-- -------------------- ---- -------
--------- -------- -------- -
    ------------------- -------- --------- --------- -
        ---- --------

        --- ---
        ------ -
            -------- ---
            -------- -------- -- -
                -- - --------------------------

                ----- ---- - ------------------------------ --------
                ------------------
            -
        --
    ---
---

需要注意的是，在使用该插件时，必须将 systemGlobal 设为 System。

方案二：使用 esm 模块加载器

除了使用 Babel 插件外，另一种解决方案是使用 esm（ECMAScript modules）模块加载器，可以将 ES6 模块语法直接加载到浏览器中。

在 Node.js 中，您可以通过以下方式安装 esm 模块加载器：

npm install esm

然后，在运行 Node.js 代码之前，需要添加一行代码来启用 esm：

require = require('esm')(module)

这样，你就可以直接使用 ES6 的模块语法了:

import fs from 'fs';

const data = fs.readFileSync('example.txt', 'utf8');
console.log(data);

需要注意的是，在使用 esm 时，必须使用 ECMAScript 模块语法。

总结：

以上是两种解决 Babel 编译 ES6 后无法识别的 require 问题的方案。使用第一种方案需要添加 Babel 插件，而第二种方案则需要安装 esm 模块加载器。具体的选择取决于您应用程序的实际情况。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651b726195b1f8cacd31b27d