我使用 babel.js node.js API 來編譯 react jsx 和 js 腳本。
例如，我有以下 node.js 腳本：
// react_transform.js
const fs = require("fs");
code = fs.readFileSync("./samples/sample4.js", 'utf8');
result2 = require("@babel/core").transformSync(code, {
presets: [
"@babel/preset-env",
"@babel/preset-react",
],
plugins: [
"@babel/plugin-transform-runtime",
],
});
fs.writeFileSync(`./out/out4.js`, result2.code);
console.log("y.");
具有 jsx 代碼的輸入檔案如下：
// sample4.js
ReactDOM.render(
<div>
<p>
hoge.
</p>
</div>
,
document.getElementById('root')
);
$(".__upvote").click(async function (e) {
alertify.warning("You need to login.");
});
沒有"@babel/plugin-transform-runtime",node.js腳本中的行，當我在瀏覽器上使用腳本時（輸出代碼應該位于生產中），它會導致錯誤：
VM496:9 Uncaught ReferenceError: regeneratorRuntime is not defined
所以，我做了研究并添加了這條線。但現在我開始得到一個新的錯誤：
VM830:5 Uncaught TypeError: _interopRequireDefault is not a function
順便輸出的js檔案如下：
// out4.js
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
ReactDOM.render( /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", null, "hoge.")), document.getElementById('root'));
$(".__upvote").click( /*#__PURE__*/function () {
var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(e) {
return _regenerator["default"].wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
alertify.warning("You need to login.");
case 1:
case "end":
return _context.stop();
}
}
}, _callee);
}));
return function (_x) {
return _ref.apply(this, arguments);
};
}());
所以我再次對新錯誤進行了研究，發現了一個 SO 帖子：
reactjs - 如何修復 TypeError _interopRequireDefault 不是 Create React App 中的函式 - 代碼日志
人們說：
將 @babel/runtime 添加到依賴部分。那將解決它。
添加“@babel/runtime”后，我修復了它
所以我將“@babel/runtime”添加到 package.json 然后 npm install-ed。現在 package.json 就像（我省略了不相關的行）：
{
"name": "tmp",
"version": "1.0.0",
"description": "",
"main": "lodash_dev.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"@babel/runtime": "^7.17.8",
},
"devDependencies": {
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-transform-react-jsx": "^7.17.3",
"@babel/plugin-transform-runtime": "^7.17.0",
"@babel/preset-env": "^7.16.11",
"@babel/preset-react": "^7.16.7",
}
}
然后重新運行 node.js 腳本，我得到了輸出，我在瀏覽器的頁面上測驗了它，但是，由于某種原因，錯誤仍然存??在。
我怎樣才能解決這個問題？謝謝。
uj5u.com熱心網友回復：
您正在使用 Babel 轉換您的代碼，但您沒有運行諸如 esbuild 或 webpack 之類的打包程式。
require()不是瀏覽器中的東西。捆綁器的職責（除其他外）是將所有這些require()呼叫決議為真正的模塊，并最終得到一個（或多個）包含所有require()d 代碼且沒有require()s 的 .js 檔案。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/453253.html
標籤：javascript 巴别塔