1、React初體驗之NodeJS環境搭建

1、NodeJS安裝

　　我博客中有相關文章，此處再也不贅述。

2、相關模塊安裝

　　在使用React的時候須要安裝一些相關模塊：

一、babel

　　npm install babel -g --save-dev

　　（其中，--save-dev表示將babel模塊放入當前項目的package.json文件的devDependencies下，表示當前開發環境的依賴模塊。

　　　　--save表示將babel模塊放入當前項目的package.json文件的Dependencies下，表示當前運行環境的依賴模塊。）

　　babel主要做用是將代碼中相關ES6語法轉換成目前大多數瀏覽器接受的ES5。

二、webpack

　　npm install webpack -g --save-dev

　　webpack主要做用是將當前項目資源進行打包，生成一個JS文件，用於前端頁面引入加載。

三、webpack-dev-server

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

　　webpack-dev-server主要做用是建立服務器。

具體要了解模塊安裝相關方法請移步： http://javascript.ruanyifeng.com/nodejs/npm.html#toc8

3、建立項目根文件package.json

　　這個文件主要對當前項目的各類信息進行統計，如項目名稱、版本、依賴、開發環境依賴等等。

　　建立這個文件用npm init，以後根據提示填寫相關內容便可。（若是不想填，能夠用npm init --yes或npm init --y），以後在package.json中繼續添加修改。

{
  "name": "AppTest",　　//項目名稱
  "version": "1.0.0",　　//項目當前版本
  "main": "main.js",　　//加載模塊時的入口文件，全部的模塊最終都匯聚在這兒
  "dependencies": {　　//項目運行時的依賴模塊

  },
  "devDependencies": {　　//項目開發時依賴的模塊

　},
  "scripts": {　　//編寫執行npm run <命令> ，如運行npm [run] start至關於執行了webpack-dev-server --hot
　　　"start": "webpack-dev-server --hot" 
　},
　"keywords": [],
　"author": "", 
　"license": "ISC",
　"description": "" ,
}

package.json文件中各項的含義詳情，請移步：http://javascript.ruanyifeng.com/nodejs/packagejson.html

 4、添加相關的插件

一、React相關的插件

①npm install react --save

react的核心模塊。

②npm install react-dom --save

react中用於將建立的virtual組件渲染到dom上。

二、Babel相關插件

npm install babel-core 

npm install babel-loader

npm install babel-preset-react

npm install babel-preset-es2015

這些模塊主要處理ES6兼容性的問題。

欲知後事如何，請點下一篇文章。

做者： GeoChen

出處： http://www.cnblogs.com/GeoChen>

本文版權歸做者和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出, 原文連接 若有問題， 可郵件（giser_xiaochen@163.com）諮詢.