- A+
使用Uglifyjs和SourceMap压缩和调试JS(laya项目)
Contents
Uglifyjs说明
UglifyJS是一种流行的命令行实用程序，允许你合并和压缩JavaScript文件。
- Uglifyjs可以用来帮你压缩代码，使用户花费更少的时间从网络下载你的代码。
- Uglifyjs也可以用来帮你混淆代码，使用它人无法轻松的阅读和理解你的代码。
Source Maps简要说明
Source Maps记录了一大堆的压缩和混淆信息，可用于将代码映射中的压缩文件恢复到它的原始来源。
- Source Maps能够提供将压缩文件恢复到源文件原始位置的映射代码的方式。这意味着你可以在优化压缩代码后轻松的进行调试。
Uglifyjs安装
- 安装node(nodejs官网下载安装)
-
安装npm(node装的时候也会顺带装这个)
-
安装uglifyjs，命令行下运行
npm install -g uglify-js进行全局安装
Laya项目使用示例
创建Laya AS项目
-
新建LayaAir UI示例项目
-
常规点击
Restart Now -
编译运行程序
生成带sourceMap的压缩代码
-
切换到终端窗口
-
执行如下命令
$ cd .\bin\h5\ $ uglifyjs .\LayaUISample.max.js --comments -o LayaUISample.max.min.js --source-map因为我们代码量很少的缘故，所以这时候压缩和混淆代码的命令很快就执行完了。执行
dir可以看到当前目录下的文件。如上图所示，文件LayaUISample.max.min.js和文件LayaUISample.max.min.js.map就是混淆压缩后的js代码以及相应的sourceMap文件。
使用压缩混淆后的js代码
-
使用快捷键
Ctrl+P打开index.html文件 -
修改
index.html文件，使其运行压缩混淆后的js代码，而不运行压缩前的代码将上图红框部分修改为
LayaUISample.max.min.js,如下图 -
再次编译运行程序，并切换到web开发者工具
如上图所示，我们可以看到现在程序已经采用了压缩混淆后的js代码
但是使用压缩混淆后的js代码，并不利于我们对代码进行调试。这个时候，sourceMap的作用就出来了，它可以帮我们达到跟调试未压缩混淆前的代码一样，方便愉快的调试我们的代码。
引入sourceMap
- 修改
LayaUISample.max.min.js文件，引入sourceMap使用快捷键
Ctrl+P打开文件LayaUISample.max.min.js并于文件末尾增加如下代码
//# sourceMappingURL=LayaUISample.max.min.js.map如下图所示
-
再次调试运行程序
如下图，我们可以看到，压缩混淆前的代码文件
LayaUISample.max.js也可以在开发者工具中看到了。 -
添加断点和调试
如下图，我们先搜索
TestView=并且，将如图所示的位置2和3分别加上断点。然后点击如下图所示的
点我赋值按钮。我们可以看到顺利进入了断点。
点击跳过当前断点。
我们再点下另外一个
点我赋值按钮。可以看到，也是顺利进入了断点。
这样我们就可以愉快的进行调试啦。
正式环境如何使用
如果我们将sourceMap文件和压缩混淆前的文件一并放到外网，这样就会致使普通用户也可以对我们压缩混淆前的代码进行调试，这是不应该的！
但是怎样才能做到，内部人员可以方便的调试外网代码，而外部人员不可以呢？
解决方案
我们只需将sourceMap文件和压缩混淆前的文件置于内网，允许内网网问，而对于外网用户，由于无法访问到我们的内网，自然而然就无法像内部人员一样进行愉快的调试了。
- 修改
LayaUISample.max.min.js文件，使其使用内网上的sourceMap文件。如下图，所示，将其修改未指向一内网地址
//# sourceMappingURL=http://192.168.2.208:9987/LayaUISample.max.min.js.map - 将sourceMap文件和原始文件，置于内网地址目录下，我此处是http://192.168.2.208:9987指向的根目录。
-
再次运行程序并尝试调试
如下图，所示，我们可以看到，确实从
http://192.168.2.208:9987加载了我们的原始文件LayaUISample.max.js。我们再次添加断点，并再次点击
点我赋值按钮。我们可以看到依然顺利进入了断点。
这样，我们就可以做到，内部人士可以愉快的调试代码，而外部人士无法愉快的调试代码啦。
