在Chrome控制台注入npm模块

107次阅读

共计 591 个字符,预计需要花费 2 分钟才能阅读完成。

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

npm 下载 browserifynpm 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.jsnpm i uglify-js -g

压缩前面生成的单个 js 包 uglifyjs require_acorn.js > require_acorn.min.js

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

正文完
 0