當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

手把手教你撸一个简易的 webpack

發布時間：2023/12/15 编程问答 25 豆豆

生活随笔收集整理的這篇文章主要介紹了手把手教你撸一个简易的 webpack 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

背景

隨著前端復雜度的不斷提升，誕生出很多打包工具，比如最先的grunt，gulp。到后來的webpack和Parcel。但是目前很多腳手架工具，比如vue-cli已經幫我們集成了一些構建工具的使用。有的時候我們可能并不知道其內部的實現原理。其實了解這些工具的工作方式可以幫助我們更好理解和使用這些工具，也方便我們在項目開發中應用。

一些知識點

在我們開始造輪子前，我們需要對一些知識點做一些儲備工作。

模塊化知識

首先是模塊的相關知識，主要的是 es6 modules 和 commonJS模塊化的規范。更詳細的介紹可以參考這里 CommonJS、AMD/CMD、ES6 Modules 以及 webpack 原理淺析。現在我們只需要了解：

es6 modules 是一個編譯時就會確定模塊依賴關系的方式。

CommonJS的模塊規范中，Node 在對 JS 文件進行編譯的過程中，會對文件中的內容進行頭尾包裝，在頭部添加(function (export, require, modules, __filename, __dirname){\n 在尾部添加了\n};。這樣我們在單個JS文件內部可以使用這些參數。

AST 基礎知識

什么是抽象語法樹？

在計算機科學中，抽象語法樹（abstract syntax tree 或者縮寫為 AST），或者語法樹（syntax tree），是源代碼的抽象語法結構的樹狀表現形式，這里特指編程語言的源代碼。樹上的每個節點都表示源代碼中的一種結構。之所以說語法是「抽象」的，是因為這里的語法并不會表示出真實語法中出現的每個細節。

大家可以通過Esprima 這個網站來將代碼轉化成 ast。首先一段代碼轉化成的抽象語法樹是一個對象，該對象會有一個頂級的type屬性Program,第二個屬性是body是一個數組。body數組中存放的每一項都是一個對象，里面包含了所有的對于該語句的描述信息:

type:描述該語句的類型 --變量聲明語句 kind：變量聲明的關鍵字 -- var declaration: 聲明的內容數組，里面的每一項也是一個對象type: 描述該語句的類型 id: 描述變量名稱的對象type：定義name: 是變量的名字init: 初始化變量值得對象type: 類型value: 值 "is tree" 不帶引號row: "\"is tree"\" 帶引號復制代碼

進入正題

webpack 簡易打包

有了上面這些基礎的知識，我們先來看一下一個簡單的webpack打包的過程，首先我們定義3個文件：

// index.js import a from './test'console.log(a)// test.js import b from './message'const a = 'hello' + bexport default a// message.js const b = 'world'export default b 復制代碼

方式很簡單，定義了一個index.js引用test.js；test.js內部引用message.js。看一下打包后的代碼：

看起來很亂？沒關系，我們來屢一下。一眼看過去我們看到的是這樣的形式：

(function(modules) {// ... })({// ... }) 復制代碼

這樣好理解了吧，就是一個自執行函數，傳入了一個modules對象，modules 對象是什么樣的格式呢？上面的代碼已經給了我們答案：

{"./src/index.js": (function (module, __webpack_exports__, __webpack_require__) {// ...}),"./src/message.js": (function (module, __webpack_exports__, __webpack_require__) {// ...}),"./src/test.js": (function (module, __webpack_exports__, __webpack_require__) {// ...}) } 復制代碼

是這樣的一個路徑 --> 函數這樣的 key,value 鍵值對。而函數內部是我們定義的文件轉移成 ES5 之后的代碼：

"use strict"; eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _test__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./test */ \"./src/test.js\");\n\n\nconsole.log(_test__WEBPACK_IMPORTED_MODULE_0__[\"default\"])\n\n\n//# sourceURL=webpack:///./src/index.js?"); 復制代碼

到這里基本上結構是分析完了，接著我們看看他的執行，自執行函數一開始執行的代碼是：

__webpack_require__(__webpack_require__.s = "./src/index.js"); 復制代碼

調用了__webpack_require_函數，并傳入了一個moduleId參數是"./src/index.js"。再看看函數內部的主要實現：

// 定義 module 格式 var module = installedModules[moduleId] = {i: moduleId, // moduleIdl: false, // 是否已經緩存exports: {} // 導出對象，提供掛載};modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 復制代碼

這里調用了我們modules中的函數，并傳入了__webpack_require__函數作為函數內部的調用。module.exports參數作為函數內部的導出。因為index.js里面引用了test.js，所以又會通過__webpack_require__來執行對test.js的加載：

var _test__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./src/test.js"); 復制代碼

test.js內又使用了message.js所以，test.js內部又會執行對message.js的加載。message.js執行完成之后，因為沒有依賴項，所以直接返回了結果：

var b = 'world' __webpack_exports__["default"] = (b) 復制代碼

執行完成之后，再一級一級返回到根文件index.js。最終完成整個文件依賴的處理。整個過程中，我們像是通過一個依賴關系樹的形式，不斷地向數的內部進入，等返回結果，又開始回溯到根。

開發一個簡單的 tinypack

通過上面的這些調研，我們先考慮一下一個基礎的打包編譯工具可以做什么？

轉換ES6語法成ES5

處理模塊加載依賴

生成一個可以在瀏覽器加載執行的 js 文件

第一個問題，轉換語法，其實我們可以通過babel來做。核心步驟也就是：

通過babylon生成AST
通過babel-core將AST重新生成源碼

/*** 獲取文件，解析成ast語法* @param filename // 入口文件* @returns {*}*/ function getAst (filename) {const content = fs.readFileSync(filename, 'utf-8')return babylon.parse(content, {sourceType: 'module',}); }/*** 編譯* @param ast* @returns {*}*/ function getTranslateCode(ast) {const {code} = transformFromAst(ast, null, {presets: ['env']});return code } 復制代碼

接著我們需要處理模塊依賴的關系，那就需要得到一個依賴關系視圖。好在babel-traverse提供了一個可以遍歷AST視圖并做處理的功能，通過 ImportDeclaration 可以得到依賴屬性：

function getDependence (ast) {let dependencies = []traverse(ast, {ImportDeclaration: ({node}) => {dependencies.push(node.source.value);},})return dependencies }/*** 生成完整的文件依賴關系映射* @param fileName* @param entry* @returns {{fileName: *, dependence, code: *}}*/ function parse(fileName, entry) {let filePath = fileName.indexOf('.js') === -1 ? fileName + '.js' : fileNamelet dirName = entry ? '' : path.dirname(config.entry)let absolutePath = path.join(dirName, filePath)const ast = getAst(absolutePath)return {fileName,dependence: getDependence(ast),code: getTranslateCode(ast),}; } 復制代碼

到目前為止，我們也只是得到根文件的依賴關系和編譯后的代碼，比如我們的index.js依賴了test.js但是我們并不知道test.js還需要依賴message.js，他們的源碼也是沒有編譯過。所以此時我們還需要做深度遍歷，得到完成的深度依賴關系：

/*** 獲取深度隊列依賴關系* @param main* @returns {*[]}*/ function getQueue(main) {let queue = [main]for (let asset of queue) {asset.dependence.forEach(function (dep) {let child = parse(dep)queue.push(child)})}return queue } 復制代碼

那么進行到這一步我們已經完成了所有文件的編譯解析。最后一步，就是需要我們按照webpack的思想對源碼進行一些包裝。第一步，先是要生成一個modules對象：

function bundle(queue) {let modules = ''queue.forEach(function (mod) {modules += `'${mod.fileName}': function (require, module, exports) { ${mod.code} },`})// ... } 復制代碼

得到 modules 對象后，接下來便是對整體文件的外部包裝，注冊require，module.exports：

(function(modules) {function require(fileName) {// ...}require('${config.entry}');})({${modules}}) 復制代碼

而函數內部，也只是循環執行每個依賴文件的 JS 代碼而已，完成代碼：

到這里基本上也就介紹完了，我們來打包試一下：

再測試一下：

恩，基本上已經完成一個簡易的 tinypack。

參考文章

抽象語法樹 Abstract syntax tree

一看就懂的JS抽象語法樹

源碼

tinypack 所有的源碼已經上傳 github

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的手把手教你撸一个简易的 webpack的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： linux操作系统中查看进程命令有哪些
下一篇： CentOS7.5下搭建zabbix3.