esm和commonjs（esm和commonjs區別）

本文目錄一覽：

• 1、JS模塊化規範
• 2、webpack作者評價vite
• 3、前端面試計劃（二）ES6「v2-附加代碼」
• 4、簡述什麼是commonjs，以及其與nodejs的關係
• 5、typescript4.7 作為正式的版本進行發布

JS模塊化規範

我們在開發及接觸新技術的時候，總會接觸到該技術以何種規範編寫，為了更加系統了解這些規範，本文總結了AMD，CMD，CommonJs，UMD，ESM幾種規範，供大家學習了解。

AMD 是 RequireJS 在推⼴過程中對 模塊定義的規範化 產出，它是⼀個概念，RequireJS是對這個概念的實現，就好⽐JavaScript語⾔是對ECMAScript規範的實現。AMD是⼀個組織，RequireJS是在這個組織下⾃定義的⼀套腳本語⾔

RequireJS：是⼀個AMD框架，可以非同步載入JS⽂件，按照模塊載入⽅法，通過define()函數定義。第⼀個參數是⼀個數組，⾥⾯定義⼀些需要依賴的包，第⼆個參數是⼀個回調函數，通過變數來引⽤模塊⾥⾯的⽅法，最後通過return來輸出（）。

是⼀個 依賴前置 、 非同步定義 的AMD框架（在參數⾥⾯引⼊js⽂件），在定義的同時如果需要⽤到別的模塊，在最前⾯定義好即在參數數組⾥⾯進⾏引⼊，在回調⾥⾯載入

AMD 定義了一套 JavaScript 模塊依賴非同步載入標準，來解決同步載入的問題。模塊通過 define 函數定義在閉包中，格式如下：

define(id?: String, dependencies?: String[], factory: Function|Object);

一些栗子：

注意：在 webpack 中，模塊名只有局部作用域，在 Require.js 中模塊名是全局作用域，可以在全局引用。

定義一個沒有 id 值的匿名模塊，通常作為應用的啟動函數：

依賴多個模塊的定義：

模塊輸出：

在模塊定義內部引用依賴：

SeaJS 在推⼴過程中對模塊定義的規範化產出，是⼀個同步模塊定義，是SeaJS的⼀個標準，SeaJS是CMD概念的⼀個實現，SeaJS是淘寶團隊提供的⼀個模塊開發的js框架.

通過define()定義， 沒有依賴前置 ，通過require載入模塊，CMD是 依賴就近 ，在什麼地⽅使⽤到模塊就在什麼地⽅require該模塊，即⽤即返，這是⼀個 同步 的概念

在前端瀏覽器⾥⾯並不⽀持module.exports，CommonJS 是以在瀏覽器環境之外構建 JavaScript 生態系統為目標而產生的項目，比如在伺服器和桌面環境中。

Nodejs端是使⽤CommonJS規範的，前端瀏覽器⼀般使⽤AMD、CMD、ES6等定義模塊化開發的。輸出⽅式有2種：默認輸出module export 和帶有名字的輸出exports.area

CommonJS 規範是為了解決 JavaScript 的作用域問題而定義的模塊形式，可以使每個模塊它自身的命名空間中執行。該規範的主要內容是，模塊必須通過 module.exports 導出對外的變數或介面，通過 require() 來導入其他模塊的輸出到當前模塊作用域中。

兼容AMD和commonJS規範的同時，還兼容全局引⽤的⽅式

webpack作者評價vite

評價：Vite 是 vue 的作者尤雨溪在開發 vue3.0 的時候開發的一個 基於原生ES-Module的前端構建工具。其本人在後來對 vue3 的宣傳中對自己的新作品 Vite 讚不絕口，並表示自己 」再也回不去 webpack 了「 。

webpack缺點是緩慢的伺服器啟動

當冷啟動開發伺服器時，基於打包器的方式是在提供服務前去急切地抓取和構建你的整個應用。

vite改進

Vite 通過在一開始將應用中的模塊區分為依賴和源碼兩類，改進了開發伺服器啟動時間。

依賴大多為純JavaScript並在開發時不會變動。一些較大的依賴（例如有上百個模塊的組件庫）處理的代價也很高。依賴也通常會以某些方式（例如 ESM 或者 CommonJS）被拆分到大量小模塊中。

Vite 將會使用 esbuild 預構建依賴。Esbuild 使用 Go 編寫，並且比以 JavaScript 編寫的打包器預構建依賴快10-100倍。

源碼通常包含一些並非直接是 JavaScript 的文件，需要轉換（例如 JSX，CSS 或者 Vue/Svelte 組件），時常會被編輯。同時，並不是所有的源碼都需要同時被載入。（例如基於路由拆分的代碼模塊）。

Vite以原生ESM方式服務源碼。這實際上是讓瀏覽器接管了打包程序的部分工作：Vite 只需要在瀏覽器請求源碼時進行轉換並按需提供源碼。根據情景動態導入的代碼，即只在當前屏幕上實際使用時才會被處理。

webpack: 分析依賴= 編譯打包= 交給本地伺服器進行渲染。首先分析各個模塊之間的依賴，然後進行打包，在啟動webpack-dev-server，請求伺服器時，直接顯示打包結果。

webpack打包之後存在的問題：隨著模塊的增多，會造成打出的 bundle 體積過大，進而會造成熱更新速度明顯拖慢。

vite: 啟動伺服器= 請求模塊時按需動態編譯顯示。是先啟動開發伺服器，請求某個模塊時再對該模塊進行實時編譯，因為現代遊覽器本身支持ES-Module，所以會自動向依賴的Module發出請求。

所以vite就將開發環境下的模塊文件作為瀏覽器的執行文件，而不是像webpack進行打包後交給本地伺服器。

分析了webpack和vite的打包方式後，也就明白了為什麼vite比webpack打包快，因為它在啟動的時候不需要打包，所以不用分析模塊與模塊之間的依賴關係，不用進行編譯。這種方式就類似於我們在使用某個UI框架的時候，可以對其進行按需載入。

熱更新方面，效率更高。當改動了某個模塊的時候，也只用讓瀏覽器重新請求該模塊，不需要像webpack那樣將模塊以及模塊依賴的模塊全部編譯一次。

前端面試計劃（二）ES6「v2-附加代碼」

## 01. 你能說說ES6有哪些內容嗎？

– let、const- 模板字元串- 解構賦值- 擴展運算符- 字元串的擴展方法(includes, startsWith, endsWith, padStart, padEnd, repeat, replaceAll, trimStart, trimEnd…)- 數組的擴展方法(includes, isArray, from, fill, find, findIndex…)- 箭頭函數- 函數的rest參數，函數參數的默認值- Symbol- Reflect- Proxy- Promise- Generator- Map- WeakMap- Set- WeakSet- class- import export- …

### Symbol

– Symbol 除了表示獨一無二的值- 還具有元編程的能力，比如我們手寫 Promise 的時候，如果不定義 Symbol.toStringTag 為 Symbol，那麼通過 Object.prototype.toString.call 得到的結果就是 [object Object]- 還可以用於判斷某對象是否為某構造器的實例 Symbol.hasInstance，很多人手寫 instanceof 的時候都是通過 __proto__ 的方式，這在 ES5 是沒問題的，然而在 ES6 是通過 Symbol.hasInstance

### Reflect

Reflect 將對象的操作集中起來，可以通過 Reflect. 的方式來使用，比如：- Reflect.ownKeys 可以獲取對象的普通屬性和Symbol類型的屬性，如果不使用 Reflect.ownKeys() ，就要使用 Object.keys() 和 Object.getOwnPropertySymbols 將獲取到的普通類型的屬性和 Symbol 類型的屬性拼接起來- Reflect.has 可以判斷一個對象是否存在某個屬性，如果不用 Reflect.has 就要使用 key in object

## 02. 箭頭函數和普通函數有什麼區別呢？

1. 箭頭函數沒有自己獨立的作用域，即它的 this 指向它定義時的作用域2. 箭頭函數沒有 prototype 屬性3. 箭頭函數沒有 arguments 和 caller4. 箭頭函數不能作為構造函數

## 03. Map 和 WeakMap (Set 和 WeakSet) 的區別？

– WeakMap 的 key 只能是對象- WeakMap 沒有 size 屬性，沒有 clear 方法，不支持遍歷- WeakMap 是弱引用

## 04. 各種模塊化規範的細節

– CommonJs

CommonJS 主要是 Node.js 使用，通過 require `同步載入`模塊，exports 導出內容。在 CommonJS 規範下，每一個 JS 文件都是獨立的模塊，每個模塊都有獨立的作用域，模塊里的本地變數都是私有的

– AMD(Asynchronous Module Definition)

AMD，即非同步模塊定義。AMD定義了一套JavaScript模塊依賴非同步載入標準，用來解決瀏覽器端模塊載入的問題。AMD主要是瀏覽器端使用，通過 define 定義模塊和依賴，require 非同步載入模塊，推崇依賴前置

– CMD(Common Module Definition)

CMD，即通用模塊定義。CMD定義了一套JavaScript模塊依賴非同步載入標準，用來解決瀏覽器端模塊架子啊的問題。CMD主要是瀏覽器端使用，通過 define 定義模塊和依賴，require 非同步載入模塊，推崇依賴就近

– UMD(Universal Module Definition)

UMD，即通用模塊定義。UMD主要為了解決 CommonJS 和 AMD 規範下的代碼不通用的問題，同時還支持將模塊掛載到全局，是跨平台的解決方案

– ESM(ECMAScript Module)

ESM，即ESModule。官方模塊化規範，現代瀏覽器支持，通過 import 載入模塊，export 導出內容

簡述什麼是commonjs，以及其與nodejs的關係

自從CommonJS和NodeJS兩個項目的出現，JavaScript作為本地編程語言的這種特殊應用形式，才開始進入進入大眾的視野。

說明什麼是CommonJS。 另外隨著並行計算的普及，像JavaScript這種函數式語言，由於其固有的易於進行並行計算的特性，將有更廣闊的應用前景。

typescript4.7 作為正式的版本進行發布

TypeScript 4.7 於 5 月 24 日作為生產版本正式發布。最新版本的 Microsoft 強類型 JavaScript TypeScript 4.7 提供了對 Node.js 16 的 ECMAScript 模塊 (ESM) 支持以及大量編碼增強功能。

ESM 對 Node.js 16 的支持是該版本的後期添加。 4 月 8 日推出的 TypeScript 4.7 測試版包括對 Node.js 12 的 ESM 支持，該支持已在去年年底計劃用於 TypeScript 4.5，但被推遲了。 但是，由於不再支持 Node.js 12，TypeScript 的構建者在 Node.js 16 上啟動了 stable 目標。這不僅提供了更新的 ECMAScript 模塊功能，例如模式預告片，而且還默認 TypeScript 為支持頂級的更高目標 等待。

在 TypeScript 4.5 時間範圍內推出了對 Node.js 中 ECMAScript 模塊的僅夜間支持。 這些模塊可以通過打包重用代碼。 實現這種支持很困難，因為 Node.js 構建在不同的模塊系統 CommonJS 之上。 TypeScript 4.7 通過兩個模塊設置添加了這個功能，node16 和 nodeext。 尋求有關此功能的反饋，可以在 GitHub 上提供。

TypeScript 4.7 可以通過 NuGet 或 NPM 下載：

npm install -D typescript

TypeScript 4.7 中的其他功能包括：

1、當索引鍵是文字類型和唯一符號時，括弧元素訪問的控制流分析現在縮小了元素訪問的類型

2、為了控制模塊檢測，TypeScript 4.7 引入了選項 moduleDetection。

3、支持 moduleSuffixes 選項來自定義模塊說明符的查找。

4、TypeScript 現在可以從具有對象和數組的函數執行更精細的推理。這允許這些函數的類型始終以從左到右的方式流動，就像普通參數一樣。

5、函數和構造函數可以直接輸入類型參數。

6、開發人員可以明確指定類型參數的差異。

7、組織導入以組感知方式執行。

8、為對象文字方法提供了片段完成。

10、只讀元組現在將其長度屬性視為只讀。這是一個突破性的變化。

11、預覽編輯器命令用於轉到源定義。

在另一個重大變化中，當在 JSX 中編寫 …spread 時，TypeScript 現在強制執行更嚴格的檢查，以確保給定類型實際上是一個對象。因此，類型為 unknown 和 never 的值，更罕見的是 null 和 undefined，不再可以傳播到 JSX 元素中。