前言
随着前端技术的不断发展，我们开发一个网站所需的工具包变得越来越庞大。我们需要使用的库、插件、工具以及框架等等，都需要我们进行加载。这可能会导致页面加载速度变慢、代码变得混乱、维护变得困难等一系列的问题。因此，打包就变成了前端开发中必不可少的一环。
在这篇文章中，我们来学习一下一个可以帮助我们打包的 npm 包，@mattdesl/microbundle。
什么是 @mattdesl/microbundle
@mattdesl/microbundle 是一个零配置、轻量、快速的打包工具。它可以打包我们的 JavaScript 代码，支持多种模块格式，例如：CommonJS、ES Modules 和 UMD。同时，这个工具还支持 Tree Shaking 和代码压缩。
安装
首先，让我们来安装 @mattdesl/microbundle。打开终端，执行以下命令：
npm install --save-dev @mattdesl/microbundle
安装完成后，我们就可以在项目中使用这个工具了。
使用
使用 @mattdesl/microbundle 非常简单。我们只需要执行以下命令：
npx microbundle entry.js --format <format>
其中，entry.js 是我们的入口文件路径，format 表示打包后生成的文件格式，可以是 cjs、umd 或 es。
下面是示例代码：
// src/index.js export const add = (a, b) => { return a + b; }; export const minus = (a, b) => { return a - b; };
我们来打包一下这个文件。在命令行中执行以下命令：
npx microbundle src/index.js --format umd
执行完成后，我们可以在 dist 目录中看到生成的文件：
-- -------------------- ---- ------- ---- ------------- --- --------- -------- -------- - ------ ------- --- -------- -- ------ ------ --- ----------- - ---------------- - ------ ------ --- ---------- -- ---------- - ------------------- -------- - ------- - ------ -- ----- -------------------- - ----- ------- --------- --------- - ---- -------- ----- --- - --- -- -- - ------ - - -- -- ----- ----- - --- -- -- - ------ - - -- -- ----------- - ---- ------------- - ------ ------------------------------ ------------- - ------ ---- --- -----展开代码
我们可以看到，@mattdesl/microbundle 成功的将我们的代码打包成了 UMD 格式。
配置
如果我们需要进行一些高级配置，@mattdesl/microbundle 也提供了一些选项。下面是一些比较重要的选项：
--entry <file>
指定入口文件的路径，默认为 src/index.js。
--format <format>
指定打包后的文件格式，可以是 cjs、umd 或 es，默认为 cjs。
--name <name>
指定 UMD 模块名称，默认为文件名。
--target <target>
指定编译目标，可以是 node 或 browser，默认为 node。
--external <list>
指定哪些模块不需要打包进最终文件中。
结语
通过这篇文章，我们学习了 @mattdesl/microbundle 这个 npm 包，以及它的使用方法和一些配置方法。我们可以使用它来帮助我们打包我们的 JavaScript 代码，从而提高我们开发网站的效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f353969dbf7be33b2566eb4
