現在Web開發的技術幾年前相比可謂變化之大。各種各樣的框架，各種各樣的工具，讓Web開發效率更高，開發出來的效果更好。同時帶來的是開發環境的復雜度相比以前是成倍的增加。ReatJS框架是現在比較流行的Web前端框架。在搭建開發環境是我采用的主要工具是npm+babel+visual studio code+browerify。
npm
npm 是node.js環境下的一個javascript包管理管理工具. 在安裝node.js后,npm也就一起安裝了。npm會基於某個目錄來管理該目錄下應用對各個包的依賴。So,我們首先需要為這個目錄初始化npm的環境。在該目錄下執行npm init命令來進行初始化
初始化過程中會提示輸入該目錄下應用的名字，版本等信息，如實填寫或采用默認即可。初始化后會在目錄下生成package.json文件，這是對該目錄（應用）的npm配置。后續使用npm添加的各種包的依賴都會添加到該文件中。
{ "name": "reactjssetup", "version": "1.0.0", "description": "blog", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1"，
"globalLocation":"npm config get prefix"
}, "author": "", "license": "ISC" }
package.json文件中有一個scripts屬性，值為json對象，json對象的每個key/value對應我們可以在npm環境下執行的script名和所代表的處理過程。我們可以通過如下npm命令來運行該script:npm run-script {script名}. 我們通常可以通過該途徑來添加一些常用批處理操作。比如上面我們添加了key為globalLocation的script來獲得當前global庫存放的路徑，通過執行npm run-script globalLocation我們可以的到如下結果：
接下來我們可以通過npm install --save react react-dom添加react和react-dom庫到我們的目錄(應用)中.命令執行完后會在目錄下生成node_modules目錄，所有我們添加的本地依賴庫都會被放到這個文件夾下。同時package.json文件會被更行。看一下更新后的package.json文件:
{ "name": "reactjssetup", "version": "1.0.0", "description": "blog", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "globalLocation": "npm config get prefix" }, "author": "", "license": "ISC", "dependencies": { "react": "^15.5.4", "react-dom": "^15.5.4" } }
添加了dependencies屬性，並添加了兩個依賴庫(react,react-dom)的名字和版本信息，版本信息采用semver規則.
到這里，我們通過npm管理了我們應用所依賴的庫。
Babel
現在大部分瀏覽器只支持ES5版本的JS,而ReactJS開發中比較推薦使用ES6版本的JS進行開發，Babel就是將ES6版本的JS代碼轉換為ES5版本的JS代碼的工具庫。我們首先需要通過npm install --save-dev babel來安裝babel庫。這里用到了--save-dev參數，它表示應用只在dev環境下依賴這個庫，在產品環境不會依賴。因為我們只需要在dev環境下轉換我們的代碼的時候需要這個庫，因此他是dev環境依賴。
安裝完babel后，我們還需要對它進行配置。babel的配置是要保存在應用根目錄的.babelrc文件下,該文件默認不會被創建，需要我們手動創建。主要的配置是添加Babel轉換代碼時使用的preset(就是針對各種JS語法到ES5語法的轉換規則庫)。在配置之前，我們首先需要安裝這些preset:babel-preset-react,babel-preset-es2015.然后在將其添加到.babelrc文件中。修改后的.babelrc文件如下：
{ "presets":["babel-preset-react","babel-preset-es2015"] }
Babel就配置好了，我們可以單獨使用babel命令去轉換JS代碼，也可以結合打包工具來在打包過程中先對代碼進行轉換。我使用的是browerify打包工具結合babel來轉換。
Visual Studio Code
在Visual Studio Code中只需打開我們的應用的根目錄，無需創建任何類似於Visual Studio依賴的sln文件即可coding.在coding之前我們需要安裝一些插件來使我們的開發過程變得高效。我主要安裝了如下插件。
然后我們在根目錄下創建如下目錄文件:
-build
-src
--index.js
-index.html
index.html中我們輸入如下內容：
<html> <meta charset="utf-8"> <body> <div id="root"> </div> </body> </html>
--index.js中來用ReactJS定義我們的頁面內容。
import React from "react"; import ReactDOM from "react-dom"; class HelloWorldComponent extends React.Component { constructor(prop){ super(prop); } render() { return ( <div>Hello World</div> ); } } ReactDOM.render(<HelloWorldComponent/>,document.getElementById("root"));
到此，我們完成了一個會顯示Hello World字符串的頁面。但是我們的index.html並沒有引用index.js,也沒有引用任何reactjs的依賴。因此下一步我們需要借助Browerify來將這些文件打包，並建立連接。
Browerify
首先通過npm install --save-dev browserify來安裝browserify到本地項目文件夾中。
然后配置build的腳本到npm 的package.json文件中。配置如下：
"scripts": { "build": "browserify -t babelify src/index.js -o build/bundle.js" },
腳本中我們通過給browserify添加了-t參數用來指定javascript轉換器為babelify(需通過npm install --save-dev babelify安裝到本地項目)。
然后我們可以在控制台運行npm run-script build來執行打包操作。所有依賴的庫以及index.js都會打包到bundle.js中。
引用bundle.js
最后我們需要在index.html中引用bundle.js
<html>
<meta charset="utf-8">
<body>
<div id="root">
</div>
<script type="text/javascript" src="build/bundle.js"></script>
</body>
</html>
瀏覽index.html查看網頁
