Question

我刚接触js并尝试为其设置环境，我按照https://www.tutorialspoint.com/reactjs/reactjs_environment_setup.htm中提到的步骤进行了反应。

但在完成所有提到的事情后，我收到了这个错误：

＆＃39;的WebPack-DEV-服务器＆＃39;不被识别为内部或外部命令，可操作程序或批处理文件

enter image description here

Answer 1

如果您想使用babel，webpack等开发应用程序，则需要按照以下步骤操作。毫无疑问，互联网上有更好的教程，但它会给你一些想法。

<强> 1.Webpack：

在浏览器中，您不能像编写node.js代码时那样require或import模块。在模块捆绑器的帮助下，也许 Webpack，，您可以编写使用require/import的代码，方法与在节点环境中使用它的方式相同。我假设你会考虑它的受欢迎程度webpack。

<强> 2。安装依赖项（es6）

这些是项目（package.json）中所需的最小依赖项，以使其正常工作。您可以直接将以下文本复制粘贴到名为＆＃34; package.json＆＃34;的新文件中。在您的EMPTY项目目录中运行以下命令集：

安装节点包管理器

npm init [按照命令提示填写项目的元数据，如姓名，作者等。]
安装全球套餐

npm install -g babel babel-cli [这会将transpiler（babel）安装到你的全球环境中]
安装模块捆绑包

npm install webpack webpack-dev-server --save
安装 babel插件

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 = config;

4.设置应用程序的入口点

SRC-＆GT; 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

完成，玩得开心！

Answer 2

执行命令

npm install webpack-dev-server --save-dev

再试一次。您收到错误是因为无法在package.json文件中的devDependencies中找到webpack-dev-server

Answer 3

这种情况正在发生，因为您没有将webpack-dev-server安装为全局程序包，这就是您可以直接执行的原因。

推荐的方法是在本地安装，这样就可以避免这个问题。

Here您可以找到使其运行的步骤。

祝你好运

React Js Environment设置

3 个答案: