Question

我正在开发一个将React和ASP.Net集成在一起的项目。我已经做了最初的Hello World，并且每个都按预期工作（不是很难：p）。我使用webpack和babel-loader来生成我的`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组件和所有其他组件添加到我的反应文件夹中，在我的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

错误是因为您尚未在.babelrc文件中添加package.json个文件或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']
                    }
                }
            }
        ]
    }
}

希望有所帮助：）

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

1 个答案: