實現(xiàn)小型打包工具

YFan 發(fā)布于2019-08-23 17:51 / 3053人閱讀

摘要：函數(shù)在返回值對象時，多一個標(biāo)識符自增數(shù)字給每個文件添加對象用來保存自己所依賴的文件對象，方便使用時找到函數(shù)。構(gòu)建字符串時，是和做。用到方法來進(jìn)行相對路徑和的轉(zhuǎn)換。方法多了處理文件的能力代碼見參考資料

思路圖解

思路：

A方法

找出入口文件所有的依賴關(guān)系

讀取并編譯入口文件代碼

依據(jù)入口文件代碼廣度遍歷所有依賴文件（包括子級）

對外輸出依賴關(guān)系

通過構(gòu)建CommonJS代碼來獲取exports導(dǎo)出的內(nèi)容

構(gòu)建modules對象字符串（key為文件id, 值為[對應(yīng)的函數(shù), mapping]）

構(gòu)建result函數(shù)字符串，并傳入modules參數(shù)，函數(shù)中構(gòu)建require函數(shù)，用于獲取并執(zhí)行對應(yīng)文件

執(zhí)行require(entry), 即執(zhí)行對應(yīng)的文件

有哪些功能點(diǎn)

讀取并編譯文件代碼

獲取所有依賴文件

實現(xiàn)打包功能（構(gòu)建出CommonJS的寫法）

缺點(diǎn)：

是用relativePath做文件模塊的唯一標(biāo)識，容易沖突

B方法

與A方法大體思路一致。

區(qū)別

createCode函數(shù) -》createAsset函數(shù)。 createAsset函數(shù)在返回值對象時，多一個標(biāo)識符id(自增數(shù)字)

getDependencies -》 createGraph, 給每個文件item添加mapping對象用來保存自己所依賴的文件path:id對象，方便使用時找到id

bundle函數(shù)。構(gòu)建modules字符串時，是 id和[function, mapping]做key, value。構(gòu)建result字符串時，require函數(shù)，接收的是filepath對應(yīng)的id. 有l(wèi)ocalRequire函數(shù)

綜上所述：

主要區(qū)別是此方法使用自增的id作為文件模塊的唯一標(biāo)識（不會重復(fù)）而不是文件相對路徑（容易重復(fù)），
但是這也導(dǎo)致代碼有更大復(fù)雜性，比如模塊自身需記錄mapping（來記住依賴文件相對路徑和其id的對應(yīng)關(guān)系）。用到localRequire方法來進(jìn)行相對路徑和id的轉(zhuǎn)換。

A方法多了處理css文件的能力

代碼：

見github https://github.com/sunchengua...

參考資料

https://juejin.im/book/5bdc71...

https://zhuanlan.zhihu.com/p/...

云服務(wù)器 GPU云服務(wù)器打包工具 python打包工具 java開發(fā)打包工具 java手動打包工具

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/104260.html

相關(guān)文章

DevOps 基于Walle的小型持續(xù)集成實戰(zhàn)（一）概述

摘要：該文章用于概述一個小型持續(xù)集成環(huán)境的搭建的方案什么是持續(xù)集成持續(xù)集成作為當(dāng)今軟件開發(fā)實踐，可以簡單理解為團(tuán)隊開發(fā)相對頻繁的集成他們的工作，一般讓每個成員每天至少集成一次，而這回造成每天會有多次的版本發(fā)布。該文章用于概述一個小型持續(xù)集成環(huán)境的搭建的方案什么是持續(xù)集成？持續(xù)集成作為當(dāng)今軟件開發(fā)實踐，可以簡單理解為團(tuán)隊開發(fā)相對頻繁的集成他們的工作，一般讓每個成員每天至少集成一次，而這回...

Yangyang 2019-06-28 17:22 評論0 收藏0
使用 Vue2.js + Node.js 搭建一個小型的全棧項目

摘要：大概過來一個多月，我決定兩路開工。使用給前端寫接口，配備后臺管理功能，先把后臺搭建好。大概幾天過后，后臺一些簡單的功能實現(xiàn)后，就開始用開始搭建前臺，也一直在想做點(diǎn)什么比較好，于是就做了個豆瓣評分類似的項目。寫在前面由于最近公司業(yè)務(wù)不是很忙，空閑時間比較多，于是就在糾結(jié)Vue.js（之前就學(xué)習(xí)過）和Node.js先專研哪個比較好，最終選擇了先玩玩Node.js。經(jīng)過一段時間的學(xué)習(xí)，就...

freewolf 2019-08-21 16:20 評論0 收藏0
DevOps 基于Walle的小型持續(xù)集成實戰(zhàn)（三）Docker與Gitlab

摘要：自動化測試和持續(xù)集成發(fā)布。在服務(wù)型環(huán)境中部署和調(diào)整數(shù)據(jù)庫或其他的后臺應(yīng)用。容器與鏡像的關(guān)系類似于面向?qū)ο缶幊讨械膶ο笈c類。容器容器是獨(dú)立運(yùn)行的一個或一組應(yīng)用。提供了龐大的鏡像集合供使用。還在按照mysql安裝教程一步一步配置服務(wù)配置賬戶嗎？還在為每開一個新環(huán)境重新配置這些服務(wù)感到苦惱嗎？使用Docker，服務(wù)快速構(gòu)建部署。解決你的研發(fā)時間，早點(diǎn)下班～現(xiàn)代技術(shù)，還不會docker你就落...

since1986 2019-06-28 17:21 評論0 收藏0
cxfreeze打包python，飛一般的感覺

摘要：總所周知，因庫多，語法優(yōu)雅，深受開發(fā)者的喜愛。于我來說，寫一些小型程序，在不需要考慮太多問題的時候，無疑是我的第一選擇。當(dāng)一切都配置好后，使用打包相應(yīng)腳本有兩種方法。總所周知，python因庫多，語法優(yōu)雅，深受開發(fā)者的喜愛。于我來說，寫一些小型程序，在不需要考慮太多問題的時候，python無疑是我的第一選擇。而有的時候，雖然是小型程序，但我還是需要他們通用，即使不考慮使他跨平臺...

hellowoody 2019-07-24 18:18 評論0 收藏0
微前端 —— 理論篇

摘要：現(xiàn)在開始從頭搭建我們的微前端架構(gòu)。項目源碼微前端項目微前端微前端項目 1. 微前端 ????????基于spa類的單頁應(yīng)用，隨著企業(yè)工程項目的體積越來越大，開發(fā)的功能越來越多，頁面也越來越多，項目隨之也變得越來越臃腫，維護(hù)起來十分困難，往往改一個logo，或者改一個小樣式，都要將項目全部重新打包一遍，維護(hù)困難，部署也困難。 ????????因此前端在借鑒后端的微服務(wù)架構(gòu)模式后，衍生了...

wangbinke 2019-08-26 10:32 評論0 收藏0