無法解析模塊說明符“babel-runtime/regenerator”

Question

我正在按照此鏈接的說明進行操作。 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 失敗了。

Answer 1

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>