简介
bundlr-cli 是一个基于 Node.js 的命令行工具，可以将来自不同目录的 JavaScript 模块打包为一个浏览器可以使用的文件。
bundlr-cli 相比现有的打包工具，具有以下几个特点：
- 简单易用，无需配置文件
- 可以自动解析普通的 CommonJS require 语句
- 支持 ES6 的 import/export 语句，使用 babel 实现
- 支持多文件入口，自动判断依赖关系
本文将介绍如何使用 bundlr-cli，以及如何开发一个符合 bundlr-cli 要求的 JavaScript 模块。
安装
使用 npm 可以很方便地安装 bundlr-cli：
--- ------- -- ----------
然后，在终端中输入 bundlr 命令，如果能够正确输出版本号，表示安装成功：
------ --
使用示例
打包单文件
首先，创建一个名为 main.js 的 JavaScript 文件，使用 ES6 语法：
------ --- ---- ----------- ----------- ---------
然后，创建一个名为 log.js 的文件，其中导出了一个函数：
------ ------- -------- -------- - ----------------- -
使用 bundlr-cli 就可以将这两个文件打包为一个 JavaScript 文件，命令如下：
------ ------- -- --------------
其中 -o 参数指定输出文件名及路径。
打包完成后，dist/bundle.js 文件内容如下：
------------------ -
--- ---------------- - ---
-------- ----------------------------- -
------------------------------ -
------ -----------------------------------
-
--- ------ - -------------------------- - -
-- ---------
-- ------
-------- --
--
-------------------------------------- ------- --------------- ---------------------
-------- - -----
------ ---------------
-
------ ----------------------------------------- - -------------
--
--
-----------
----------------- -------- -
------------------------------------ --------------- --- ------ -------------------------- - ---- -------------- -------- --- --------------------------- -------- - --------------------- - -------------- ---------------------------------
---
------------
----------------- -------- -------------------- -
--------- ---- - ---------------------------------------------- -------- -- --------------------------- --------------------------- - ------ --- -- -------------- - --- - - ------------ --- -- -------- --------------------------- ----------------- ----------------------------------
--
---打包多文件
同样是在 main.js 中导入 log.js 模块，我们再创建一个名为 util.js 的文件，其中定义了一个 sleep 函数：
------ -------- --------- - ------ --- --------------- -- ------------------- ----- -
更改 main.js，在开头添加一行代码：
------ - ----- - ---- ------------
命令行输入：
------ ------- -- --------------
就可以自动识别 util.js，生成包含两个入口文件的 bundle.js 文件。
开发符合 bundlr-cli 规范的 JavaScript 模块
bundlr-cli 支持 CommonJS require 语句，也支持 ES6 的 import/export 语句，开发时需要按照这两种规范编写代码。
我们以一个功能简单的模块 math.js 为例，演示如何开发符合 bundlr-cli 规范的 JavaScript 模块。
math.js 中定义了加、减、乘、除四个函数：
-------- ------ -- - ------ - - -- - -------- ------ -- - ------ - - -- - -------- ------ -- - ------ - - -- - -------- ------ -- - ------ - - -- - -------------- - - ---- ---- ---- ---- --
使用 CommonJS 语法导出模块对象。
然后创建一个名为 index.js 的文件，导入上面的 math.js 模块，进行测试：
----- ---- - --------------------- ----------------------- ---- ----------------------- ---- ----------------------- ---- ----------------------- ----
使用 bundlr-cli 打包：
------ -------- -- --------------
打包完成后，dist/bundle.js 的内容如下：
------------------ -
--- ---------------- - ---
-------- ----------------------------- -
------------------------------ -
------ -----------------------------------
-
--- ------ - -------------------------- - -
-- ---------
-- ------
-------- --
--
-------------------------------------- ------- --------------- ---------------------
-------- - -----
------ ---------------
-
------ ----------------------------------------- - --------------
--
--
-------------
----------------- -------- -------------------- -
----------- ---- - ----------------------- --------- -- ------------------------------------------ ----------------------------- ----------------------------- ----------------------------- ----------- -----------------------------------
---
------------
----------------- -------- -
----------- - ----------- -- -
------ - - --
--
----------- - ----------- -- -
------ - - --
--
----------- - ----------- -- -
------ - - --
--
----------- - ----------- -- -
------ - - --
--
--
---从上面的打包结果可以看出：bundlr-cli 已经自动将 CommonJS 语法转换为了符合浏览器规范的代码。同时，也支持 ES6 的 import/export 语句，使用 babel 实现。
总结
bundlr-cli 是一个方便、快速的打包工具，无需配置文件，使用简单。本文以具体的代码片段为例，讲解了如何使用 bundlr-cli 打包 JavaScript 模块，并简述了开发符合 bundlr-cli 规范的 JavaScript 模块的方法。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066c8eccdc64669dde55e9