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

Posted 2023-02-16

【中文标题】react, wepack, babel, node, npm start 错误

【英文标题】：react, wepack, babel, node, npm start error

【发布时间】：2019-05-24 05:45:36

【问题描述】：

./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'
      )
   ]

【问题讨论】：

有人请帮助我，我正在努力开始我的第一个项目。

我已经重新格式化了你的问题。但是您仍然应该添加一些您正在尝试做的事情的描述，更重要的是：一个好的问题不仅包括错误消息和源文件的转储，还包括一个精心制定的......问题。

【参考方案1】：

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

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

【参考方案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