本文首發自「慕課網」，想了解更多IT干貨內容，程序員圈內熱聞，歡迎關注！

作者| 慕課網精英講師 三水清

【資料圖】

本文將包括安裝 Node、NPM、WebPack 開發環境，我使用的開發 IDE 是 VScode。因為 Webpack 實際是用 Node.js 寫的，所以首先來介紹下 Node.js 的安裝。

安裝 Node.js

首先進入 Node.js 的官網，選擇對應系統的下載包進行下載安裝，對于 windows 用戶，直接下載安裝包安裝即可，如果是 Macos 用戶，推薦使用 brew 進行安裝。接下來分別介紹下 Node.js 的版本管理和包管理工具。

Node.js 版本管理

Node.js 版本眾多，包括穩定版和開發版，可能不同的項目需要的 Node.js 版本不同，這里我推薦大家安裝 8.9 以上版本，對于已經安裝了 Node.js 的朋友，可以使用 nvm（windows 版本）對 Node.js 進行進行版本管理，（另外阿里有個 tnvm ，也是管理 Node.js 版本的，增加了 alinode 版本系列的 Node.js）。

Node.js 包管理工具

Node.js 之所以這么流行，離不開龐大的社區建設，這里第一功勞就是 NPM 團隊的貢獻，使用 Node.js 寫的代碼，可以打包發布到 JavaScript 包管理平臺 npmjs.com（這個存放包的地方一般也被稱為倉庫）上，當我們項目需要使用某個包（模塊）時，可以直接使用包管理工具來安裝（下載）對應的包，我們也可以免費注冊一個賬號，發布自己的公共包和私有包供其他人使用。

NPM 是圍繞著語義版本控制（semver）思想而設計的，我們在軟件版本中碰見的：rc、1.x.x、alpha、beta等名詞都可以在 semver.org 得到解釋介紹，簡單來說規范是主版本號.次版本號.修訂號（MAJOR.MINOR.PATCH）：

1.主版本號：當你做了不兼容的 API 修改；2.次版本號：當你做了向下兼容的功能性新增；3.修訂號：當你做了向下兼容的問題修正；

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

{    "name": "demo",    "version": "1.0.0",    "dependencies": {        "webpack": "^4.29.6"    }}

除了version符合 semver 規范以外，再來看下其他兩項：

name：上面的代碼就是表明了這個項目為demo，這樣如果我們將來發布到 npmjs.com 會以這個來命名，除了這種方式的名稱，還有一種命名的方式是@scope/name的方式，是作用域包，例如我們用來轉化 ES6 語法的@babel/core就是@babel的作用域，詳細介紹可以查看 package.json 的文檔dependencies：是demo這個項目的依賴，就是 demo 這個包內離開webpack這個包就不能使用了，對應的還有devdependencies，開發以來，一般需要二次開發 demo 的時候需要安裝的包，實際項目中，webpack是構建工具，代碼不會直接用 webpack 的 API，而只在開發和打包的時候采用，所以正確做法是放在devdependencies中。

注意到dependencies中webpack的后面版本號前面加了^，意思是主版本是4的最新版本，每次執行安裝命令的時候，會更新符合這個規則的最新包，可以在npm semver range 部分看到更詳細的介紹。

NPM 的常用命令

下面介紹下 NPM 的常用命令：安裝、刪除、初始化、配置。

安裝和刪除

安裝某個 NPM 包，使用命令npm install packageName，簡寫npm i packageName，如果執行命令的目錄下有package.json則可以直接用npm install安裝package.json中的所有依賴。如果我們要安裝某個版本的包，則可以使用命令npm i packageName@x.x.x格式。

如果我們安裝依賴包并且將這個依賴寫入package.json則可以使用命令npm i packageName --save（簡寫npm i packageName -S），如果希望寫到package.json開發依賴中（devdependencies）則使用命令npm i packageName --save-dev（簡寫npm i packageName -D）

刪除某個 NPM 包，則使用npm uninstall 包名。

本地模式和全局模式

npm 的包安裝，分為本地模式和全局模式，默認是本地模式，即在執行npm install命令的當前目錄創建node_modules，然后下載安裝包及其依賴到node_modules目錄。全局模式是指安裝到全局路徑的方式。在 Node.js 的 require 依賴之時，會優先查找自己當前文件的node_modules，如果沒有，則循環遍歷上層的node_modules，如果便歷到根目錄還找不到，則會使用全局模式安裝的模塊，另外全局模式安裝的包可以指定全局命令，只需要在package.json增加bin字段并且指向包內對應的文件即可。全局安裝一個包，使用命令npm install --global，--global可以簡寫為-g。

初始化一個 NPM 項目

npm init 用來初始化生成一個新的 package.json 文件。輸入npm init并且根據對應的提示回答問題，會向用戶提問一系列問題，如果你覺得不用修改默認配置，一路回車就可以了。如果使用了-f（代表force）、-y（代表yes），則跳過提問階段，直接生成一個新的package.json文件。

設置 NPM 鏡像

由于 NPM 網站經常不穩定，所以國內有很多鏡像可以使用，淘寶 NPM 鏡像是國內最大的一家 NPM 鏡像網站，還有cnpm包可以替換官方 NPM 來使用，使用cnpm直接使用淘寶鏡像安裝 NPM 包。

單次使用鏡像方法：

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

設置默認 npm 使用淘寶鏡像方法：

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

使用下面的命令可以安裝 cnpm 包，之后直接像使用 npm 一樣使用 cnpm 即可，不需要添加register

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

NPM 其他常用命令

npm set：設置環境變量，例如：npm set init-author-name "Your name"，初始化的時候會使用默認環境變量；npm info：查看某個包的信息，例如：npm info lodash；npm search：查找 npm 倉庫，后面可以跟字符串或者正則表達式，例如：npm search webpack；npm list：樹形的展現當前項目安裝的所有模塊，以及對應的依賴，例如：npm list --global查看全局安裝的模塊。

NPM Scripts

NPM 不僅可以用于模塊管理，還可以用于執行腳本。package.json文件中可以添加scripts字段，用于指定腳本命令，供 NPM 直接調用。例如：

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

在package.json添加上面字段之后，可以直接使用npm run build和npm run start命令了，實際上：

npm run build：相當于執行了當前項目中目錄下的webpack命令；npm run start：相當于執行了node src/scripts/dev.js。

另外npm run start還可以簡寫成npm start。

Tips：除了 npm 外，還有一些包管理工具，主要是針對 npm 的下載速度慢、node_modules混亂等缺點設計的，例如yarn和 pnpm。

安裝 Webpack-cli

Webpack-cli是 Webpack 的 CLI （Command-line interface）工具，如果在項目中，我們可以使用下面的方式安裝：

npm install webpack-cli --save-dev

如果想全局使用webpack的命令，可以使用npm install -g webpack-cli安裝。

Tips：這里建議在項目中安裝 webpack-cli 并且使用--save-dev的配置將 webpack-cli 放到開發依賴中。

到此，我們就準備好 Webpack 的命令行開發環境了，下面小節開始介紹 webpack-cli 的零配置打包。

小結

本文主要介紹了 Webpack 的開發環境搭建，從 Node.js 安裝、NPM 的使用最基礎開始講解，指導學生手把手的上手 Node.js 開發環境。并且介紹了 NPM 相關的命令使用和 NPM Scripts 概念，NPM Scripts 在用 NPM 搭建項目開發命令時被廣泛應用，接下來我們開始體驗 Webpack-cli 的零配置打包吧！

歡迎關注「慕課網」，發現更多IT圈優質內容，分享干貨知識，幫助你成為更好的程序員！