在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可看到模塊已經正確加載。