說(shuō)一下模塊化方案

模塊化是為了解決代碼的復(fù)用和組織問(wèn)題，可以說(shuō)有了模塊化才讓前端有了工程的概念，模塊化要解決兩大問(wèn)題 代碼隔離和依賴管理，從node.js最早發(fā)布的commonjs 到瀏覽器端的 AMD,CMD 規(guī)范以及兼容的 UMD 規(guī)范，再到現(xiàn)在主流的ES Module規(guī)范。

• AMD CMD 都是為了解決瀏覽器端的模塊化問(wèn)題，區(qū)別就是代碼執(zhí)行時(shí)機(jī)不同，CMD是懶執(zhí)行。
• UMD就是兼容CommonJS ，AMD 以及全局變量來(lái)加載模塊。
• ESM是在語(yǔ)言標(biāo)準(zhǔn)的層面上實(shí)現(xiàn)了模塊功能，Node.js也支持（13版本后，.mjs 或者聲明type:module），

CJS和ESM的區(qū)別：

• CommonJS 模塊輸出的是一個(gè)值的拷貝，ES6 模塊輸出的是值的引用。
• CommonJS 模塊是運(yùn)行時(shí)加載，ES6 模塊是編譯時(shí)輸出接口。
• ES6 模塊之中，頂層的this指向undefined；CommonJS 模塊的頂層this指向當(dāng)前模塊的輸出module.exports
• CommonJS 模塊的require()是同步加載模塊，動(dòng)態(tài)import是異步加載，有一個(gè)獨(dú)立的模塊依賴的解析階段。

CJS和ESM的原理可以再研究

ESM生態(tài)在逐漸發(fā)展，隨著 vite等工具的流行，no-bundle概念也在逐漸推廣，CommonJS的歷史包袱還需要一定的時(shí)機(jī)去轉(zhuǎn)化。

介紹一下vite 相比webpack的優(yōu)缺點(diǎn)

• vite把自己定義為工具鏈，很多可以開(kāi)箱即用，配置簡(jiǎn)單，生態(tài)也再不斷完善，ESM，bundle-less也是大勢(shì)所趨。
• 基于ESM和ESBuild 的Dev Server，冷啟動(dòng)速度快，按需編譯
• webpack 兼容性好，生態(tài)完善

說(shuō)一下Rollup

rollup是一款打包構(gòu)建工具，通常用來(lái)構(gòu)建一些庫(kù)，比如Vue等都是用rollup構(gòu)建的。是基于ESM的打包器，支持tree-shaking，scope hoisting等特性。

可以輸出多種模塊規(guī)范的代碼，也有豐富的插件。Rollup 插件基本就是各種 Hook 函數(shù)的組合。

AST和Babel

• 抽象語(yǔ)法樹(shù)：對(duì)代碼的一種抽象表示，是樹(shù)形結(jié)構(gòu)。
• 應(yīng)用：代碼高亮，JS轉(zhuǎn)義，代碼壓縮，ESLint，Prettier等
• babel 編譯 ES5 的過(guò)程：parse（解析代碼生成AST）、transform（通過(guò) traverse 遍歷 AST 進(jìn)行處理轉(zhuǎn)換）、generator (生成代碼)

包管理工具

• pnpm
  • 解決問(wèn)題：幽靈依賴和分身依賴（相同依賴不同版本）
  • 硬鏈接： 保證相同的包不會(huì)被重新新增，磁盤的目錄下，相當(dāng)于備份
  • 軟連接：node_modules 里的軟鏈接到對(duì)應(yīng)的.pnpm下的依賴，解決幽靈依賴問(wèn)題