【导语】:Browserify 是一个开源的 JS 编译工具,可以让你使用类似于 node 的 require() 的方式来组织浏览器端的 JS 代码,通过预编译让前端 JS 可以直接使用 Node NPM 安装的一些库。
简介
Browserify 是一个开源的 JavaScript 工具,它可以让你像在 node 中那样,在浏览器中也可以使用 require('module')
来加载模块。换句话说,它可以让服务端的 CommonJs 的模块运行在浏览器端。
开源地址
Browserify 在 GitHub 上已有 13.5k Star。https://github.com/browserify/browserify
安装
如果你想在命令行中使用,可以直接全局安装:
npm install -g browserify
基础使用
简单上手
我们先来看一个简单的例子。假设我们有一个文件 index.js,引入了一个外部模块 uniq
。首先我们安装这个模块
npm install uniq
接着在 index.js 使用这个模块
const uniq = require("uniq");
console.info(uniq([1,2,3,1,2,3]))
我们知道,这个 index.js 文件是可以直接在 node 环境下运行的,但是在浏览器上运行会有什么效果呢?我们来试一下效果,在 index.html 中手动引入这个文件:
<script src="./index.js"></script>
打开网页,我们可以看到控制台报错了:
其实很容易理解,我们根本没有定义这个 require
,浏览器当然也不会认识它了。这时候我们的主角 Browserify 就派上用场了,我们在当前路径下执行如下命令:
browserify index.js > app.js
然后修改我们 index.html 引入的脚本为 app.js:
<script src="./app.js"></script>
接着,我们刷新一下页面,可以看到正常显示了去重后的数组:
外部依赖
如果你想在 script 标签中直接使用第三方模块,或者我们自己定义的模块,你可以使用 --require
选项参数,它的简写为 -r
。承接上例,假设我们的 index.js 导出了一个对象:
module.exports = {
name: "Jerry",
techs: ["Vue", "React", "Webpack", "Vue"]
}
并且我们想在 index.html 中直接使用 uniq 模块和 index.js 导出的对象。此时我们需要修改我们的命令:
browserify -r uniq -r index.js:myModule > app.js
上述命令的意思是,将 uniq 打包成一个可 require 的模块,将 index.js 也打