node.js的子產品化與包

一.子產品化

1.為何要子產品化

一個js檔案引入其他的js檔案後,可以使用引入檔案中的變量,資料等,node.js支援子產品化.

在es6之前,js是沒有子產品化的功能的,js代碼依靠html檔案統一管理,這樣做的問題很明顯,變量污染

并且代碼無法維護.

2.子產品化的曆史

2.1 es6前

為了支援子產品化,程式員借用第三方庫實作子產品化

• sea.js
• require.js

2.2 es6後

• es6原生文法也支援子產品化（浏覽器不是直接支援子產品化 --- 需要單獨設定）
• Nodejs内部也支援子產品化

3.子產品化規範

概念：拆分子產品群組合子產品時，所遵守的規則，就叫做子產品化規範。

例如：在 Node.js 中，導入其它子產品時，統一使用 require() 函數。

 常見的子產品化規範

• CommonJS 規範：nodejs中遵守的就是commonjs規範。
• ES6 子產品化規範：（前後端通用的子產品化規範；Node.js、Vue、React 中都能使用！）
• CMD 和 AMD 子產品化規範（較少使用）: CMD--sea.js, AMD-require.js
• UMD 叫做通用子產品定義規範（Universal Module Definition），它可以通過運作時或者編譯時讓同一個代碼子產品在使用 CommonJs、CMD 甚至是 AMD 的項目中運作。它沒有自己專有的規範，是集結了 CommonJs、CMD、AMD 的規範于一身。

4.使用commonJS規範來自定義子產品

4.1使用場景

• 代碼需要在項目重用
• 代碼需要提供給他人使用
• 代碼雖然不需要重用，但封裝成子產品有利于優化代碼結構，友善後期維護與擴充

4.2 commonJS規範

1. 導入其他子產品使用require()方法
2. 每個.js檔案都是一個獨立的子產品,子產品内的成員都是私有的
3. 在每個JS子產品中,可以使用module.exports向外共享成員

自定義子產品特點:

使用require('自定義子產品的路徑')即可導入自定義子產品

自定義子產品内的變量,函數都是私有的,預設無法被外界通路.

5.注意點

5.1不要使用特殊的檔案名

5.2導入子產品的路徑是相對路徑

5.3自定義子產品需要導出才能被其他檔案使用

• module.exports是固定寫法,一般放在檔案最後,隻需使用一次
• 需要用什麼就導出什麼,無需全部導出

 6.導入子產品的兩種方式

//定義變量
let a = 123
let b = 456

//導出.兩種方式

//方法一(有效)
module.exports = {
a,
b
}

//方法二(有效)
exports.a = a
exports.b = b

//方法三(無效)
export = {
a,
b
}
           

為什麼方法三無效呢?

初始exports和module.exports是指向同一塊記憶體區域，其内容都是一個空對象

exports 是module.exports的别名

exports === module.exports
           

方法一二相當于修改對象内的值,沒有重新定義

方法三的含義為給exports重新指派一個對象,此時export與module.exports不再指向同一個對象,但引入子產品會預設以子產品代碼中的module.exports指向的内容為準,是以相當于導出了一個空對象.

是以在實際開發中,導出子產品時,建議直接使用module.exports

7.require的加載機制

有些情況發現别人的代碼中require(檔案名),檔案名有時不帶字尾名,其實這個與require 的加載機制有關,那麼require 的機制有哪些呢?

1. require

   優先加載緩存中的子產品。同一個子產品第一次require之後，就會緩存一份，下一次require時就直接從緩存中去取。
2. 如果是加載核心子產品，直接從記憶體中加載，并緩存,加載核心子產品的格式是

   const xxx = require("子產品名")

   。不能寫相對路徑！
3. 如果是相對路徑，則根據路徑加載自定義子產品，并緩存                                                                以

   require('./main')

   為例（ 省略擴充名的情況）                                                                    先加載

   main.js

   ，如果沒有再加載

   main.json

   ，如果沒有再加載

   main.node

   (c/c++編寫的子產品)，找不到就報錯。
4. 第三方子產品的機制放到後面  

二.npm和包和子產品

1.npm

• npm(Node Package Manager),解決Node中第三方包共享的問題
• npm不需單獨安裝,在安裝Node時,已經捆綁安裝了
• npm -v指令檢查安裝情況

 可以在npm中下載下傳所有的庫(例如:jQuery,bootStrap等)

2.包與子產品的關系

npm網站上去下載下傳我們的需要的代碼時，它們是以"包"這種結構放在npm網站上的.

• nodejs中一個子產品就是一個單獨的js檔案
• 包是多個子產品的集合。一個子產品的功能比較單一，是以一個包一般會包含多個子產品。
• npm 管理的機關是包。

3.下載下傳與使用

1. 初始化項目 npm init 指令 如果之前已經初始化，則可以省略。
2. 安裝 npm install 包名 
3. 引入子產品,使用

注意點:

初始化:建立的檔案夾不能有中文

如果你希望直接采用預設資訊，可以使用:

npm init --yes
// --與yes之間沒有空格， -- 與init之間有空格
// 或者是 npm init -y
           

init指令用來在根目錄下生成一個package.json檔案，這個檔案中記錄了我們目前項目的基本資訊，它是一切工作的開始。

package.json檔案是由npm init指令建立出來的，它的整體内容是一個json字元串，用來對目前項目進行整體描述。其中最外層可以看作是一個js的對象（每一個屬性名都加了""，這就是一個典型的json标記）。

• name： 表示這個項目的名字。如是它是一個第三方包的話，它就決定了我們在require()時應該要寫什麼内容。
• version：版本号
• keywords：關鍵字
• author: 作者
• descrption: 描述

安裝包:

npm install 包名
npm i 包名
           

使用:當我們已經下載下傳好一個包之後，就可以像使用核心子產品一樣去使用它。

// 從npm下載下傳 别人寫的好代碼，在本地引入，并使用
const dayjs = require('包名')
console.log(包名);
console.log( 包名().format('YYYY-MM-DD') );
           

使用鏡像可以使下包更快

設定代碼

# 設定鏡像為taobao。
npm config set registry https://registry.npm.taobao.org
# 設定鏡像為npm官方
npm config set registry https://registry.npmjs.org
# 檢視配置
npm config get registry 
           

4.全局包與項目包

全局安裝的包一般可提供直接執行的指令。我們通過對一些工具類的包采用這種方式安裝，如：

gulp, nodemon, live-server, nrm等。

本地安裝的包是與具體的項目有關的， 我們需要在開發過程中使用這些具體的功能。

• 全局安裝: 包被安裝到了系統目錄（一般在系統盤的node_modules中）。
  • 指令：

    npm install -g 包名

    或者

    npm install 包名 -g

  • 輔助指令：

    • npm root -g           // 檢視全局包的安裝目錄
      npm list -g --depth 0 // 檢視全局安裝過的包      

• 項目安裝（或者叫本地安裝)，包安裝在目前項目的根目錄下（與package.json同級）的node_modules中。
  • 指令：

    npm install 包名

5.全局安裝nrm包 

nrm包可以用來調整npm鏡像,使用nrm之後,就可以簡化切換鏡像源的指令.

安裝步驟:

// 第一步： 全局安裝 
npm install nrm -g

// 第二步：列出所有的源資訊
// （*）标注的就是目前使用的源
nrm ls

// 第三步：根據需要切換源 
// 例如：指定使用taobao鏡像源
nrm use taotao

// 接下來，正常安裝你需要的包
           

一般情況需要修改才可以使用,點選這裡,檢視修改方式

6.開發依賴包與生産依賴包

6.1開發依賴包

項目在開發時會使用它,而項目一旦上線,就不再需要。此類一般歸為"開發依賴"。

//儲存到開發依賴(devDependencies)
npm install 包名 --save-dev
// 或者 npm install 包名 -D
//通過這種方式安裝的包出會現在package.json檔案中的`devDependencies`字段中。
           

6.2生産依賴包

例如一個項目使用的包,參與了開發編寫代碼,線上環境運作也必須有它參與,此類一般歸類為"生産依賴"。

//儲存到生産依賴(dependencies)
npm install 包名
// 或者 npm install 包名
// 或者 npm install 包名 -S
           

如何判斷包的形式?看npm文檔

7.i5ting_toc 包

7.1作用

用于将markdown檔案轉化為帶樣式的html字元串，i5ting_toc是node環境下的實作工具，用于直接将markdown檔案轉化為網頁，在浏覽器打開 。

7.2安裝方式:全局安裝

npm install -g i5ting_toc
           

7.3使用步驟

首先:編輯一個markdown檔案,并命名,例如name.md

 在md檔案所在根目錄下打開終端鍵入如下指令:

i5ting_toc -f name.md -o
//-f file 檔案名
//-o 是否在浏覽器中打開檔案
           

7.4其他指令

-h, --help             output usage information //顯示用法資訊
-V, --version          output the version number //顯示版本
-f, --file [filename]  default is README.md //檔案名,如果不填,預設檔案名為README.md
-o, --open             open in browser //在浏覽器打開
-v, --verbose          列印詳細日志
           

8.nodemon包

 8.1作用

nodemon用于在開發中監視更改,并重新運作代碼,比如nodemon監視中的檔案發生了改動後,它就會響應,然後重新開機node運作代碼

8.2安裝方式:全局安裝或本地安裝

全局安裝:

npm install -g nodemon
           

本地安裝:

npm install nodemon --save-dev//--save-dev作用:将依賴包資訊自動更新,無需再手動更改
           

8.3使用方式

首先建立一個index.js

在檔案中寫入如下代碼 

 使用node打開,輸出1

 此時如果修改代碼,我們還需再次輸入node指令來運作代碼

十分的麻煩...頭秃的同時,還心煩意亂.

我們使用如下方式在終端下運作代碼(vscode終端不知道為何找不到服務),彈出如下資訊

vscode終端報錯

cmd下可使用

 此時再次修改index.js

 每次修改,nodemon均會重新運作一次代碼,這樣我們就可以安心專注于功能開發,而不用浪費我們寶貴的時間在一次又一次的重新開機代碼啦

最後,如果我不愛nodemon了,不想用它了怎麼關閉呢?簡單快捷方式ctrl+c 終止程序 +Y 輕松搞定

 8.4其他指令

nodemon -h //help 擷取幫助
nodemon --exec // 運作一些非js檔案時會使用到
nodemon --ignore // 忽略某些檔案或目錄 寫在這個後面的檔案或目錄更新後,nodemon将不跟随運作
nodemon --watch // 允許監視更多的檔案，寫在這個後面的檔案更新,則nodemon也會跟随運作
           

(未完待續...)