反應，wepack，babel，節點，npm啟動錯誤

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]

子html-webpack-plugin的“ index.html”：
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} [內置]

我？wdm ?：編譯失敗。

終止批處理作業（是/否）？

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

您的文件配置中有很多錯誤。 讓我嘗試解決它：

您不需要以下devDependencies： babel-core ， babel-preset-env ， babel-preset-react和babel-preset-es2015 。 自實現Babel 7以來，已棄用它們。 將您的代碼替換為：

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

由於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