一.模塊化
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規范
- 匯入其他模塊使用require()方法
- 每個.js檔案都是一個獨立的模塊,模塊內的成員都是私有的
- 在每個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 的機制有哪些呢?
-
require優先加載快取中的模塊，同一個模塊第一次require之后，就會快取一份，下一次require時就直接從快取中去取， -
如果是加載核心模塊，直接從記憶體中加載，并快取,加載核心模塊的格式是
const xxx = require("模塊名")，不能寫相對路徑！ -
如果是相對路徑，則根據路徑加載自定義模塊，并快取 以
require('./main')為例（ 省略擴展名的情況） 先加載main.js，如果沒有再加載main.json，如果沒有再加載main.node(c/c++撰寫的模塊)，找不到就報錯， -
第三方模塊的機制放到后面
二.npm和包和模塊
1.npm
- npm(Node Package Manager),解決Node中第三方包共享的問題
- npm不需單獨安裝,在安裝Node時,已經捆綁安裝了
- npm -v命令檢查安裝情況
可以在npm中下載所有的庫(例如:jQuery,bootStrap等)
2.包與模塊的關系
npm網站上去下載我們的需要的代碼時，它們是以"包"這種結構放在npm網站上的.
-
nodejs中一個模塊就是一個單獨的js檔案
-
包是多個模塊的集合，一個模塊的功能比較單一，所以一個包一般會包含多個模塊，
-
npm 管理的單位是包，
3.下載與使用
- 初始化專案 npm init 命令 如果之前已經初始化，則可以省略，
- 安裝 npm install 包名
- 引入模塊,使用
注意點:
初始化:創建的檔案夾不能有中文
如果你希望直接采用默認資訊，可以使用:
npm init --yes
// --與yes之間沒有空格， -- 與init之間有空格
// 或者是 npm init -yinit命令用來在根目錄下生成一個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_toc7.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也會跟隨運行(未完待續...)
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/299995.html
標籤：其他