微信小程序 devtool隐藏的秘密(2)

看来微信团队还是很谨慎的,在将小程序源码上传之后便会删除构建产出的文件。但是这点小伎俩难不倒程序员!任何行为都是程序执行的,我们直接修改相关的程序代码就可以了嘛!

做点小手脚,看看打包后的代码

在Content/Resources/app.nw/dist/weapp/commit/upload.js中有一段这样的代码:

const a = require('fs'), j = require('rmdir'); //省略无关代码 _exports.uploadForTest = (l, m, 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) => {}); //省略无关代码 if (y > q) return a.unlink(u, () => {}), void n(`代码包大小为 ${y} kb,超出限制 ${y-q} kb,请删除文件后重试`); //省略无关代码 })

上述代码省略了一些与我们当前讨论内容无关的代码,感兴趣的读者可以自行研究。

上述代码有两个删除文件的行为:

rmdir:删除构建完成但是并未打包的代码目录;

fs.unlink:删除打包完成的文件。

将执行删除的代码注释以后,再通过小程序开发者工具进行预览上传操作后,在上文中我们得到的目录中便会留下构建以及打包后的文件了。如下:

微信小程序 devtool隐藏的秘密

其中以.wx为后缀的文件是经过打包后的文件,也就是上传到微信服务器的文件。其同名的目录文件夹是构建完成且打包之前的源文件。

以config.js为例,构建后的代码如下:

'use strict'; Object.defineProperty(exports, '__esModule', { value: true }); exports.default = { basePath: 'https://djtest.cn', fileBasePath: 'https://djtest.cn' };

其实仅仅将ES6的语法转译成了ES5语法。其余的wxml、wxss以及js文件基本也是这样的状态,所以可以推断源码上传至微信服务器后会执行真正的构建动作,开发工具只执行了一些简单地构建行为。

虽然笔者并未从这份代码中得到全部的真相,但希望这篇文章能够给后续的探索者提供一些微薄的帮助。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwdwjj.html