unbuild 项目使用教程

unbuild 项目使用教程

unbuild 📦 An unified javascript build system 项目地址: https://gitcode.com/gh_mirrors/un/unbuild

1. 项目介绍

unbuild 是一个统一化的 JavaScript 构建系统，旨在简化前端项目的构建过程。它基于 Rollup 进行构建，支持 TypeScript，并且能够生成 CommonJS 和 ES 模块格式以及类型声明文件。unbuild 提供自动化的配置推断，能够从 package.json 文件中推断构建配置和入口文件，同时支持生成无捆绑的文件结构。

2. 项目快速启动

安装

首先，确保您的系统中已经安装了 Node.js。

git clone https://github.com/unjs/unbuild.git
cd unbuild
pnpm install

配置

在 package.json 文件中，配置如下：

{
  "type": "module",
  "scripts": {
    "build": "unbuild"
  },
  "exports": {
    ".": {
      "import": "./dist/index.mjs",
      "require": "./dist/index.cjs"
    }
  },
  "main": "./dist/index.cjs",
  "types": "./dist/index.d.ts",
  "files": ["dist"]
}

创建一个 build.config.ts 文件，配置构建细节：

import { defineBuildConfig } from 'unbuild';

export default defineBuildConfig({
  entries: ['./src/index']
});

构建

使用以下命令构建项目：

npx unbuild

构建完成后，您将在 dist 目录下找到构建产物。

3. 应用案例和最佳实践

生成 sourcemaps

为了更好地调试，您可以配置 unbuild 生成 sourcemaps：

import { defineBuildConfig } from 'unbuild';

export default defineBuildConfig({
  sourcemap: true
});

支持装饰器

如果您的项目需要支持装饰器，可以按照以下方式配置：

import { defineBuildConfig } from 'unbuild';

export default defineBuildConfig({
  rollup: {
    esbuild: {
      tsconfigRaw: {
        compilerOptions: {
          experimentalDecorators: true
        }
      }
    }
  }
});

4. 典型生态项目

unbuild 可以与多种生态项目配合使用，例如：

• 使用 untyped 生成类型定义文件。
• 使用 jiti 实现开发时的被动监听和即时重建。

结合这些工具，unbuild 能够为您的项目提供一个高效、灵活的构建流程。

unbuild 📦 An unified javascript build system 项目地址: https://gitcode.com/gh_mirrors/un/unbuild