反应 npm 启动问题答案

【问题标题】：React npm start issue反应 npm 启动问题
【发布时间】：2018-01-11 23:41:42
【问题描述】：

我在执行 npm start 时收到此错误。我尝试删除节点模块并再次执行 npm install 但修复了问题

multi (webpack)-dev-server/client 中的错误？http://localhost:8080./main.js

找不到模块：错误：无法解析“*****”中的“babel”

@multi (webpack)-dev-server/client?http://localhost:8080./main.js

webpack：编译失败

This is my webpack.config
    module.exports = {
        entry : './main.js',
        output: {
            path: '/',
            filename: 'index.js'
        },
    devServer: {
        inline: true,
        port: 8083
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    presets: ['es2015','react']
                }
            }
        ]
    }
    }

This is my package.json
    {
      "name": "proj3",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "start": "webpack-dev-server"
      },
      "author": "",
      "license": "ISC",
      "dependencies": {
        "react": "^15.6.1",
        "react-dom": "^15.6.1"
      },
      "devDependencies": {
        "webpack": "^3.4.1",
        "webpack-dev-server": "^2.6.1"
      }
    }

【问题讨论】：

只需使用 react-slingshot 或 create-react-app (github.com/facebookincubator/create-react-app) 之类的东西。它最终将为您节省大量时间和头痛，因此您可以专注于开发而不是设置工具。

标签： reactjs npm webpack-dev-server babeljs npm-start

【解决方案1】：

您需要将 Babel 包添加到您的项目中，因为它会转译 ES6 代码（反应）。

这是包裹。

babel-loader
babel-core
babel-preset-es2015
babel-preset-react

【讨论】：

npm install --save babel-loader babel-core babel-preset-es2015 babel-preset-react