@viso/package-build

一个强大的前端项目构建工具，基于 Rollup 和 TypeScript 构建，支持多种输出格式和插件扩展。

功能特性

• 🚀 基于 Rollup 的高性能构建
• 📦 支持多种输出格式：ES、CommonJS、UMD
• 🎯 支持 TypeScript 编译和类型生成
• 🔌 丰富的插件生态系统集成
• 🛠️ 灵活的构建配置选项
• 📄 支持导出文件的自动化构建
• 🎨 支持 Vue、React 等前端框架
• 💅 CSS 预处理器支持（Less、Sass、PostCSS）

安装

npm install @viso/package-build

命令行使用

基本构建命令

# 完整构建（包含所有输出格式）
npx package-build

# 仅构建 dist 目录（ES、CJS、UMD 格式）
npx package-build --dist

# 仅构建模块文件（es/ 和 lib/ 目录）
npx package-build --module

# 仅 TypeScript 编译（生成类型文件）
npx package-build --tsc

# 构建导出文件
npx package-build --export

构建选项组合

# 同时构建 dist 和模块文件
npx package-build --dist --module

# 构建模块文件和类型声明
npx package-build --module --tsc

API 使用

createBuildConfig

创建构建配置：

import type { BuildOption } from "@viso/package-build";
import { createBuildConfig } from "@viso/package-build";

const buildOption: BuildOption = {
  rootDir: process.cwd(),
  outputs: [
    {
      type: "dist",
      format: "es",
    },
    {
      type: "module",
      format: "es",
      dir: "es",
    },
  ],
};

const config = await createBuildConfig("dist", buildOption);

build

执行构建：

import { build, createBuildConfig } from "@viso/package-build";

const config = await createBuildConfig("dist", buildOption);
await build(config, "dist");

构建类型

dist 构建

生成用于分发的打包文件，支持：

• ES Module 格式
• CommonJS 格式
• UMD 格式（可在浏览器直接使用）

module 构建

生成保持源码结构的模块文件：

• es/ 目录：ES Module 格式
• lib/ 目录：CommonJS 格式

tsc 构建

仅进行 TypeScript 编译，生成类型声明文件

export 构建

根据项目配置自动构建导出文件

支持的文件类型

• JavaScript/TypeScript: .js, .ts, .jsx, .tsx
• Vue: .vue 单文件组件
• 样式文件: .css, .less, .scss, .sass
• 静态资源: 图片、字体等文件
• JSON: 配置文件和数据文件

内置插件

• @rollup/plugin-typescript: TypeScript 支持
• @rollup/plugin-babel: Babel 转译
• @rollup/plugin-node-resolve: 模块解析
• @rollup/plugin-commonjs: CommonJS 兼容
• @rollup/plugin-json: JSON 文件支持
• @rollup/plugin-alias: 路径别名
• @rollup/plugin-replace: 变量替换
• @rollup/plugin-terser: 代码压缩
• rollup-plugin-postcss: CSS 处理
• rollup-plugin-vue: Vue 组件支持

配置示例

自定义构建配置

import type { BuildOption } from "@viso/package-build";

const customBuildOption: BuildOption = {
  rootDir: process.cwd(),
  outputs: [
    {
      type: "dist",
      format: "es",
      // 自定义输出选项
    },
    {
      type: "module",
      format: "cjs",
      dir: "lib",
    },
  ],
  // 插件配置
  plugins: {
    typescript: {
      // TypeScript 插件选项
    },
    babel: {
      // Babel 插件选项
    },
  },
};

项目结构

构建后的项目结构：

project/
├── src/           # 源码目录
├── dist/          # 打包文件（--dist）
│   ├── index.js   # ES 格式
│   ├── index.cjs  # CommonJS 格式
│   └── index.umd.js # UMD 格式
├── es/            # ES 模块文件（--module）
├── lib/           # CommonJS 模块文件（--module）
└── types/         # 类型声明文件（--tsc）

环境变量

• NODE_ENV: 构建环境（development/production）
• BUILD_TARGET: 构建目标平台

依赖项

主要依赖：

• rollup: 构建工具核心
• typescript: TypeScript 编译器
• @babel/core: Babel 转译器
• commander: 命令行参数解析
• fast-glob: 文件匹配
• fs-extra: 文件系统操作

许可证

本项目使用 MIT 许可证。