前端開發環境配置版本
- 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/