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

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

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

node server.js

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

npm init -f

如安裝常用的 Node.js web框架模塊 express依賴，這個類似于php需要什么功能時，就安裝模塊什么一樣的。

npm install express -g  

全局安裝

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

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

npm install express

本地安裝

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

可以通過 require() 來引入本地安裝的包。

安裝模塊到項目node_modules目錄下。

不會將模塊依賴寫入devDependencies或dependencies 節(jié)點。

運行 npm install 初始化項目時不會下載模塊。

安裝模塊到全局，不會在項目node_modules目錄中保存模塊包。

不會將模塊依賴寫入devDependencies或dependencies 節(jié)點。

運行 npm install 初始化項目時不會下載模塊。

安裝模塊到項目node_modules目錄下。

會將模塊依賴寫入dependencies 節(jié)點。

運行 npm install 初始化項目時，會將模塊下載到項目目錄下。

運行npm install --production或者注明NODE_ENV變量值為production時，會自動下載模塊到node_modules目錄中。

安裝模塊到項目node_modules目錄下。

會將模塊依賴寫入devDependencies 節(jié)點。

運行 npm install 初始化項目時，會將模塊下載到項目目錄下。

運行npm install --production或者注明NODE_ENV變量值為production時，不會自動下載模塊到node_modules目錄中。

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

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

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

每個階段都是對應(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可以類比為maven的階段，也可以類比為maven、ant、gradle不同的構(gòu)建工具。

安裝webpack（全局）,注意：webpack 4.X 開始，需要安裝 webpack-cli 依賴 ,所以使用這條命令 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時，發(fā)現(xiàn)配置文件超多的，再結(jié)合vue，那配置就無窮無盡了。從零開始寫配置文件就不靠譜了。所以就出現(xiàn)腳手架scaffolding，這跟maven的archetype很像，因為不只是vue，react也是有腳手架。
安裝vue腳手架（全局）

npm install --global vue-cli

查看版本：

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

新建項目

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

安裝（下載）依賴

npm install

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

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

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

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

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