前言
在前端项目开发过程中，我们常常会遇到需要使用模块化打包工具的情况，比如使用 require.js 或者 webpack 等。不过今天我们要讲的是另一个常见的打包工具 —— browserify。
Browserify 是一个让浏览器端也能使用 CommonJS 模块化的工具，它可以在浏览器端直接使用 npm 包，减少了各种前端库的依赖关系，提高了代码的可维护性。而在 browserify 中，我们可以使用一个叫做 browserify-smith 的插件来帮助我们打包代码，它的使用方法相对简单，并且可以节省我们很多时间，下面就让我们来了解一下它的使用方法。
安装
安装 browserify-smith 非常简单，只需要在命令行中输入以下命令即可：
--- ------- ---------------- ----------
使用
使用 browserify-smith 也非常简单，只需要在项目的 package.json 文件中添加一些配置就可以了。
首先，在 package.json 的 scripts 中添加以下的代码：
---------- - -------- ----------------- -------- -- ---------- -
其中 entry.js 表示入口文件，在该文件中你可以 require 其他的模块，并且打包时，browserify-smith 会自动解析这些依赖关系。
通过运行以下命令就可以开始打包：
--- --- -----
这时就会生成一个叫做 output.js 的文件，其中包含了所有的依赖关系和代码。这个文件就可以被引入到你的 html 文件中了。
示例代码
下面是一个示例代码，它使用了 browserify-smith 插件，将多个 js 文件打包成一个 output.js 文件。首先在项目根目录创建一个名为 entry.js 的文件：
----- --- - ------------------- ----- --- - ------------------- ------------------ ------------------
然后创建 foo.js 和 bar.js 文件，分别输入以下代码：
-------------- - -------- -- - ------ ------ ------ -
-------------- - -------- -- - ------ --- ------ -
最后，运行 npm run build 命令，输出的 output.js 文件里面就包含了所有三个文件的代码：
--------- -- -
----- ------- - --
-------- ------- ---------- -
-- -------------------- -
----- ------ - - -------- -- -
----------------- - ------
----- ---------- - ---------------------
------------------ --------------- --------
-
------ -------------------------
-
-------- ----------- ---------- -
------ ---------- -
---- --
------ -------- -------- -------- -
----- --- - ----------
----- --- - ----------
------------------
------------------
-
---- --
------ -------- -------- -------- -
-------------- - -------- -- -
------ ------ ------
-
-
---- --
------ -------- -------- -------- -
-------------- - -------- -- -
------ --- ------
-
-
-
-
----------
----以上就是使用 browserify-smith 的简单教程，它既方便又易用，同时也可以提升你的开发效率，并且又可以让你使用 npm 包，跨平台工作。希望这篇文章能帮助到你，促进你的开发效率，让你掌握更多实用工具。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066c8cccdc64669dde5456