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環境設置

回答

相關問題