最近公司推全栈式开发,选择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命令
运行成功