10 - 《unbuild的基本使用》

简介

Unbuild 是一个轻量级的编译工具，旨在帮助开发者快速简单地构建 JavaScript 项目。本文档将帮助你了解 Unbuild 的基本功能和使用方法。

目录

1. 安装 Unbuild
2. 配置文件
3. 构建过程
4. 基本原理

安装 Unbuild

首先，确保你已经安装了 Node.js。然后，在终端或命令提示符中运行以下命令以全局安装 Unbuild：

npm install -g unbuild

配置文件

创建一个名为 unbuild.config.js 的文件，并在项目根目录中放置它。以下是一个简单的配置文件示例：

module.exports = {
  // 输入文件，指定要处理的JavaScript文件
  input: 'src/index.js',

  // 输出文件配置
  output: {
    // 输出文件的路径及文件名
    file: 'dist/bundle.js',

    // 输出格式，可以是 'amd', 'cjs', 'es', 'iife', 'umd' 等
    format: 'iife',

    // 输出文件的变量名（当 format 为 'iife' 或 'umd' 时需要）
    name: 'myBundle',

    // 添加源映射支持
    sourcemap: true,

    // 设置 banner，可以在输出文件顶部添加信息（如：版权信息、许可证等）
    banner: '/* My Project - v1.0.0 - MIT License */',
  },

  // 插件列表，用于扩展Unbuild的功能
  plugins: [
    // 例如，添加代码压缩插件
    require('unbuild-plugin-terser')(),

    // 添加其他插件
  ],

  // 在构建过程中排除特定的外部依赖
  external: ['lodash'],

  // 其他配置项
  // ...
};

构建过程

在终端或命令提示符中，导航到项目目录，然后运行以下命令以开始构建过程：

unbuild

构建完成后，输出文件将根据配置文件中指定的设置进行生成。

原理

1. 参数和配置解析

首先，Unbuild 会解析命令行参数、用户自定义的配置文件和项目的 package.json。它将这些配置合并，并根据用户定义的 preset 参数解析所需的预设。

const buildConfig: BuildConfig = tryRequire("./build.config", rootDir) || {}; 

const pkg: PackageJson & Record<"unbuild" | "build", BuildConfig> = tryRequire("./package.json", rootDir); 

const preset = resolvePreset( buildConfig.preset || pkg.unbuild?.preset || pkg.build?.preset || inputConfig.preset || "auto", rootDir );

2. 构建上下文和钩子

接下来，Unbuild 会创建一个构建上下文（BuildContext），用于存储构建过程中的各种信息。同时，Unbuild 也支持自定义钩子，这些钩子可以在构建过程的不同阶段执行。

const ctx: BuildContext = {
  options,
  warnings: new Set(),
  pkg,
  buildEntries: [],
  usedImports: new Set(),
  hooks: createHooks(),
};
ctx.hooks.addHooks(preset.hooks);

3. 构建准备和目录清理

在构建之前，Unbuild 会进行一些准备工作，如清理输出目录（如果选项中设置了 clean）。

await ctx.hooks.callHook("build:before", ctx);
if (options.clean) {
  for (const dir of new Set(options.entries.map((e) => e.outDir).sort())) {
    await rmdir(dir!);
    await fsp.mkdir(dir!, { recursive: true });
  }
}

4. 构建过程

Unbuild 支持多种构建器，如 Rollup、MkDist 和类型构建。根据配置的不同，Unbuild 会调用相应的构建器进行构建。

await typesBuild(ctx);
await mkdistBuild(ctx);
await rollupBuild(ctx);

5. 构建完成和验证

构建完成后，Unbuild 会输出构建结果的相关信息，并进行一些验证。如果在构建过程中产生了警告，并且 failOnWarn 选项设置为 true，则 Unbuild 会以错误状态退出

await ctx.hooks.callHook("build:done", ctx);
validateDependencies(ctx);
validatePackage(pkg, rootDir, ctx);

---

我在看很多插件和库的工程的时候，发现很多都用到了这个工具，比如element-plus和一些vite插件，所以写这个文档记录一下