1.開發(fā)環(huán)境

• NodeJS
• NPM
• Webpack

2.NodeJS

2.0 安裝NodeJS

• Windows：可以直接在官網(wǎng)下載安裝包
• MacOS：可以使用brew（the missing package manager）

2.1 NodeJS版本管理

NodeJS有穩(wěn)定版和開發(fā)版，不同的項目，需要的NodeJS版本可能也不同，可以使用版本管理工具來切換所需版本。

• Windows：nvm-windows、tnvm
• MacOS：模塊n

2.2 NodeJS包管理工具

JS包管理平臺npmjs.com，我們可以直接使用包管理工具來安裝和下載對應的包；我們也可以免費注冊一個賬號，發(fā)布自己的公共包和私有包供其他人使用。

NPM是圍繞語義版本控制（semver）思想而設計的。

版本格式：主版本號.次版本號.修訂號，版本號遞增規(guī)則如下：
主版本號：當你做了不兼容的 API 修改，
次版本號：當你做了向下兼容的功能性新增，
修訂號：當你做了向下兼容的問題修正。

NPM使用package.json的文件作為一個NPM包的描述文件，package.json包含了包的基本信息（名稱、版本號、描述、作者等）和依賴關系。

3.NPM的常用命令

3.1 安裝和刪除

// 安裝至 dependencies
$ npm install packageName
$ npm install packageName@x.x.x
// 安裝至 dependencies 簡寫
$ npm i packageName
$ npm i packageName@x.x.x
// 安裝至devdependencies
$ npm install packageName --save-dev
// 安裝至 devdependencies 簡寫
$ npm i packageName -D
// 刪除NPM包
$ npm uninstall packageName

3.2 本地模式和全局模式

• NPM包安裝分本地模式和全局模式。
  • 本地模式安裝npm install ...。
  • 全局模式安裝npm install --global ...，可以簡寫為-g。
• NodeJS在查找依賴的時候，會優(yōu)先查找當前文件的node_modules（本地模式安裝的包），如果沒有，則循環(huán)遍歷上層的node_modules，如果遍歷到根目錄還不到，則會使用全局模式安裝的模塊。

3.3 初始化一個NPM項目

$ npm init

以上初始化語句會生成一個新的package.json文件。

3.4 設置NPM鏡像

3.4.1 單次鏡像

$ npm [命令] --registry=https://registry.npm.taobao.org

3.4.2 默認使用淘寶鏡像

$ npm config set registry https://registry.npm.taobao.org

3.5 NPM其他常用命令

• npm set：設置環(huán)境變量。npm set init-author-name 'Your name'，初始化的時候會使用默認環(huán)境變量。
• npm info：查看某個包的信息。npm info lodash。
• npm search：查找NPM倉庫。npm search webpack。
• npm list：樹形展現(xiàn)當前項目安裝的所有模塊，以及對應的依賴。

3.6 NPM Scripts

NPM不僅可以用于模塊管理，還可以用于執(zhí)行腳本。
在scripts中添加字段，用于指定腳本命令，供NPM直接調用。

// package.json
{
  "scripts": {
    "build": "webpack",
    "serve": "node src/scripts/dev.js"
  }
}

接下去可以使用以下命令

• npm run build
• npm run serve

4.Webpack-cli

• webpack-cli github
• webpack官網(wǎng) getting-started

4.1 項目內安裝（推薦）

$ npm install webpack-cli --save-dev

4.2 全局安裝

$ npm install -g webpack-cli