1.3 万 Star！直接在浏览器端组织 JS 代码的魔法工具

【导语】：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 也打包成一个可 require 的模块，并且这个模块的名字叫 myModule。接着在 index.html 中修改 script 标签：

<script src="./ap