我试图创建一个简单的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
如何解决这个问题,为浏览器提供已经“准备好”的代码,而这些代码不包含任何要求?
3条答案
按热度按时间yeotifhr1#
基本上,要运行plugin-transform-runtime,您需要某种打包器。
wz3gfoph2#
我在我的项目中也遇到了同样的问题,因为我包含了一个函数来删除输出代码中不必要的“use strict”声明。为此,我使用了@babel/transform-runtime插件,它生成了这个错误“require is not defined”。
因此,我通过重新配置.babelrc配置文件插件选项解决了这个问题。下面是我的配置:
它对我很有用,所以我希望它对你也有用。
z31licg03#
我在测试一个同时用于
web
和node
目标(前端和后端)的模块时遇到了这个问题。当捆绑包准备好后,将其粘贴到浏览器控制台以检查功能时,出现了完全相同的错误。当我遇到这个问题时,对我有效的事情:
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步解决了所有问题。