前端开发环境配置-Windows

前端开发环境配置版本

• Node >= 10.16.0
• webpack >= 4.42.0
• yarn >= 1.19.1

npm 包管理工具

1、工具 nvm，下载地址

https://github.com/coreybutler/nvm-windows/releases

• 下载 nvm-setup.zip 解压；
• 点击 nvm-setup.exe 完成安装，安装目录自选。

2、nvm 命令

• 查看可安装使用的 node 版本

nvm list available

• 安装 node

// nvm install [node版本] 64-bit[windows位数]

PS user> nvm install 10.16.0 64-bit

• 切换/使用对应版本 node

PS user> nvm use 10.16.0

• 查看已装 node 版本列表

PS user> nvm list

• 卸载指定版本 node

PS user> nvm uninstall 10.16.0

3、配置 nvm 环境变量

用户变量

NVM_HOME: [nvm文件夹所在目录]\nvm
NVM_SYMLINK: [nvm文件夹所在目录]
Path: %NVM_HOME%;%NVM_SYMLINK%

系统变量

NVM_HOME: [nvm文件夹所在目录]\nvm
NVM_SYMLINK: [nvm文件夹所在目录]
Path: %NVM_HOME%;%NVM_SYMLINK%

4、修改下载源
梯子替换：npm config set registry http://registry.npm.taobao.org/
原始路径：npm config set registry https://registry.npmjs.org/

PS user> npm config set registry http://registry.npm.taobao.org/

改变npm 默认的缓存、安装路径

• 自定义路径

PS user> npm config set prefix "xx\Node\node_data\node_global"
PS user> npm config set cache "xx\Node\node_data\node_cache"

• 执行完命令后进行验证，输出你的自定义路径即为成功

PS user> npm config get prefix
PS user> npm config get cache

验证完毕，我们还需要告诉程序，我们的自定义路径

• 配置 系统变量 ，添加 NODE_PATH

  xx\Node\node_data\node_global\node_modules

• 配置用户变量 PATH， 添加如下：

  xx\Node\node_data\node_global

开发依赖插件安装

webpack、webpack-cli 模块化打包工具，亦或构建工具。

PS user> npm install -g webpack webpack-cli

验证

PS user> webpack -v

node-sass .scss 文件支持，编译生成 .css 文件

PS user> npm install -g node-sass

错误：

Can't find Python executable "python", you can set the PYTHON env variable.

执行一下命令：

npm uninstall node-sass -g
npm rebuild node-sass -g
npm i node-sass -g --sass_binary_site=https://npm.taobao.org/mirrors/node-sass

验证

PS user> node-sass -v

yarn 包管理工具

PS user> npm i yarn -g

验证

PS user> yarn -v

• yarn 镜像下载源切换成 taobao镜像

PS user> yarn config set registry http://registry.npm.taobao.org/