Microbundle：零配置的模块打包器

你是否曾经为打包小型模块而感到头疼？在我看来，Microbundle可能就是你一直在寻找的解决方案。这个工具的最大亮点就是它的“零配置”特性，简直是懒人福音！只需简单几步，你就能轻松上手。

什么是Microbundle？

Microbundle是一个基于Rollup的打包工具，专门用于处理小型模块。它的设计理念就是让开发者不再为复杂的配置文件烦恼。只需一个package.json文件，Microbundle就能帮你搞定一切。

为什么选择Microbundle？

1. 简单易用：无需复杂的配置，安装后直接运行命令就能打包。
2. 支持现代JavaScript特性：通过Babel和async-to-promises，Microbundle支持ESnext和async/await等现代特性。
3. 多种输出格式：支持CJS、UMD和ESM格式，满足不同环境的需求。
4. 内置TypeScript支持：无需额外配置，直接支持TypeScript。
5. 压缩和大小跟踪：内置Terser压缩和gzip大小跟踪功能。

如何安装和使用Microbundle？

1. 安装：在项目中运行以下命令：

       
   bash复制
       
   npm i -D microbundle
   
       

   npm i -D microbundle

2. 配置package.json：

       
   json复制
       
   {
     "name": "foo",
     "type": "module",
     "source": "src/foo.js",
     "exports": {
       "require": "./dist/foo.cjs",
       "default": "./dist/foo.modern.js"
     },
     "main": "./dist/foo.cjs",
     "module": "./dist/foo.module.js",
     "unpkg": "./dist/foo.umd.js",
     "scripts": {
       "build": "microbundle",
       "dev": "microbundle watch"
     }
   }
   
       

   { "name": "foo", "type": "module", "source": "src/foo.js", "exports": { "require": "./dist/foo.cjs", "default": "./dist/foo.modern.js" }, "main": "./dist/foo.cjs", "module": "./dist/foo.module.js", "unpkg": "./dist/foo.umd.js", "scripts": { "build": "microbundle", "dev": "microbundle watch" } }

3. 运行构建命令：

       
   bash复制
       
   npm run build
   
       

   npm run build

输出格式

Microbundle会为你的代码生成esm、cjs和umd格式的包，确保在各种环境中都能正常运行。默认设置已经非常优化，当然你也可以根据需要进行自定义。

现代模式

除了传统格式，Microbundle还支持现代模式输出，专为现代浏览器设计。这种模式保留了大部分现代JS特性，确保在95%的浏览器中运行无碍。

使用TypeScript

如果你是TypeScript的粉丝，那就更棒了！只需将输入指向一个.ts文件，Microbundle会自动处理。建议在你的tsconfig.json中设置"module": "ESNext"和"target": "ESNext"以匹配Microbundle的内部配置。

CSS支持

Microbundle支持导入CSS文件，并可以选择将生成的CSS内联到你的包中。对于CSS模块，Microbundle也提供了良好的支持。

我的感觉是

在我看来，Microbundle真的是一个非常实用的工具，特别是对于那些不想花太多时间在配置上的开发者。它的简单易用和强大功能让人爱不释手。无论你是新手还是老手，Microbundle都能让你的开发过程更加轻松愉快。