React編譯運行環境準備

最近公司推全棧式開發，選擇React最爲前端框架，記錄一下編譯運行的過程。

React項目目錄結構(編譯運行與IDE無關，這裏只是展示出整個項目的結構)，node_modules爲編譯生成文件夾

一、編譯時須要用到node環境，故先須要安裝node環境，這裏簡單列出我用源碼安裝node的過程(windows/MacOS系統用exe/pkg安裝文件安裝便可，此處爲CentOS7安裝node步驟)

node下載官方地址：http://nodejs.org/dist/ 選擇所需版本

　　a)、下載node包（提示wget command not found，進行wget安裝：yum -y install wget）

[root@localhost tools]# wget -c https://nodejs.org/dist/v8.7.0/node-v8.7.0.tar.gz

　　b)、解壓node包 (解壓node包並進入node-v*文件夾)

[root@localhost tools]# tar zxvf node-v8.7.0.tar.gz && cd node-v*

　　c)、編譯須要安裝gcc gcc-c++：

[root@localhost tools]#sudo yum install gcc gcc-c++

　　d)、編譯node（make時間較長，耐心等待）

[root@localhost tools]# ./configure

[root@localhost tools]# make

 　　e)、進行安裝

[root@localhost tools]# sudo make install

　　f)、檢驗安裝是否成功

[root@localhost tools]# node --version
v8.7.0

二、下載cnpm，如下步驟進入項目所在目錄進行執行

[root@localhost /]# node --version
v8.7.0
[root@localhost /]# cd /usr/local/project/canal-web-fe/
[root@localhost canal-web-fe]# npm install -g cnpm --registry=https://registry.npm.taobao.org
/usr/local/bin/cnpm -> /usr/local/lib/node_modules/cnpm/bin/cnpm
+ cnpm@5.1.1
added 693 packages in 57.833s
[root@localhost canal-web-fe]# 

三、安裝cnpm

[root@localhost canal-web-fe]# cnpm install

四、安裝roadhog

[root@localhost canal-web-fe]# cnpm install -g roadhog

五、roadhog buildDll

[root@localhost canal-web-fe]# roadhog buildDll

六、啓動運行

[root@localhost canal-web-fe]# npm run dev

注：中途有命令執行失敗，刪除項目文件中node_modules文件夾繼續執行2，3，4，5，6命令

運行成功