使用 plugin-transform-runtime 后未定义 require答案

【问题标题】：require is not defined after using plugin-transform-runtime使用 plugin-transform-runtime 后未定义 require
【发布时间】：2020-10-17 04:07:55
【问题描述】：

我正在尝试创建一个简单的 ui 窗口，我可以在其中快速测试反应代码。所以我的想法是我在窗口中输入 react jsx 代码，而在另一个窗口中我正在从该代码中获取应用程序。

输入（带有 react jsx 代码）被发送到 nodejs 进程，该进程将其转换为可以在浏览器反应库中处理的普通 js 代码。我遇到的问题是这个错误regeneratorRuntime is not defined。

我当前的代码：

const babel = require("@babel/core");

// body comes from window input

console.log(
    babel.transform(body, {
        "presets": ["@babel/env", "@babel/react"],
        "plugins": ["@babel/plugin-proposal-class-properties"]
    }).code
);

我阅读了一些关于此错误的主题，大多数似乎都建议添加"@babel/plugin-transform-runtime"

这样就变成了：

console.log(
    babel.transform(body, {
        "presets": ["@babel/env", "@babel/react"],
        "plugins": ["@babel/plugin-proposal-class-properties", "@babel/plugin-transform-runtime"]
    }).code
);

但是此时 babel 转换返回的代码在开头包含这些：

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

但是由于这段代码是由浏览器处理的，所以会抛出错误Uncaught ReferenceError: require is not defined

如何解决这个问题，以向浏览器提供已经“准备好”但不包含任何要求的代码？

【问题讨论】：

标签： node.js reactjs babeljs

【解决方案1】：

基本上，要运行 plugin-transform-runtime，您将需要某种捆绑程序。看看babelify。

【讨论】：

【解决方案2】：

我在测试适用于 web 和 node 目标（前端和后端）的模块时遇到了这个问题。捆绑包准备就绪后，将其粘贴到浏览器控制台以检查功能会引发完全相同的错误。

遇到此问题时对我有用的方法：

检查系统中的 Nodejs 版本。如果您在package.json 中看到type: module，这将在require 的使用上引发错误，因为它期待es6 import。如果看到，请尝试将其更改为 type: commonjs 或将其从 package.json 中删除
是的 @babel/polyfill 现在是 @babel/plugin-transform-runtime 具有所有内置函数，支持 Promise、Symbol、Set 和其他 ES6 内置函数的助手。早些时候，我们依靠 Bluebird 在浏览器中备份 Promise。 Babel 运行时和 Babel 插件转换运行时需要检查。
作为替代方案，您可以尝试@babel/register 使用 babel 即时运行文件。 require 钩子会将自己绑定到节点的 require 并在运行时自动编译文件。
如果您使用的是nodeexternals，那么它会期望节点的require 函数。设置目标为umd
将此"modules": "commonjs" 添加到您的.babelrc 文件中。
我必须在webpack.config 输出中指定libraryTarget: 'umd'。如果使用，nodeExternals 也需要它。 UMD（通用模块定义）格式允许使用 commonjs 导入 JavaScript 模块。

最后的步骤 6 可能适用于您，也可能不适用，但对我来说，步骤 1、2、3 和 6 解决了所有问题。

【讨论】：