[英]Failed to resolve module specifier "babel-runtime/regenerator"
我正在按照此链接的说明进行操作。 https://reactjs.org/docs/add-react-to-a-website.html
我有以下代码并且有效:
const domContainers = document.querySelectorAll('[name="uiattr"]');
domContainers.forEach((element) => {
const id = element.id.split("-")[1];
ReactDOM.render(e(LikeButton), element);
});
如果我将其更改为此代码并向其添加异步:
const domContainers = document.querySelectorAll('[name="uiattr"]');
domContainers.forEach(async (element) => {
const id = element.id.split("-")[1];
const attr = await getAttr(id);
ReactDOM.render(e(LikeButton), element);
});
我在控制台中收到以下错误:无法解析模块说明符“babel-runtime/regenerator”
我这样安装了 bable: npm install babel-cli@6 babel-preset-react-app@3
我用这个命令部署: js-dev$ npx babel --watch src --out-dir../prj/static/prj/js/ --presets react-app/prod
我是 babel 世界的新手,我假设我需要别的东西,但不知道。 我假设语法是正确的,只是因为它的编译没有错误。 当我出错时,我看到 babel 失败了。
React 教程确实非常混乱,并没有涵盖所有方面。
我建议只安装react
& react-dom
: npm install --save react react-dom
你将需要webpack
来捆绑你的代码和babel
+ 几个插件来编译你的 JSX,使用异步函数,......: npm install --save-dev @babel/core @babel/preset-env @babel/preset-react @babel/plugin-transform-runtime babel-loader webpack webpack-cli
。
在您的根文件夹中创建一个webpack.config.js
文件:
const path = require('path');
module.exports = {
mode: "development", // or production
entry: {
app1: './react/app1/index.js'
},
watch: true,
output: {
filename: "[name].js",
path: path.join(__dirname, "public/react")
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
}
}
]
}
};
在您的根文件夹中创建一个.babelrc
文件:
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": ["@babel/plugin-transform-runtime"]
}
示例react/app1/index.js
文件:
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("myContainer"));
在./react/app1/index.js 中写入你的反应代码(你可以导入其他反应文件,模块,...)
然后在你的 html 中放一个脚本标签: <script src="public/react/app1.js"></script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.