這篇文章主要介紹了微信小程序中devtool源碼分析的相關(guān)知識，內(nèi)容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇微信小程序中devtool源碼分析文章都會有所收獲，下面我們一起來看看吧。愛掏網(wǎng) - it200.com
看看devtool的源碼有什么
第一步是找到小程序devtool的源碼，以mac系統(tǒng)為例，源碼的打開方式如下圖：
其他的文件不用理會，我們要研究的主要代碼在Content/Resources/app.nw/dist目錄下，這個目錄包括devtool的功能代碼以及對小程序進行執(zhí)行、編譯、打包、上傳等功能的代碼。愛掏網(wǎng) - it200.com當然，這些代碼都是經(jīng)過混淆的，讀起來還挺費勁（攤手~
需要著重注意的是Content/Resources/app.nw/dist/weapp目錄，以及commit和trans兩個子目錄：
從文件的命名上大致可以猜到每個文件對應的功能：
trans目錄下的文件負責將小程序源碼進行一系列的轉(zhuǎn)換，最終被轉(zhuǎn)換為瀏覽器可識別的html、css以及js；
commit目錄下的文件負責執(zhí)行小程序的構(gòu)建、打包、上傳等功能。愛掏網(wǎng) - it200.com
既然我們知道小程序會進行構(gòu)建打包流程，想得知小程序運行機制最好的辦法就是研究構(gòu)建完畢之后的代碼。愛掏網(wǎng) - it200.com有了這個目標之后，下一步就是查看devtool的日志獲取小程序構(gòu)建之后的代碼存放位置。愛掏網(wǎng) - it200.com
找到日志文件
Content/Resources/app.nw/dist/common/log/log.js是負責管理devtool日志功能的文件，其中有這樣一段代碼：
const?a?=?require(&＃39;fs&＃39;), ??b?=?require(&＃39;log&＃39;), ??c?=?require(&＃39;path&＃39;), ??d?=?require(&＃39;../../config/dirConfig.js&＃39;), ??e?=?d.WeappLog;
其中e便是日志文件的存放目錄，然后我們追溯到config/dirConfig.js中發(fā)現(xiàn)目錄路徑是由nw.App.getDataPath()生成的，這個函數(shù)是node-webkit提供的API，生成結(jié)果的規(guī)則在不同的操作系統(tǒng)下有差異，可惜筆者并沒有找到相關(guān)的說明（沮喪）。愛掏網(wǎng) - it200.com
但是此次代碼的探索并非沒有收獲，起碼我們知道了日志文件存放的目錄名為“WeappLog”，我們可以使用強大的命令行從硬盤中搜索此目錄：
mdfind?WeappLog
大家可以參考這篇文章了解
mdfind命令的用法
從輸出結(jié)果可以得知日志文件在Mac系統(tǒng)的存放目錄為/Users//Library/Application Support/微信web開發(fā)者工具/WeappLog。愛掏網(wǎng) - it200.com進入目錄后就會發(fā)現(xiàn)很多以.log為后綴的日志文件：
上傳小程序的流程打包后的小程序在哪里
找到日志文件后便可以從devtool的執(zhí)行日志中獲取小程序被構(gòu)建后的代碼存放位置。愛掏網(wǎng) - it200.com當然，第一步是要講小程序進行構(gòu)建，操作方法是在小程序開發(fā)工具的“項目”菜單”中點擊”預覽“：
成功后再日志文件中會出現(xiàn)這么一行記錄：
[Wed?Jan?18?2024?15:20:24?GMT+0800?(CST)]?INFO?pack.js?create?/Users/ /Library/Application?Support/微信web開發(fā)者工具/Weappdest/1484724024071.wx?success!
/Users//Library/Application Support/微信web開發(fā)者工具/Weappdest/1484724024071.wx就是構(gòu)建完成的小程序代碼！趕緊去看看！
興致勃勃的找到/Users//Library/Application Support/微信web開發(fā)者工具/Weappdest/目錄，然后發(fā)現(xiàn)：空空如也！
看來微信團隊還是很謹慎的，在將小程序源碼上傳之后便會刪除構(gòu)建產(chǎn)出的文件。愛掏網(wǎng) - it200.com但是這點小伎倆難不倒程序員！任何行為都是程序執(zhí)行的，我們直接修改相關(guān)的程序代碼就可以了嘛！
做點小手腳，看看打包后的代碼
在Content/Resources/app.nw/dist/weapp/commit/upload.js中有一段這樣的代碼：
const?a?=?require(&＃39;fs&＃39;),
??j?=?require(&＃39;rmdir&＃39;);
??//省略無關(guān)代碼
?_exports.uploadForTest?=?(l,?m,?n)?=>?{
??//省略無關(guān)代碼
??c(l,?{
???noCompile:?!0
??},?(s,?t)?=>?{
???if?(s)?return?void?n(s.toString());
???let?u?=?d.join(k,?`${+new?Date}.wx`);
???b(t,?u,?(v,?w)?=>?{
????j(t,?(A,?B,?C)?=>?{});
????//省略無關(guān)代碼
????if?(y?>?q)?return?a.unlink(u,?()?=>?{}),?void?n(`代碼包大小為?${y}?kb，超出限制?${y-q}?kb，請刪除文件后重試`);
????//省略無關(guān)代碼
})
上述代碼省略了一些與我們當前討論內(nèi)容無關(guān)的代碼，感興趣的讀者可以自行研究。愛掏網(wǎng) - it200.com
上述代碼有兩個刪除文件的行為：
rmdir：刪除構(gòu)建完成但是并未打包的代碼目錄；
fs.unlink：刪除打包完成的文件。愛掏網(wǎng) - it200.com
將執(zhí)行刪除的代碼注釋以后，再通過小程序開發(fā)者工具進行預覽上傳操作后，在上文中我們得到的目錄中便會留下構(gòu)建以及打包后的文件了。愛掏網(wǎng) - it200.com如下：
其中以.wx為后綴的文件是經(jīng)過打包后的文件，也就是上傳到微信服務器的文件。愛掏網(wǎng) - it200.com其同名的目錄文件夾是構(gòu)建完成且打包之前的源文件。愛掏網(wǎng) - it200.com
以config.js為例，構(gòu)建后的代碼如下：
&＃39;use?strict&＃39;;
Object.defineProperty(exports,?&＃39;__esModule&＃39;,?{
?value:?true
});
exports.default?=?{
?basePath:?&＃39;https://djtest.cn&＃39;,
?fileBasePath:?&＃39;https://djtest.cn&＃39;
};
其實僅僅將ES6的語法轉(zhuǎn)譯成了ES5語法。愛掏網(wǎng) - it200.com其余的wxml、wxss以及js文件基本也是這樣的狀態(tài)，所以可以推斷源碼上傳至微信服務器后會執(zhí)行真正的構(gòu)建動作，開發(fā)工具只執(zhí)行了一些簡單地構(gòu)建行為。愛掏網(wǎng) - it200.com
關(guān)于“微信小程序中devtool源碼分析”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“微信小程序中devtool源碼分析”知識都有一定的了解，大家如果還想學習更多知識，歡迎關(guān)注編程筆記行業(yè)資訊頻道。愛掏網(wǎng) - it200.com