在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可看到模块已经正确加载。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值