我是 react js 新手，我正在尝试为它设置环境，我按照https://www.tutorialspoint.com/reactjs/reactjs_environment_setup.htm 中提到的步骤操作。
但是在做了所有提到的事情之后，我得到了这个错误：
'webpack-dev-server' 不是内部或外部命令、可运行程序或批处理文件
【问题讨论】：
标签： javascript node.js reactjs
如果您想使用 babel、webpack 等开发应用程序，您需要按照以下步骤操作。毫无疑问，互联网上有更好的教程，但它会给你一些想法。
1.Webpack：
在浏览器中，您不能像编写 node.js 代码时那样使用 require 或 import 模块。在模块捆绑器的帮助下，也许是 Webpack，，您可以编写使用 require/import 的代码，就像在节点环境中使用它一样。考虑到它的受欢迎程度，我假设你会使用webpack。
2。安装依赖项 (es6)
这些是您在项目 (package.json) 中运行所需的最小依赖项。您可以直接将以下文本复制粘贴到名为“package.json”的新文件中。在 EMPTY 项目目录中运行以下命令集：
npm init[按照命令提示填写项目的元数据，如名称、作者等]
npm install -g babel babel-cli[这会将 transpiler(babel) 安装到你的全局环境中]
npm install webpack webpack-dev-server --save
npm install babel-core babel-loader babel-preset-react babel-preset-es2015
执行此命令后，您的 package.json 将开始如下所示：
{
"name": "reactjs",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "No Command Written Yet"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"webpack": "^3.4.1",
"webpack-dev-server": "^2.6.1"
},
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1"
}
}
3.编写你的 webpack-config.js 文件
webpack 配置文件示例应该是这样的。不要问我它的每一点，而是看看webpack教程，因为我无法在这里解释所有内容。只要记住一个事实
Webpack 是一个模块捆绑器，它为浏览器捆绑javascript 和其他资产。
var config = {
entry: './main.js',
output: {
path:'/',
filename: 'index.js',
},
devServer: {
inline: true,
port: 8080
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
}
}
module.exports = 配置；
4.为您的应用设置入口点
src->index.js
index.js
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<App />
, document.querySelector('.init')
);
5.在项目根目录中设置 index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Welcome to ReactJs</title>
</head>
<body>
<div class="init"></div>
</body>
<script src="./public/bundle.js"></script>
</html>
6.跑步
您的 package.json 需要稍作改动 替换：
"scripts": {
"test": "No Command Written Yet"
},
与
"scripts": {
"dev": "webpack-dev-server --hot"
},
[这将更改您将运行以执行 webpack 捆绑的应用程序的脚本]
现在，只要你想运行项目，只需在项目根目录中调用：
npm run dev
完成，玩得开心！
【讨论】：
运行：
npm install webpack-dev-server --save-dev
然后再试一次。您收到错误是因为在 package.json 文件中的 devDependencies 中找不到 webpack-dev-server
【讨论】：
发生这种情况是因为您没有将webpack-dev-server 作为全局包安装，这就是您可以直接执行的原因。
推荐的方式是本地安装，这样可以避免这个问题。
Here你可以找到让它运行的步骤。
祝你好运
【讨论】：