react, wepack, babel, node, npm start 错误

Question

./main.js 中的错误

模块构建失败（来自 ./node_modules/babel-loader/lib/index.js）：

错误：无法从“F:\reactapp”中找到模块“@babel/preset-es2015”
在 Function.module.exports [同步] (F:\reactapp\node_modules\resolve\lib\sync.js:43:15)
在 resolveStandardizedName (F:\reactapp\node_modules@babel\core\lib\config\files\plugins.js:101:31)
在 resolvePreset (F:\reactapp\node_modules@babel\core\lib\config\files\plugins.js:58:10)
在 loadPreset (F:\reactapp\node_modules@babel\core\lib\config\files\plugins.js:77:20)
在 createDescriptor (F:\reactapp\node_modules@babel\core\lib\config\config-descriptors.js:154:9)
在 items.map (F:\reactapp\node_modules@babel\core\lib\config\config-descriptors.js:109:50)
在 Array.map () 在 createDescriptors (F:\reactapp\node_modules@babel\core\lib\config\config-descriptors.js:109:29)
在 createPresetDescriptors (F:\reactapp\node_modules@babel\core\lib\config\config-descriptors.js:101:10)
在 passPerPreset (F:\reactapp\node_modules@babel\core\lib\config\config-descriptors.js:58:96)
@multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./main.js main[2]

“index.html”的子 html-webpack-plugin：
1 项资产
入口点未定义 = index.html
[./node_modules/html-webpack-plugin/lib/loader.js!./index.html] 448 字节 {0} [内置]
[./node_modules/lodash/lodash.js] 527 KiB {0} [内置]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 字节 {0} [内置] [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 字节 {0} [内置]

i ?wdm?: 编译失败。

终止批处理作业 (Y/N)？

package.json 文件：

打包json文件如下。我关注了https://www.tutorialspoint.com/reactjs/reactjs_environment_setup.htm

{
  "name": "reactapp",
  "version": "1.0.0",
  "description": "demo project",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --mode development --open --hot",
    "build": "webpack --mode production"
  },
  "keywords": [
    "[]"
  ],
  "author": "manjunathan g",
  "license": "ISC",
  "dependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.2.2",
    "@babel/preset-react": "^7.0.0",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "webpack": "^4.28.2",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.14"
  },
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.2.3",
    "@babel/preset-env": "^7.2.3",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "html-webpack-plugin": "^3.2.0"
  }
}

babel 配置：

Babel 配置文件如下；按照https://www.tutorialspoint.com/reactjs/reactjs_environment_setup.htm

{
  "presets":["env", "react"]
}

webpack 配置

webpack 配置如下：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
   entry: './main.js',
   output: {
      path: path.join(__dirname, '/bundle'),
      filename: 'index_bundle.js'
   },
   devServer: {
      inline: true,
      port: 8080
   },
   module: {
      rules: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
               presets: ['@babel/react', '@babel/es2015'],
               plugins: ['@babel/proposal-class-properties']
            }
         }
      ]
   },
   plugins:[
      new HtmlWebpackPlugin({
         template: './index.html'
      })
   ]
}

Answer 1

@babel/preset-es2015 包已被弃用，您无法再从 NPM 安装它。

现在的建议是改用@babel/preset-env。

Answer 2

您的文件配置有很多错误。让我试着解决它：

.babelrc

您不需要以下 devDependencies：babel-core、babel-preset-env、babel-preset-react 和 babel-preset-es2015。自 Babel 7 发布以来，它们已被弃用。将您的代码替换为：

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

webpack.config.js

自从webpack 4发布以来，你不需要通知输入和输出字段（你可以这样做自定义配置）。默认情况下，webpack 会在src/ 目录中查找index.js 文件（该目录必须在项目的根目录中）。 Webpack 将从该文件创建模块依赖关系图并将捆绑的文件输出到dist/ 目录。尝试像这样配置您的 webpack.config.js：

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
    module: {
        rules: [
            {
                test: /\.jsx$/,
                exclude: /node_modules/,
                use: { loader: "babel-loader" }
            },
            {
                test: /\.html$/,
                use: { loader: "html-loader" } //Install it: 'npm i -D html-loader'
            }
        ]
    },
    plugins: [
         new HtmlWebpackPlugin({
              template: "src/index.html" // Put the index.html in the src/ directory
         })
    ]
}

我不是配置 webpack 方面的专家，不知道能否帮助您。我写了一篇关于媒体设置环境以使用 react、babel 和 webpack 的文章，但它是葡萄牙语。如果要查看：https://medium.com/@brunonakayabu/react-webpack-e-babel-configurando-o-ambiente-de-desenvolvimento-c7ee8a994222