React Js环境设置

-2

我是新来对付js，我试图为它设置环境，然后我按照https://www.tutorialspoint.com/reactjs/reactjs_environment_setup.htm中提到的步骤操作。React Js环境设置

但这样做的所有提到的还有我得到这个错误之后的事情：

'webpack-dev-server' is not recognized as an internal or external command, operable program or batch file

enter image description here

2017-08-01 vindy

的可能的复制[的WebPack不被识别为一个内部或外部命令，可操作的程序或批处理文件（https://stackoverflow.com/questions/35810172/webpack-is-not-recognized-as-a-internal - 或 - 外部命令可操作的程序 - 或） – George

运行：

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

，然后再试一次。你得到了错误，因为你的package.json文件中的devDependencies中找不到webpack-dev-server

来源

2017-08-01 16:37:19

我全部耳朵，告诉我 –

您可以请给我一些参考/链接来安装设置。我想从头开始做。 – vindy

这是因为你没有将webpack-dev-server作为全局包安装，这就是为什么你可以执行直。

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

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

好运

来源

2017-08-31 22:58:25

如果你想用巴贝尔的WebPack等开发应用程序，您需要按照下面的步骤。毫无疑问，互联网上有更好的教程，但它会给你一些想法。

1.Webpack：

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

2.安装依赖（ES6）

这些是你在你的项目（package.json）需要得到它的工作最小的相关。您可以直接将以下文本复制到名为“package.json”的新文件中。运行下面的命令集在你空项目目录：

安装节点包管理器

npm init [follow the command prompt to fill in meta data of your project like name, author,etc.]
安装全球封装

npm install -g babel babel-cli [this will install transpiler(babel) into your global environment]
安装模块捆绑

npm install webpack webpack-dev-server --save
安装通天插件

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

此命令集后，你的包。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.Write您的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.Setup的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.Running

需要在你的package.json 略有变化更换：

"scripts": { 
    "test": "No Command Written Yet" 
    },

与

"scripts": { 
     "dev": "webpack-dev-server --hot" 
     },

[这将改变你的脚本将运行执行应用通过的WebPack]捆绑

现在，每当你想运行项目，只是在项目RO ot目录和电话：

npm run dev

完成，玩得开心！

来源

2017-09-18 09:11:21

React Js环境设置

回答

相关问题