NodeJS 使用plugin-transform-runtime后未定义require

mspsb9vt  于 2023-04-05  发布在  Node.js
关注(0)|答案(3)|浏览(177)

我试图创建一个简单的ui窗口,在那里我可以快速测试react代码。所以我的想法是,我在窗口中输入react jsx代码,在另一个窗口中,我从代码中获得应用程序。
输入(带有react jsx代码)被发送到nodejs进程,该进程将其转换为可以在浏览器react库中处理的普通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
如何解决这个问题,为浏览器提供已经“准备好”的代码,而这些代码不包含任何要求?

yeotifhr

yeotifhr1#

基本上,要运行plugin-transform-runtime,您需要某种打包器。

wz3gfoph

wz3gfoph2#

我在我的项目中也遇到了同样的问题,因为我包含了一个函数来删除输出代码中不必要的“use strict”声明。为此,我使用了@babel/transform-runtime插件,它生成了这个错误“require is not defined”。
因此,我通过重新配置.babelrc配置文件插件选项解决了这个问题。下面是我的配置:

{
 "presets": ["@babel/preset-env"],
 "plugins": [
  [
    "@babel/transform-runtime",
    {
        "absoluteRuntime": false,
        "corejs": false,
        "helpers": false,
        "regenerator": true
    }
  ]
 ]
}

它对我很有用,所以我希望它对你也有用。

z31licg0

z31licg03#

我在测试一个同时用于webnode目标(前端和后端)的模块时遇到了这个问题。当捆绑包准备好后,将其粘贴到浏览器控制台以检查功能时,出现了完全相同的错误。

当我遇到这个问题时,对我有效的事情

1.检查系统中的Nodejs版本。如果您在package.json中看到type: module,这将在require使用时抛出错误,因为它需要es6 import。如果您看到,请尝试将其更改为type: commonjs或将其从package.json中删除
1.是的,@babel/polyfill现在是@babel/plugin-transform-runtime,它有所有的内置,帮助器来支持Promise,Symbol,Set和其他ES6内置。之前我们依赖Bluebird在浏览器中备份Promise。Babel运行时和Babel插件转换运行时需要检查。
1.作为替代方案,您可以尝试@babel/register使用babel动态运行文件。require钩子将自身绑定到节点的require,并在运行时自动编译文件。
1.如果您使用的是nodeexternals,那么它将需要node的require函数。
1.将此"modules": "commonjs"添加到.babelrc文件中。
1.我必须在webpack.config输出中指定libraryTarget: 'umd'。如果使用nodeExternals,也需要它。UMD(通用模块定义)格式允许使用commonjs导入JavaScript模块。
最后一步6可能适用于你,也可能不适用于你,但对我来说,第1、2、3和6步解决了所有问题。

相关问题