导入 React 组件时 Webpack 模块构建失败

Question

我正在开发一个将 React 和 ASP.Net 集成在一起的项目。我已经创建了最初的Hello World，并且每个都按预期工作（不难：p）。我正在使用带有 babel-loader 的 webpack 来生成我的 `bundle.js。

import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(<h1>LPMU</h1>, document.getElementById('root'))

这是我的webpack.config.js 文件：

module.exports = {
    context: __dirname,
    entry: "./App.js",
    output: {
        path: __dirname + "/dist",
        filename: "bundle.js"
    },
    watch: true,
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['babel-preset-env', 'babel-preset-react']
                    }
                }
            }
        ]
    }
}

解决此问题后，我尝试将我的 App.js 组件和所有其他组件添加到我的 react 文件夹中，在我的 ASP.NET 项目的 Scripts 中。我没有使用export default App，因为我使用的是ReactDOM.render()。我像往常一样将我的组件导入到我的 App.js 中：

import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import './App.css';
import Header from './Header';
import Footer from './Footer';
import Landing from './Landing';
import * as lpmuGlobal from './lpmu-global';

然后我只渲染 App 组件：

ReactDOM.render(<App />, document.getElementById('root'))

现在当我再次运行npm run webpack 时，我遇到了两个问题，分别是：

  size   name  module    status
  704 B  0     ./App.js  built failed ✖

  Δt 596ms (1 asset hidden)


./App.js
  0:0  error  Module build failed (from ./node_modules/babel-loader/lib/index.js):

configuration
  0:0  warning  The 'mode' option has not been set, webpack will fallback to
                'production' for this value. Set 'mode' option to 'development' or
                'production' to enable defaults for each environment.

✖ 2 problems (1 error, 1 warning)

我一直在寻找解决方案，但由于我对 webpack 真的很陌生，我不知道会发生什么，如果我需要我的 webpack.config.js 上的任何其他内容，如果我必须在任何地方导入我的组件其他方式或其他方式。

这也是我的json.package：

{
  "name": "lpmu-react-app",
  "version": "1.0.0",
  "description": "Integración de ReactJS con ASP.NET",
  "main": "App.js",
  "scripts": {
    "start": "react-scripts start",
    "webpack": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "DPS",
  "license": "ISC",
  "dependencies": {
    "react": "^16.4.0",
    "react-dom": "^16.4.0",
    "webpack-command": "^0.2.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "webpack": "^4.12.0",
    "webpack-cli": "^3.0.4"
  }
}

谢谢

Answer 1

这个错误是因为你没有在你的package.json文件中添加.babelrc文件或者babel选项来提供babel选项。

为了启用预设，您必须在 .babelrc 中定义它 文件

将 babel 选项添加到您的 package.json 中：

package.json：

 {
  "name": "lpmu-react-app",
  "version": "1.0.0",
  "description": "Integración de ReactJS con ASP.NET",
  "main": "App.js",
  "scripts": {
    "start": "react-scripts start",
    "webpack": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "babel":{
   "presets": ["env","react"]
  }
  "author": "DPS",
  "license": "ISC",
  "dependencies": {
    "react": "^16.4.0",
    "react-dom": "^16.4.0",
    "webpack-command": "^0.2.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "webpack": "^4.12.0",
    "webpack-cli": "^3.0.4"
  }
}

通过以下链接进行进一步说明：

https://babeljs.io/docs/en/babelrc.html

https://babeljs.io/en/setup/#installation

关于警告：

Webpack 4 需要您在配置中包含 mode 选项，因为您通常希望将开发和生产配置分开。

浏览下面的链接，该链接详细说明了如何设置配置。 https://www.valentinog.com/blog/webpack-4-tutorial/

module.exports = {
    context: __dirname,
    entry: "./App.js",
    output: {
        path: __dirname + "/dist",
        filename: "bundle.js"
    },
    watch: true,
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['babel-preset-env', 'babel-preset-react']
                    }
                }
            }
        ]
    }
}

希望有帮助:)