react、wepack、babel、节点、npm启动错误

Question

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

错误：在函数“F:\reactapp”
中找不到模块“@babel/preset-es2015”。单元在resolveStandardizedName（F:\reactapp\node\u modules\resolve\lib\sync.js:43:15）处导出[作为同步]
_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 descriptor.js:154:9）
at items。映射（F:\reactapp\node）_modules@babel\数组中的core\lib\config\config descriptor.js:109:50）
。CreateDescriptor（F:\reactapp\node）处的映射（）_modules@babel\core\lib\config\config descriptor.js:109:29）
位于createPresetDescriptors（F:\reactapp\node_modules@babel\core\lib\config\config descriptor.js:101:10）
在PassperReset（F:\reactapp\node_modules@babel\core\lib\config\config descriptor.js:58:96）
@multi（webpack）-开发服务器/客户端？http://localhost:8080（网页包）/hot/dev服务器。js/主要的js main[2]

“index.html”的子html网页包插件：
1资产
入口点未定义=索引。html
[/节点模块/html网页包插件/lib/loader.js./index.html]448字节{0}[构建]
[/节点模块/lodash/lodash.js]527 KiB{0}[构建]
[/节点模块/webpack/buildin/global.js]（网页包）/buildin/global.js）。JS472字节{0}[builded][./node_modules/webpack/buildin/module.js]（webpack）/buildin/module。js 497字节{0}[编译]

我wdm？：未能编译。

终止批处理作业（Y/N）？

包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配置文件如下所示；按照https://www.tutorialspoint.com/reactjs/reactjs_environment_setup.htm

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

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

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

你不需要下面的dev依赖项：Babel-core，Babel-preet-env，Babel-preet-反应和Babel-preet-es2015。自从巴别塔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的专家，我不知道我是否能帮助你。我写了一篇关于媒体设置环境与反应，巴贝尔和webpack工作的文章，但它是葡萄牙语。如果你想检查：https://medium.com/@brunonakayabu/react-webpack-e-Babel-配置-o-环境-de-desenvolvimento-c7ee8a994222

Answer 2

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

现在的建议是使用@babel/preset-env代替。