在前端开发过程中，我们常常需要引入一些外部库来帮助我们完成某些任务。然而，这些库通常都是以模块的形式发布的，而浏览器本身并不支持模块化加载。为了解决这个问题，我们可以使用 Browserify，一个能够将代码转换成适合浏览器使用的模块化代码的工具。
安装
首先，我们需要安装 Node.js 和 npm。在安装完成后，可以通过以下命令安装 Browserify：
--- ------- -- ----------
使用示例
假设我们有以下项目结构：
-------- --- ---- - --- ------- - --- ---------- --- ----------
其中，moduleA.js 是一个外部依赖，我们想要在 main.js 中引入它。
首先，在 moduleA.js 中定义一个函数：
-------- ----------- - ------------------- ----------- - -------------- - ------
然后，在 main.js 中引入它：
----- ----- - --------------------- ---------------
现在我们可以使用 Browserify 将这两个文件打包成一个文件，使其在浏览器中正常运行。
---------- ----------- -- ---------
最后，在 index.html 中引入打包后的 bundle.js 文件：
------- -------------------------
现在运行 index.html，可以在浏览器控制台中看到输出结果。
外部依赖
如果我们需要引入其他外部依赖，比如 jQuery，该怎么办呢？
首先，我们需要通过 npm 安装 jQuery：
--- ------- ------
然后，在 main.js 中引入它：
----- - - ------------------ -------------------- --------------
最后再次运行 browserify 命令打包代码即可：
---------- ----------- -- ---------
现在我们可以在浏览器中使用 jQuery 了！
总结
使用 Browserify 可以方便地引入外部依赖，并且能够让浏览器正常运行模块化的 JavaScript 代码。虽然现在已经有更好的解决方案（例如 ES6 模块），但是了解和掌握 Browserify 的使用方法仍然有其重要性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/24657