摘要：流程源處理源代碼，例如過(guò)濾任何值。工藝類(lèi)從編譯后處理生成的文件，例如對(duì)類(lèi)進(jìn)行字節(jié)碼增強(qiáng)。整合后的測(cè)試執(zhí)行集成測(cè)試后執(zhí)行所需的操作。校驗(yàn)運(yùn)行任何檢查以驗(yàn)證包裝是否有效并符合質(zhì)量標(biāo)準(zhǔn)。

nodejs的語(yǔ)法和es6不一樣，如模塊系統(tǒng)，一個(gè)是CommonJS的require、一個(gè)是es6的import，寫(xiě)模塊也不一樣。

我來(lái)理解，nodejs類(lèi)似與java的jvm，所以執(zhí)行js時(shí)是這樣，假設(shè)文件server.js

node server.js

而npm，類(lèi)似與java的maven，項(xiàng)目構(gòu)建工具，既然是構(gòu)建工具，就需要配置文件，maven的配置文件是pom.xml，則npm的配置文件時(shí)package.json，一個(gè)是xml一個(gè)是json。
npm初始化package.json文件:

npm init -f

如安裝常用的 Node.js web框架模塊 express依賴(lài)，這個(gè)類(lèi)似于php需要什么功能時(shí)，就安裝模塊什么一樣的。

npm install express -g  

全局安裝

將安裝包放在 /usr/local 下或者你 node 的安裝目錄。

可以直接在命令行里使用。

npm install express

本地安裝

將安裝包放在 ./node_modules 下（運(yùn)行 npm 命令時(shí)所在的目錄），如果沒(méi)有 node_modules 目錄，會(huì)在當(dāng)前執(zhí)行 npm 命令的目錄下生成 node_modules 目錄。

可以通過(guò) require() 來(lái)引入本地安裝的包。

安裝模塊到項(xiàng)目node_modules目錄下。

不會(huì)將模塊依賴(lài)寫(xiě)入devDependencies或dependencies 節(jié)點(diǎn)。

運(yùn)行 npm install 初始化項(xiàng)目時(shí)不會(huì)下載模塊。

安裝模塊到全局，不會(huì)在項(xiàng)目node_modules目錄中保存模塊包。

不會(huì)將模塊依賴(lài)寫(xiě)入devDependencies或dependencies 節(jié)點(diǎn)。

運(yùn)行 npm install 初始化項(xiàng)目時(shí)不會(huì)下載模塊。

安裝模塊到項(xiàng)目node_modules目錄下。

會(huì)將模塊依賴(lài)寫(xiě)入dependencies 節(jié)點(diǎn)。

運(yùn)行 npm install 初始化項(xiàng)目時(shí)，會(huì)將模塊下載到項(xiàng)目目錄下。

運(yùn)行npm install --production或者注明NODE_ENV變量值為production時(shí)，會(huì)自動(dòng)下載模塊到node_modules目錄中。

安裝模塊到項(xiàng)目node_modules目錄下。

會(huì)將模塊依賴(lài)寫(xiě)入devDependencies 節(jié)點(diǎn)。

運(yùn)行 npm install 初始化項(xiàng)目時(shí)，會(huì)將模塊下載到項(xiàng)目目錄下。

運(yùn)行npm install --production或者注明NODE_ENV變量值為production時(shí)，不會(huì)自動(dòng)下載模塊到node_modules目錄中。

devDependencies 節(jié)點(diǎn)下的模塊是我們?cè)陂_(kāi)發(fā)時(shí)需要用的，比如項(xiàng)目中使用的 gulp ，壓縮css、js的模塊。這些模塊在我們的項(xiàng)目部署后是不需要的，所以我們可以使用 -save-dev 的形式安裝。像 express 這些模塊是項(xiàng)目運(yùn)行必備的，應(yīng)該安裝在 dependencies 節(jié)點(diǎn)下，所以我們應(yīng)該使用 -save 的形式安裝。

既然npm類(lèi)似maven，那么webpack類(lèi)似什么，雖然很難完全匹配上java的知識(shí)，但也盡量匹配下，方便理解。
首先先回顧，maven是有三類(lèi)生命周期（默認(rèn)（default），清潔（clean）和站點(diǎn)（site）生命周期），我們常用的是默認(rèn)生命周期，這生命周期包含多個(gè)階段(參考)：

驗(yàn)證（validate）    驗(yàn)證項(xiàng)目是正確的，所有必要的信息可用。  
初始化（initialize）    初始化構(gòu)建狀態(tài)，例如設(shè)置屬性或創(chuàng)建目錄。  
產(chǎn)生來(lái)源（generate-sources）    生成包含在編譯中的任何源代碼。  
流程源（process-sources）    處理源代碼，例如過(guò)濾任何值。  
生成資源（generate-resources）    生成包含在包中的資源。  
流程資源（process-resources）    將資源復(fù)制并處理到目標(biāo)目錄中，準(zhǔn)備打包。  
編譯（compile）    編譯項(xiàng)目的源代碼。  
工藝類(lèi)（process-classes）    從編譯后處理生成的文件，例如對(duì)Java類(lèi)進(jìn)行字節(jié)碼增強(qiáng)。  
生成測(cè)試來(lái)源（generate-test-sources）    生成包含在編譯中的任何測(cè)試源代碼。  
流程測(cè)試來(lái)源（process-test-sources）    處理測(cè)試源代碼，例如過(guò)濾任何值。  
生成測(cè)試資源（generate-test-resources）    創(chuàng)建測(cè)試資源。  
流程測(cè)試資源（process-test-resources）    將資源復(fù)制并處理到測(cè)試目標(biāo)目錄中。  
測(cè)試編譯（test-compile）    將測(cè)試源代碼編譯到測(cè)試目標(biāo)目錄中  
流程檢驗(yàn)類(lèi)（process-test-classes）    從測(cè)試編譯中處理生成的文件，例如對(duì)Java類(lèi)進(jìn)行字節(jié)碼增強(qiáng)。對(duì)于Maven 2.0.5及以上版本。  
測(cè)試（test）    使用合適的單元測(cè)試框架運(yùn)行測(cè)試。這些測(cè)試不應(yīng)該要求代碼被打包或部署。  
制備包（prepare-package）    在實(shí)際包裝之前，執(zhí)行必要的準(zhǔn)備包裝的操作。這通常會(huì)導(dǎo)致打包的處理版本的包。（Maven 2.1及以上）  
打包（package）    采取編譯的代碼，并以其可分發(fā)的格式（如JAR）進(jìn)行打包。  
預(yù)集成測(cè)試（pre-integration-test）    在執(zhí)行集成測(cè)試之前執(zhí)行所需的操作。這可能涉及諸如設(shè)置所需環(huán)境等。  
集成測(cè)試（integration-test）    如果需要，可以將該包過(guò)程并部署到可以運(yùn)行集成測(cè)試的環(huán)境中。  
整合后的測(cè)試（post-integration-test）    執(zhí)行集成測(cè)試后執(zhí)行所需的操作。這可能包括清理環(huán)境。  
校驗(yàn)（verify）    運(yùn)行任何檢查以驗(yàn)證包裝是否有效并符合質(zhì)量標(biāo)準(zhǔn)。  
安裝（install）  將軟件包安裝到本地存儲(chǔ)庫(kù)中，以作為本地其他項(xiàng)目的依賴(lài)關(guān)系。  
部署（deploy）    在集成或發(fā)布環(huán)境中完成，將最終軟件包復(fù)制到遠(yuǎn)程存儲(chǔ)庫(kù)，以與其他開(kāi)發(fā)人員和項(xiàng)目共享。

每個(gè)階段都是對(duì)應(yīng)有默認(rèn)插件去執(zhí)行的，其中“package”階段是最經(jīng)常修改的，如：

    maven-assembly-plugin
    
        src/main/assembly/dep.xml
    
    
        
            create-archive
            package
            
                single
            
        
    

記起了maven這些階段，就很好理解webpack、gulp、grunt，它們就是一套構(gòu)建階段的工具，最終呈現(xiàn)出的效果就是打包。既然maven可以自定義階段的插件，那么nodejs，也可以指定不同的構(gòu)建工具。
講到這里，webpack、gulp、grunt可以類(lèi)比為maven的階段，也可以類(lèi)比為maven、ant、gradle不同的構(gòu)建工具。

安裝webpack（全局）,注意：webpack 4.X 開(kāi)始，需要安裝 webpack-cli 依賴(lài) ,所以使用這條命令 npm install webpack webpack-cli -g

  npm install webpack webpack-cli -g

查看webpack版本

gucci@gucci-PC:~$ webpack -v
4.16.5

如vue腳手架vue-cli，詳情參考https://www.npmjs.com/package...
學(xué)習(xí)webpack時(shí)，發(fā)現(xiàn)配置文件超多的，再結(jié)合vue，那配置就無(wú)窮無(wú)盡了。從零開(kāi)始寫(xiě)配置文件就不靠譜了。所以就出現(xiàn)腳手架scaffolding，這跟maven的archetype很像，因?yàn)椴恢皇莢ue，react也是有腳手架。
安裝vue腳手架（全局）

npm install --global vue-cli

查看版本：

gucci@gucci-PC:~$ vue -V
2.9.6

新建項(xiàng)目

gucci@gucci-PC:/mydata/test$ vue init webpack jc-demo-vue-cli

? Project name jc-demo-vue-cli
? Project description A Vue.js project
? Author JevonCode 
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) no

   vue-cli · Generated "jc-demo-vue-cli".

# Project initialization finished!
# ========================

To get started:

  cd jc-demo-vue-cli
  npm install (or if using yarn: yarn)
  npm run lint -- --fix (or for yarn: yarn run lint --fix)
  npm run dev
  
Documentation can be found at https://vuejs-templates.github.io/webpack

安裝（下載）依賴(lài)

npm install

注：如果npm出現(xiàn)異常，就用cnpm

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

會(huì)發(fā)現(xiàn)，人們說(shuō)的js技術(shù)迭代快，學(xué)不過(guò)來(lái)，但從我們后端開(kāi)發(fā)人員來(lái)看，會(huì)發(fā)現(xiàn)其很多思想是來(lái)源于后端思想。如構(gòu)建、模塊化等思想。計(jì)算機(jī)先驅(qū)Alan Jay Perlis曾說(shuō)過(guò)“如果一種語(yǔ)言不能影響你的編程思路，那就不值得學(xué)習(xí)。”

A language that doesn"t affect the way you think about programming is not worth knowing.

雖然前端很多思想源于后端，但其也是有其思想，也影響后端（我說(shuō)的是個(gè)人學(xué)習(xí)，而不是技術(shù)的發(fā)展）。如函數(shù)編程，java的lambda等。js最先給我體會(huì)就是hack精神，利用現(xiàn)有語(yǔ)法完成其語(yǔ)法不支持的部分。學(xué)了ES6，發(fā)現(xiàn)根本就“沒(méi)有規(guī)則”，還想說(shuō)做個(gè)筆記記錄下，最后發(fā)現(xiàn)根本就把整本書(shū)抄了下來(lái)，看來(lái)只能自己記住個(gè)大概，然后實(shí)際使用時(shí)再翻開(kāi)來(lái)仔細(xì)看看。