微信小程序中devtool源码分析

这篇文章主要介绍了微信小程序中devtool源码分析的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇微信小程序中devtool源码分析文章都会有所收获，下面我们一起来看看吧。看看devtool的源码有什么第一步是找到小程序devtool的源码，以mac系统为例，源码的打开方式如下图：
其他的文件不用理会，我们要研究的主要代码在Content/Resources/app.nw/dist目录下，这个目录包括devtool的功能代码以及对小程序进行执行、编译、打包、上传等功能的代码。当然，这些代码都是经过混淆的，读起来还挺费劲（摊手~需要着重注意的是Content/Resources/app.nw/dist/weapp目录，以及commit和trans两个子目录：
从文件的命名上大致可以猜到每个文件对应的功能：trans目录下的文件负责将小程序源码进行一系列的转换，最终被转换为浏览器可识别的html、css以及js；commit目录下的文件负责执行小程序的构建、打包、上传等功能。既然我们知道小程序会进行构建打包流程，想得知小程序运行机制最好的办法就是研究构建完毕之后的代码。有了这个目标之后，下一步就是查看devtool的日志获取小程序构建之后的代码存放位置。找到日志文件Content/Resources/app.nw/dist/common/log/log.js是负责管理devtool日志功能的文件，其中有这样一段代码：其中e便是日志文件的存放目录，然后我们追溯到config/dirConfig.js中发现目录路径是由nw.App.getDataPath()生成的，这个函数是node-webkit提供的API，生成结果的规则在不同的操作系统下有差异，可惜笔者并没有找到相关的说明（沮丧）。但是此次代码的探索并非没有收获，起码我们知道了日志文件存放的目录名为“WeappLog”，我们可以使用强大的命令行从硬盘中搜索此目录：大家可以参考这篇文章了解mdfind命令的用法从输出结果可以得知日志文件在Mac系统的存放目录为/Users//Library/Application Support/微信web开发者工具/WeappLog。进入目录后就会发现很多以.log为后缀的日志文件：
上传小程序的流程打包后的小程序在哪里找到日志文件后便可以从devtool的执行日志中获取小程序被构建后的代码存放位置。当然，第一步是要讲小程序进行构建，操作方法是在小程序开发工具的“项目”菜单”中点击”预览“：
成功后再日志文件中会出现这么一行记录：/Users//Library/Application Support/微信web开发者工具/Weappdest/1484724024071.wx就是构建完成的小程序代码！赶紧去看看！兴致勃勃的找到/Users//Library/Application Support/微信web开发者工具/Weappdest/目录，然后发现：空空如也！看来微信团队还是很谨慎的，在将小程序源码上传之后便会删除构建产出的文件。但是这点小伎俩难不倒程序员！任何行为都是程序执行的，我们直接修改相关的程序代码就可以了嘛！做点小手脚，看看打包后的代码在Content/Resources/app.nw/dist/weapp/commit/upload.js中有一段这样的代码：上述代码省略了一些与我们当前讨论内容无关的代码，感兴趣的读者可以自行研究。上述代码有两个删除文件的行 香港云主机为：rmdir：删除构建完成但是并未打包的代码目录；fs.unlink：删除打包完成的文件。将执行删除的代码注释以后，再通过小程序开发者工具进行预览上传操作后，在上文中我们得到的目录中便会留下构建以及打包后的文件了。如下：
其中以.wx为后缀的文件是经过打包后的文件，也就是上传到微信服务器的文件。其同名的目录文件夹是构建完成且打包之前的源文件。以config.js为例，构建后的代码如下：其实仅仅将ES6的语法转译成了ES5语法。其余的wxml、wxss以及js文件基本也是这样的状态，所以可以推断源码上传至微信服务器后会执行真正的构建动作，开发工具只执行了一些简单地构建行为。关于“微信小程序中devtool源码分析”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“微信小程序中devtool源码分析”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注开发云行业资讯频道。

相关推荐: Nginx配置React项目报404怎么解决

这篇文章主要介绍“Nginx配置React项目报404怎么解决”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Nginx配置React项目报404怎么解决”文章能帮助大家解决问题。代码：location /demo {r…