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 ?：编译失败。

终止批处理作业（是/否）？

package.json文件：

package 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 和< em> babel-preset-es2015 。自实现 Babel 7 以来，已弃用它们。将您的代码替换为此：

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

webpack.config.js

自 webpack 4 发布以来，您无需通知输入和输出字段（您可以针对自定义配置进行操作）。默认情况下， webpack 将在index.js目录中查找src/文件（此目录必须位于项目的根目录中）。 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

反应，wepack，babel，节点，npm启动错误

错误

package.json文件：

babel配置：

webpack配置

2 个答案:

.babelrc

webpack.config.js