上次研究瞭如何在java內建javascript直譯器nashorn中載入npm模組,這兩天手頭又有一個需求,要在Chrome瀏覽器的開發者控制檯中載入同樣的npm模組,以便在控制檯中驗證一些想法。
因為對前端開發不算熟悉,不知道有沒有其它的好方案,這個是我自己摸索的,但確實可用。
流程
- npm下載browserify
npm i browserify -g
- 寫一個簡單js檔案,使用require載入npm模組,並注入到window物件
window.acorn = require("./acorn")
- 使用browserify打包這個js,該工具會自動把所有依賴的npm模組和簡單js打包成單個js檔案
browserify entry.js > require_acorn.js
- 把require_acorn.js檔案的內容貼上到開發者控制檯並執行,然後就可以使用了
程式碼壓縮
到這裡其實桌面Chrome瀏覽器就沒有問題了,我又用inspector連上安卓版Chrome試了一下,結果控制檯崩了……
估計是acorn太大了,畢竟有5000多行,於是又試了試壓縮:
- npm下載uglify.js
npm i uglify-js -g
- 壓縮前面生成的單個js包
uglifyjs require_acorn.js > require_acorn.min.js
這次果然沒有問題了,在控制檯執行typeof acorn可看到模組已經正確載入。