前言
在前端开发中，常常需要将多个 JavaScript 文件打包成一个或多个文件来提高网站或应用的性能。传统的打包工具如 webpack、rollup 等都是非常优秀的选择，但是它们的配置可能过于复杂，使用起来不够简单直观。
本文将介绍一个轻量级的 JavaScript 打包工具，即 npm 包 @jsenv/bundling。它不仅易于使用，而且支持多种模块格式，并具有强大的插件系统。
安装
安装 @jsenv/bundling 可以使用 npm：
npm install @jsenv/bundling --save-dev
使用
使用 @jsenv/bundling 进行打包非常简单，只需要编写一个配置文件并执行 jsenv-bundling path/to/config.json 即可。下面是一个基本的配置文件示例：
-- -------------------- ---- -------
-
----- -
----------- -
--------- ----------------
--------- -----------
---------- -
-
------------ ---------------------------
------------ -
------------ ----
-
-
-
-
-
-这个配置文件将 ./src/main.js 模块使用 commonjs 格式打包到 /main.js 文件中。同时，还使用了一个名为 modifySourceUppercase 的插件，将源代码全文转换为大写字母。
执行打包命令：
npx jsenv-bundling path/to/config.json
会在项目根目录下生成一个 main.js 文件。
模块格式
@jsenv/bundling 支持多种模块格式，包括 CommonJS、ES modules、AMD 和 UMD。通过配置文件中的 format 属性可以指定，例如：
-- -------------------- ---- -------
-
----- -
---------- -
--------- ------------------
--------- ----
--
---------- -
--------- --------------------
--------- ----------
--
---------- -
--------- ---------------
--------- -----
--
---------- -
--------- ---------------
--------- -----
-
-
-插件系统
@jsenv/bundling 的插件系统非常灵活，可以自定义各种打包过程的行为。插件是一个函数，接受一个对象参数，其中包含了当前模块的源代码、模块的依赖关系等信息。通过返回新的代码，可以实现各种加工、压缩等操作。
下面是一个简单的插件示例，它将模块的源代码全部转换为大写：
// modifySourceUppercase.js
module.exports = function (input) {
const output = {}
const { source: originalSource } = input
output.source = originalSource.toUpperCase()
return output
}在配置文件中使用插件：
-- -------------------- ---- -------
-
----- -
----------- -
--------- ----------------
--------- -----------
---------- -
-
------------ --------------------------
-
-
-
-
-在打包时，@jsenv/bundling 会依次执行各个插件，并将前一个插件输出的结果作为后一个插件的输入，最后输出最终的代码。
总结
@jsenv/bundling 是一个轻量级的 JavaScript 打包工具，易于使用、支持多种模块格式和插件系统。它的独特之处在于它使用了 JavaScript AST 转换技术，使得插件编写变得更加方便和灵活。通过使用 @jsenv/bundling，我们可以更加轻松地实现 JavaScript 的打包和优化，并提升 Web 应用的性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f29ebf73b0ab45f74a8bab0