在Chrome控制台注入npm模块

工具和资料

• QQ群 - Javascript高级爬虫 - 作者自建群，欢迎加入！
• awesome-java-crawler - 作者收集的爬虫相关工具和资料

正文

上次研究了如何在java内置javascript解释器nashorn中加载npm模块，这两天手头又有一个需求，要在Chrome浏览器的开发者控制台中加载同样的npm模块，以便在控制台中验证一些想法。
因为对前端开发不算熟悉，不知道有没有其它的好方案，这个是我自己摸索的，但确实可用。

流程

1. npm下载browserify
   npm i browserify -g
2. 写一个简单js文件，使用require加载npm模块，并注入到window对象
   window.acorn = require("./acorn")
3. 使用browserify打包这个js，该工具会自动把所有依赖的npm模块和简单js打包成单个js文件
   browserify entry.js > require_acorn.js
4. 把require_acorn.js文件的内容粘贴到开发者控制台并执行，然后就可以使用了

代码压缩

到这里其实桌面Chrome浏览器就没有问题了，我又用inspector连上安卓版Chrome试了一下，结果控制台崩了……
估计是acorn太大了，毕竟有5000多行，于是又试了试压缩：

1. npm下载uglify.js
   npm i uglify-js -g
2. 压缩前面生成的单个js包
   uglifyjs require_acorn.js > require_acorn.min.js

这次果然没有问题了，在控制台执行typeof acorn可看到模块已经正确加载。