gpt4 book ai didi

javascript - 无法解析模块说明符 "babel-runtime/regenerator"

转载 作者:行者123 更新时间:2023-12-05 06:56:44 26 4
gpt4 key购买 nike

我正在按照此链接的说明进行操作。 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 中编写你的 React 代码(你可以导入其他 React 文件、模块......)

然后在你的 html 中放一个脚本标签:<script src="public/react/app1.js"></script>

关于javascript - 无法解析模块说明符 "babel-runtime/regenerator",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65083747/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com