React编译运行环境准备

最近公司推全栈式开发，选择React最为前端框架，记录一下编译运行的过程。

React项目目录结构(编译运行与IDE无关，这里只是展现出整个项目的结构)，node_modules为编译生成文件夹

1、编译时需要用到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

2、下载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]# 

3、安装cnpm

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

4、安装roadhog

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

5、roadhog buildDll

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

6、启动运行

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

注：中途有命令执行失败，删除项目文件中node_modules文件夹继续执行2，3，4，5，6命令

运行成功

转载于:https://www.cnblogs.com/gushen-super/p/7920737.html