在 React 应用程序中运行ning npm 运行 dev 命令时出错

Question

我是 React.js 的新手，我正在尝试使用 webpack 在本地设置简单的 React 应用程序。运行在 npm 运行 dev 命令中我遇到了以下错误。

在运行ning npm 运行 dev

之后进入命令提示符时出错

F:\ReactApp\react-webpack>npm run dev


> react-webpack@1.0.0 dev F:\ReactApp\react-webpack
> webpack -wd

error: option '-d, --devtool <value>' argument missing

npm ERR! code ELIFECCLE

npm ERR! errno 1

npm ERR! react-webpack@1.0.0 dev: `webpack -wd`

npm ERR! Exit status 1

npm ERR!

npm ERR! Failed at the react-webpack@1.0.0 dev script.

npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

npm ERR!     C:\Users\nilesh\AppData\Roaming\npm-cache\_logs20-10-30T08_33_31
_702Z-debug.log

下面是 package.json 文件中的代码

{
  "name": "react-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "dependencies": {
    "babel-loader": "^6.4.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "webpack": "^5.3.2",
    "webpack-cli": "^4.1.0"
  },
  "devDependencies": {},
  "scripts": {
    "dev": "webpack -wd"
  },
  "author": "",
  "license": "ISC"
}

下面是 webpack.config.js 文件的代码

const path = require('path');

module.exports = {
    entry : './js/app.js',
    output : {
        path: path.join(__dirname,'public'),
        filename: 'bundle.js'

    },
    module :{

        loaders: [
             {
                 test: /\.js$/,
                 exclude: /node_modules/,
                 loader:'babel-loader'
             }
        ]
    }
};

app.js 文件中的代码


import React from "react";
import ReactDOM from "react-dom";

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}
ReactDOM.render(
  <HelloMessage name="Taylor" />,
  document.getElementById('root')
);

这是我的 .babelrc 文件

{
    "presets":[
        "react",
        "es2015"
    ]
}

我已经安装了最新版本的node.js

提前致谢

尼勒什库尔卡尼

Answer 1

如错误消息所述，您缺少 -d (--devtool) 参数的值。您可以在 this list 上找到有效值列表。您可以将其直接添加到您的 webpack 配置中，如下所示：

module.exports = {
    ...
    devtool: 'source-map' // or any other valid value here
    ...
};

如果你想使用一个值，你只需要在配置中为 devtool 设置一个值，同样，如果你要传递一个值，你只需要在 CLI 中使用 -d 参数命令行界面。如果您不想使用开发工具，请将其从您的 webpack 配置中删除并将您的开发脚本更改为 webpack -w。但是，对于开发，您可能需要 sourcemaps，因此我建议使用 devtool: 'source-map'（您仍需要将开发脚本更改为 webpack -w）。

Answer 2

您必须通过使用 -d devtools 或将

指定 devtool

module.exports = {
    ...
    devtool: 'source-map'
    ...
};

在你的 webpack.config.js.

如果您选择更改 webpack.config.js 文件则不需要 -d 选项，如果您使用 -d 则必须在后面指定一个参数否则会抛出错误.

在 React 应用程序中运行ning npm 运行 dev 命令时出错

Error while running npm run dev command in react application

javascript

npm

reactjs

webpack

babel-loader

在 React 应用程序中 运行ning npm 运行 dev 命令时出错

Error while running npm run dev command in react application

javascript

npm

reactjs

webpack

babel-loader

在 React 应用程序中运行ning npm 运行 dev 命令时出错