在Chrome控制檯注入npm模塊

上次研究瞭如何在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可看到模塊已經正確加載。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章