一日一技:如何在浏览器中使用 Npm包?
我们知道,Python的第三方库一般可以使用pip来安装。如果代码比较简单,我们甚至可以把第三方库的代码复制下来,放到项目里面导入。
但由于JavaScript生态里面,有Node.js这个东西,这就导致第三方库有两种不同的导入方式。如果我们要做一个网站,我们通常会在HTML中,使用<script>标签引入.js文件,例如:
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
这样导入了.js文件以后,里面的代码在网页加载完成后就会运行。
但在Node.js生态里面,第三方包一般需要使用npm安装,然后在代码里面通过require导入。最后再用webpack打包编译成能直接在浏览器中运行的JavaScript代码。
如果我找到一个第三方的包,它只提供了npm版本,没有提供直接在浏览器中导入的版本怎么办?
举个例子,我想把CSS Selector转换成XPath。在Github上面,可以搜索到很多这种第三方包,例如:featurist/css-to-xpath: Convert CSS selectors to XPaths, in JavaScript[1] 或者sergeidyga/cssxpath[2]。
但你会发现,这些包都只提供npm安装的版本,没有办法直接在浏览器中通过<script>标签导入。如果我想做一个如下图所示的简单网页,难道我还要用webpack去编译?
在浏览器能运行的JavaScript中,require关键字都是不存在的,如下图所示。因此,我们甚至没有办法把包里面的代码复制出来用:
遇到这种问题怎么办呢?难道我们需要人工一行一行去改写这个包里面的代码让它能直接在浏览器运行?还是必须用webpack来打包编译?其实我们有一个方法,可以把npm版本的包转换成浏览器能运行的包。虽然这个办法还是要依赖Node.js和npm,但是非常简单。你完全不需要知道webpack是什么就可以完成。
以cssxpath为例,我们首先用npm安装它:
npm i cssxpath
然后,我们写一个main.js文件,只需要两行代码:
var cssxpath = require('css-to-xpath')
window.cssxpath = cssxpath
接下来,使用npm全局安装browserify:
npm install -g browserify
安装完成以后,执行命令:
browserify main.js -o bundle.js
命令运行完成以后,会生成一个bundle.js文件。现在我们就可以把这个文件和HTML代码放在一起,通过<script>标签导入了:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Css Selector 转 XPath</title>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="bundle.js"></script>
</head>
<body>
<div class="app">
<h1>Css Selector转XPath</h1>
<div>
<input type="text" class="selector" style="width: 500px">
<button class="translate" x-on:click="translate(selector)">转换</button>
</div>
<div>
<h4>转换结果:</h4>
<span class="result"></span>
</div>
</div>
<script>
$('.translate').on('click', function() {
selector = $('.selector').val()
result = window.cssxpath(selector)
$('.result').text(result)
})
</script>
</body>
</html>
运行效果如下图所示:
在main.js中,我们定义了window.cssxpath = cssxpath,所以,在HTML代码里面,我们就可以通过window.cssxpath(selector)来使用它了。
参考文献
[1] featurist/css-to-xpath: Convert CSS selectors to XPaths, in JavaScript: https://github.com/featurist/css-to-xpath
[2] sergeidyga/cssxpath: https://github.com/sergeidyga/cssxpath
本文转载自微信公众号「未闻Code」,可以通过以下二维码关注。转载本文请联系未闻Code公众号。
相关文章
- 在 Go 里用 CGO?这 7 个问题你要关注!
- 9款优秀的去中心化通讯软件 Matrix 的客户端
- 求职数据分析,项目经验该怎么写
- 在OKR中,我看到了数据驱动业务的未来
- 火山引擎云原生大数据在金融行业的实践
- OpenHarmony富设备移植指南(二)—从postmarketOS获取移植资源
- 《数据成熟度指数》报告:64%的企业领袖认为大多数员工“不懂数据”
- OpenHarmony 小型系统兼容性测试指南
- 肯睿中国(Cloudera):2023年企业数字战略三大趋势预测
- 适用于 Linux 的十大命令行游戏
- GNOME 截图工具的新旧截图方式
- System76 即将推出的 COSMIC 桌面正在酝酿大变化
- 2GB 内存 8GB 存储即可流畅运行,Windows 11 极致精简版系统 Tiny11 发布
- 迎接 ecode:一个即将推出的具有全新图形用户界面框架的现代、轻量级代码编辑器
- loongarch架构介绍(三)—地址翻译
- Go 语言怎么解决编译器错误“err is shadowed during return”?
- 敏捷:可能被开发人员遗忘的部分
- Denodo预测2023年数据管理和分析的未来
- 利用数据推动可持续发展
- 在 Vue3 中实现 React 原生 Hooks(useState、useEffect),深入理解 React Hooks 的