2018年第33周-javeer對nodejs體會

nodejs和es6

nodejs的語法和es6不同，如模塊系統，一個是CommonJS的require、一個是es6的import，寫模塊也不同。

nodejs的npm

我來理解，nodejs相似與java的jvm，因此執行js時是這樣，假設文件server.js

node server.js

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

npm init -f

npm安裝依賴

全局依賴

如安裝經常使用的 Node.js web框架模塊 express依賴，這個相似於php須要什麼功能時，就安裝模塊什麼同樣的。

npm install express -g

全局安裝

1. 將安裝包放在 /usr/local 下或者你 node 的安裝目錄。
2. 能夠直接在命令行裏使用。

本地依賴

npm install express

本地安裝

1. 將安裝包放在 ./node_modules 下（運行 npm 命令時所在的目錄），若是沒有 node_modules 目錄，會在當前執行 npm 命令的目錄下生成 node_modules 目錄。
2. 能夠經過 require() 來引入本地安裝的包。

依賴又有如下區分：

npm install moduleName 命令

1. 安裝模塊到項目node_modules目錄下。
2. 不會將模塊依賴寫入devDependencies或dependencies 節點。
3. 運行 npm install 初始化項目時不會下載模塊。

npm install -g moduleName 命令

1. 安裝模塊到全局，不會在項目node_modules目錄中保存模塊包。
2. 不會將模塊依賴寫入devDependencies或dependencies 節點。
3. 運行 npm install 初始化項目時不會下載模塊。

npm install -save moduleName 命令

1. 安裝模塊到項目node_modules目錄下。
2. 會將模塊依賴寫入dependencies 節點。
3. 運行 npm install 初始化項目時，會將模塊下載到項目目錄下。
4. 運行npm install --production或者註明NODE_ENV變量值爲production時，會自動下載模塊到node_modules目錄中。

npm install -save-dev moduleName 命令

1. 安裝模塊到項目node_modules目錄下。
2. 會將模塊依賴寫入devDependencies 節點。
3. 運行 npm install 初始化項目時，會將模塊下載到項目目錄下。
4. 運行npm install --production或者註明NODE_ENV變量值爲production時，不會自動下載模塊到node_modules目錄中。

總結

devDependencies 節點下的模塊是咱們在開發時須要用的，好比項目中使用的 gulp ，壓縮css、js的模塊。這些模塊在咱們的項目部署後是不須要的，因此咱們可使用 -save-dev 的形式安裝。像 express 這些模塊是項目運行必備的，應該安裝在 dependencies 節點下，因此咱們應該使用 -save 的形式安裝。

webpack

既然npm相似maven，那麼webpack相似什麼，雖然很難徹底匹配上java的知識，但也儘可能匹配下，方便理解。
首先先回顧，maven是有三類生命週期（默認（default），清潔（clean）和站點（site）生命週期），咱們經常使用的是默認生命週期，這生命週期包含多個階段(參考)：

驗證（validate） 驗證項目是正確的，全部必要的信息可用。
初始化（initialize） 初始化構建狀態，例如設置屬性或建立目錄。
產生來源（generate-sources） 生成包含在編譯中的任何源代碼。
流程源（process-sources） 處理源代碼，例如過濾任何值。
生成資源（generate-resources） 生成包含在包中的資源。
流程資源（process-resources） 將資源複製並處理到目標目錄中，準備打包。
編譯（compile） 編譯項目的源代碼。
工藝類（process-classes） 從編譯後處理生成的文件，例如對Java類進行字節碼加強。
生成測試來源（generate-test-sources） 生成包含在編譯中的任何測試源代碼。
流程測試來源（process-test-sources） 處理測試源代碼，例如過濾任何值。
生成測試資源（generate-test-resources） 建立測試資源。
流程測試資源（process-test-resources） 將資源複製並處理到測試目標目錄中。
測試編譯（test-compile） 將測試源代碼編譯到測試目標目錄中
流程檢驗類（process-test-classes） 從測試編譯中處理生成的文件，例如對Java類進行字節碼加強。對於Maven 2.0.5及以上版本。
測試（test） 使用合適的單元測試框架運行測試。這些測試不該該要求代碼被打包或部署。
製備包（prepare-package） 在實際包裝以前，執行必要的準備包裝的操做。這一般會致使打包的處理版本的包。（Maven 2.1及以上）
打包（package） 採起編譯的代碼，並以其可分發的格式（如JAR）進行打包。
預集成測試（pre-integration-test） 在執行集成測試以前執行所需的操做。這可能涉及諸如設置所需環境等。
集成測試（integration-test） 若是須要，能夠將該包過程並部署到能夠運行集成測試的環境中。
整合後的測試（post-integration-test） 執行集成測試後執行所需的操做。這可能包括清理環境。
校驗（verify） 運行任何檢查以驗證包裝是否有效並符合質量標準。
安裝（install） 將軟件包安裝到本地存儲庫中，以做爲本地其餘項目的依賴關係。
部署（deploy） 在集成或發佈環境中完成，將最終軟件包複製到遠程存儲庫，以與其餘開發人員和項目共享。

每一個階段都是對應有默認插件去執行的，其中「package」階段是最常常修改的，如：

<!-- 修改打包的形式-->
<plugin>
    <artifactId>maven-assembly-plugin</artifactId>
    <configuration>
        <descriptor>src/main/assembly/dep.xml</descriptor>
    </configuration>
    <executions>
        <execution>
            <id>create-archive</id>
            <phase>package</phase>
            <goals>
                <goal>single</goal>
            </goals>
        </execution>
    </executions>
</plugin>

記起了maven這些階段，就很好理解webpack、gulp、grunt，它們就是一套構建階段的工具，最終呈現出的效果就是打包。既然maven能夠自定義階段的插件，那麼nodejs，也能夠指定不一樣的構建工具。
講到這裏，webpack、gulp、grunt能夠類比爲maven的階段，也能夠類比爲maven、ant、gradle不一樣的構建工具。

安裝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

腳手架（scaffolding）

如vue腳手架vue-cli，詳情參考https://www.npmjs.com/package...
學習webpack時，發現配置文件超多的，再結合vue，那配置就無窮無盡了。從零開始寫配置文件就不靠譜了。因此就出現腳手架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 <jevoncode@gmail.com>
? 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出現異常，就用cnpm

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

總結

會發現，人們說的js技術迭代快，學不過來，但從咱們後端開發人員來看，會發現其不少思想是來源於後端思想。如構建、模塊化等思想。計算機先驅Alan Jay Perlis曾說過「若是一種語言不能影響你的編程思路，那就不值得學習。」

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

雖然前端不少思想源於後端，但其也是有其思想，也影響後端（我說的是我的學習，而不是技術的發展）。如函數編程，java的lambda等。js最早給我體會就是hack精神，利用現有語法完成其語法不支持的部分。學了ES6，發現根本就「沒有規則」，還想說作個筆記記錄下，最後發現根本就把整本書抄了下來，看來只能本身記住個大概，而後實際使用時再翻開來仔細看看。