react，wepack，babel，node，npm启动错误

Question

./main.js中的错误

模块构建失败(来自./node_node/babel-加载程序/lib/index.js)： 错误:无法从“F：\reactapp”中找到模块“@babel/预设-es2015” 在Function.module.exports as sync 在(F:\reactapp\node_modules@babel\core\lib\config\files\plugins.js:101:31) resolveStandardizedName 在(F:\reactapp\node_modules@babel\core\lib\config\files\plugins.js:58:10) resolvePreset 在(F:\reactapp\node_modules@babel\core\lib\config\files\plugins.js:77:20) loadPreset 在(F:\reactapp\node_modules@babel\core\lib\config\config-descriptors.js:154:9) createDescriptor 在(F:\reactapp\node_modules@babel\core\lib\config\config-descriptors.js:109:50) items.map 在(F:\reactapp\node_modules@babel\core\lib\config\config-descriptors.js:109:29) Array.map () 在(F:\reactapp\node_modules@babel\core\lib\config\config-descriptors.js:101:10) createPresetDescriptors 在(F:\reactapp\node_modules@babel\core\lib\config\config-descriptors.js:58:96) passPerPreset @ multi (webpack)-dev-server/client?http://localhost:8080 (Webpack)/index.html/dev-server.js ./main.js main2 Child html-index.html插件： 1项资产 入口点未定义= index.html ./node_modules/html-webpack-plugin/lib/loader.js!./index.html 448字节{0}构建了527 KiB {0} built (webpack)/buildin/global.js 472字节{0}构建(webpack)/buildin/module.js 497字节{0} built i ?wdm?：编译失败。终止批处理作业(Y/N)？

package.json文件：

包json文件如下所示。我跟着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配置文件如下所示，如下所示：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代替。