React前端开发环境搭建

拼搏现实的明天。 2022-12-22 04:35 175阅读 0赞

# React前端开发环境搭建 #

首先，我们需要明确的是React和很多前端框架一样，底层都还是js以及html，即便它有着看似特殊的jsx语法。

我们要在服务端运行js，就需要依赖一个环境，和运行war包需要tomcat一类中间件一样，运行js需要node.js，

同时因为我们用了各种框架，所以相应的module依赖也需要，需要使用npm工具，这就类似于maven管理jar包依赖一样

同样maven可以修改镜像，而npm也可以改成淘宝的cnpm以及相应module库地址。

let´s begin

### 1、安装Node.js、npm、cnpm ###

当我们在[官网][Link 1]下载并安装Node时，npm也自动安装好了，一路next后即可。安装好后键入node -v 以及npm -v 来测试是否安装成功（不需要自己手动配置系统环境变量）

![ba83fab7c6f79dabc819883fefd3d36d.png][]

### 2、修改全局依赖包下载路径（该步骤可不配置） ###

查看依赖包默认下载配置：npm config ls

默认情况下，我们在执行`npm install -g XXXX`下载全局包时，这个包的默认存放路径位`C:\Users\用户名\AppData\Roaming\npm\node_modules下`，可以通过`CMD`指令`npm root -g`查看

C:\Users\liaijie\AppData\Roaming\npm\node_modules

但是有时候我们不想让全局包放在这里，我们可以自定义存放目录,在`CMD`窗口执行以下两条命令修改默认路径：

npm config set prefix "C:\node\node_global"

npm config set cache "C:\node\node_cache"

或者打开`c:\node\node_modules\npm\.npmrc`文件，修改如下：

`prefix =C:\node\node_global`  
`cache = C:\node\node_cache`

以上操作表示，修改全局包下载目录为`C:\node\node_global`,缓存目录为`C:\node\node_cache`,并会自动创建`node_global`目录，而`node_cache`目录是缓存目录，会在你下载全局包时自动创建

![50919fa6abba738d70235deea7a164f3.webp][]

因为国内使用npm很慢，我们可以使用淘宝的cnpm，同时设置镜像地址： npm install -g cnpm --registry=https://registry.npm.taobao.org

![faf5eef63f10829f90304a194ea7566d.png][]

安装成功后，可以键入cnpm -v检查是否安装成功

![bfe234ff0af21c57ed7ce82b0ae8cbb1.png][]

如果安装完cnpm淘宝镜像后出现 如下提示

'cnpm' 不是内部或外部命令，也不是可运行的程序 或批处理文文件

问题所在cnpm文件夹与npm文件夹不在同一文件夹下  
cnpm所在文件夹：C:\\Program Files\\nodejs\\node\_global\\node\_modules  
npm所在文件：C:\\Program Files\\nodejs\\node\_modules

将cnpm文件夹移动至npm所在的文件夹下，再将cnpm和cnpm.cmd文件移至npm与npm.cmd所在的文件夹即可解决问题  
![cnpm文件与npm文件夹在同一文件夹下][cnpm_npm]  
![cnpm.cmd和cnpm文件与npm.cmd及npm文件在同一文件夹下][cnpm.cmd_cnpm_npm.cmd_npm]

### 3、创建我们的第一个react程序 ###

例如我们要在D:\\workSpace下创建first-react-demo这个工程，并跑通，我们依次执行如下步骤

window下进入D:\\workSpace这个文件夹，在地址栏键入cmd enter，

![d9f990d3af112c18303485afe02cb1bd.png][]

cnpm install -g create-react-app   全局安装创建react-app的module（这一步不一定要在workspace目录下）

![f42dceda209a9bc8233ac0a3900bf4d8.png][]

create-react-app first-react-demo  在workspct这个文件夹下创建fist-react-demo这个项目

![54a417fe353cec9d4c05e5589bc2da6c.png][]

有可能报错：'create-react-app' 不是内部或外部命令，也不是可运行的程序 或批处理文件。

在安装node.js的时候指定了node\_global的地址。将指定的node\_global地址写到环境变量的path中即可。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDM3NDc4_size_16_color_FFFFFF_t_70][]

但是，有可能会报错 Unexpected end of JSON input while parsing near '....0","dependencies":\{"' ，假如报错，需要执行npm cache clean --force

![3b95645af0e8a36c9216ef54ec1e2487.png][]

在创建成功的基础上，我们在打开first-react-demo这个文件夹，地址栏键入cmd并enter，在打开的cmd窗口中，键入npm start

![becae9c6fc34e32cf558e340fbef7856.png][]

大功告成。浏览器键入localhost:3000即可访问

![e468d1feeca34a6a721aba4b42eadce0.png][]

###  命令记录 ###

npm uninstall -g create-react-app  删除全局create-react-app

npx create-react-app myapp  创建myapp  项目

npm -v 查看npm版本

node -v 查看node版本

npm config ls  查看npm配置明细  
npm root -g  查看node的node\_modules包路径  
npm install -g cnpm --registry=https://registry.npm.taobao.org  设置为淘宝镜像路径  
cnpm -v   检查淘宝镜像是否安装成功  
npm install  打包

npm start  启动项目

[Link 1]: https://nodejs.org/en/
[ba83fab7c6f79dabc819883fefd3d36d.png]: /images/20221120/403b8142af1c40f395945536b4840b33.png
[50919fa6abba738d70235deea7a164f3.webp]: /images/20221120/bed99fb552034660a57a14948fa32496.png
[faf5eef63f10829f90304a194ea7566d.png]: /images/20221120/7b7d50bbb0664a8eb8915bacde13ede5.png
[bfe234ff0af21c57ed7ce82b0ae8cbb1.png]: /images/20221120/0fe4782905914f758023960ea6cd904a.png
[cnpm_npm]: /images/20221120/19ad7b22b5654deb9dd1f2acb5383dd6.png
[cnpm.cmd_cnpm_npm.cmd_npm]: /images/20221120/3e64cc93be6b4e619ee8836bdb474385.png
[d9f990d3af112c18303485afe02cb1bd.png]: /images/20221120/1635dc6524da4521890e8b6d31dd67ae.png
[f42dceda209a9bc8233ac0a3900bf4d8.png]: /images/20221120/e9a3fca1b8ed47259a50955c392bf0b5.png
[54a417fe353cec9d4c05e5589bc2da6c.png]: /images/20221120/fefc3107db0c46429b44f7c983a988ac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDM3NDc4_size_16_color_FFFFFF_t_70]: /images/20221120/585029f8b83e4430882228b578c2cb1b.png
[3b95645af0e8a36c9216ef54ec1e2487.png]: /images/20221120/1736a31eb28a4b49ae737a0351af2d28.png
[becae9c6fc34e32cf558e340fbef7856.png]: /images/20221120/35bd3b3bfa854e9fbe83987459083bfb.png
[e468d1feeca34a6a721aba4b42eadce0.png]: /images/20221120/ad4dd3422f044ad1b22a3ede616157e0.png