VSCode前端开发环境搭建

参考官网https://nodejs.org/zh-cn/download/releases/，下载对应的node.js版本和npm版本

https://nodejs.org/zh-cn/download/releases/该地址可以查看node.js和对应的npm版本

下载完成之后，执行node -v查看node版本，执行npm -v查看npm版本

我本机安装node.js的地址为：C:\Program Files\nodejs

配置npm的全局模块的存放路径以及cache的路径，例如两个文件夹放在nodejs的主目录下，便在nodejs下建立"node_global"及"node_cache"两个文件夹，输入以下命令改变npm配置

npm config set prefix "C:\Program Files\nodejs\node_global"
npm config set cache "C:\Program Files\nodejs\node_cache"

在系统环境变量添加系统变量NODE_PATH，输入路径C:\Program Files\nodejs\node_global\node_modules，此后所安装的模块（全局安装）都会安装到改路径下  

还需要进行配置，在path(用户的环境变量)下增加C:\Program Files\nodejs\node_global和C:\Program Files\nodejs\node_global\node_modules，否则会出现react-native命令找不到的情况

在命令行输入以下命令试着安装express（注：“-g”这个参数意思是装到node_global目录下，也就是上面说设置的“C:\Program Files\nodejs\node_global”里面。）

npm install express -g

安装完毕后可以看到C:\Program Files\nodejs\node_global\node_modules\express 已经有内容

在命令行输入node进入编辑模式，输入以下代码测试是否能正常加载模块：

假设成功，可以看到有输出。假设出错，检查NODE_PATH的路径。

执行命令：npm config ls

查看npm配置

如下是正常的

如果metrics-registry的地址是metrics-registry = "http://r.cnpmjs.org/"，那么执行命令：npm config set registry https://registry.npmjs.org/ 设置metrics-registry

 安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

由于国内网络环境限制问题，使用 npm 安装包时，会遇到时间长，甚至安装失败的问题，建议使用淘宝镜像，具体方法参见官网 https://npm.taobao.org/输入cnpm -v输入是否正常

可使用官方推荐的 cnpm 命令行工具代替默认的 npm:

npm install -g cnpm --registry=https://registry.npm.taobao.org

执行完该命令之后，就可以打开VSCode，打开终端，在项目目录执行cnpm install下载项目对应的依赖包

如果执行cnpm install下载依赖包出现问题，可以下载yarn，命令：npm install -g yarn

然后使用yarn工具下载依赖包，yarn install

下载完所有依赖包之后，可以执行cnpm run start开始编译运行项目

注意：有时使用 cnpm 安装的路径可能回存在问题，在使用react-native开发应用时会出现问题。此时可以使用nrm切换淘宝源：

npx nrm use taobao

// 以下方式切换回官方源
npx nrm use npm

我安装的nodejs是10.15.0，npm版本6.4.1

如果执行cnpm install出现有一个库无法下载的情况，可执行npm install -g npm@5.6.0，对npm版本进行降级，然后再执行cnpm install可成功

然后再执行npm install -g npm@6.4.1切回原版本

再执行cnpm run start可以开始编译项目，如果出现UnhandledPromiseRejectionWarning: Error: Cannot find module '@babel/core'，查看项目的package.json的配置，dependencies的babel版本，我这里是7.1.5

执行命令npm i babel-loader@7.1.5 -D 可解决该问题