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

一、NodeJS安裝

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

二、相關模塊安裝

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

1、babel

　　npm install babel -g --save-dev

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

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

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

2、webpack

　　npm install webpack -g --save-dev

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

3、webpack-dev-server

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

　　webpack-dev-server主要作用是創建服務器。

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

三、創建項目根文件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

 四、添加相關的插件

1、React相關的插件

①npm install react --save

react的核心模塊。

②npm install react-dom --save

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

2、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>

本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出, 原文鏈接 如有問題， 可郵件（[e-mail]）咨詢.