Giới thiệu

Việc xây dựng thư viện TypeScript đã gặp nhiều khó khăn trong thời gian dài với tốc độ xây dựng chậm và cấu hình phức tạp. Năm 2025, chúng ta xứng đáng có một công cụ tốt hơn. Hướng dẫn này sẽ chỉ bạn cách xây dựng thư viện TypeScript hiện đại với tốc độ và trải nghiệm tốt nhất thông qua Bunup, được hỗ trợ bởi trình gói của Bun.

Bắt đầu

Hãy tạo một thư viện TypeScript đơn giản. Đầu tiên, hãy đảm bảo bạn đã cài đặt Bun, sau đó tạo cấu trúc dự án:

mkdir my-library
cd my-library
bun init -y

Tiếp theo, tạo tệp TypeScript đầu tiên của bạn:

// src/index.ts
export function greet(name: string): string {
  return `Hello, ${name}!`;
}

export function add(a: number, b: number): number {
  return a + b;
}

Cuộc Cách Mạng Về Tốc Độ

Điều thú vị nằm ở đây. Các công cụ truyền thống mất vài giây để xây dựng ngay cả thư viện đơn giản. Hãy xem sự khác biệt:

# Cách tiếp cận truyền thống với tsup
$ tsup src/index.ts
✓ Build completed in 1.4s

# Cách tiếp cận hiện đại với bunup
$ bunup src/index.ts
✓ Build completed in 37ms

Chỉ 37 mili giây. Không phải 1.4 giây. Không phải 400ms. Chỉ 37ms. Điều này không chỉ là tiết kiệm thời gian. Xây dựng tức thời thay đổi hoàn toàn cách bạn làm việc. Luồng phát triển của bạn không bị gián đoạn. Chế độ theo dõi trở nên tức thì. Các hook trước khi commit chạy mà không gặp trở ngại. Việc xây dựng trở nên vô hình.

Thiết Lập Quy Trình Xây Dựng

Cài đặt bunup như một phụ thuộc phát triển:

bun add --dev bunup

Tạo tệp cấu hình:

// bunup.config.ts
import { defineConfig } from 'bunup';

export default defineConfig({
  entry: 'src/index.ts',
  format: ['esm', 'cjs'],
});

Thêm các script xây dựng vào package.json của bạn:

{
  "scripts": {
    "build": "bunup",
    "dev": "bunup --watch"
  }
}

Bây giờ hãy xây dựng thư viện của bạn:

bun run build

Thư viện của bạn được xây dựng ở cả định dạng ESM và CommonJS, với các khai báo TypeScript, trong vài mili giây.

Cấu Hình TypeScript Hiện Đại

Để có hiệu suất và khả năng tương thích tốt nhất, hãy bật isolatedDeclarations trong tệp tsconfig.json của bạn:

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "declaration": true,
    "isolatedDeclarations": true,
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}

Điều này cho phép tạo khai báo nhanh hơn đáng kể trong khi đảm bảo rằng các loại của bạn là rõ ràng và dự đoán được. Tìm hiểu thêm về khai báo tách biệt.

Xuất Gói Tự Động

Một trong những phần tốn thời gian nhất trong phát triển thư viện là duy trì các xuất gói trong package.json. Bunup tự động xử lý việc này.

Thêm plugin xuất vào cấu hình của bạn:

// bunup.config.ts
import { defineConfig } from 'bunup';
import { exports } from 'bunup/plugins';

export default defineConfig({
  entry: 'src/index.ts',
  format: ['esm', 'cjs'],
  plugins: [exports()]
});

Xây dựng thư viện của bạn và theo dõi sự thay đổi trong package.json:

{
  "name": "my-library",
  "version": "1.0.0",
  "type": "module",
  "main": "./dist/index.cjs",
  "module": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "exports": {
    ".": {
      "import": {
        "types": "./dist/index.d.ts",
        "default": "./dist/index.js"
      },
      "require": {
        "types": "./dist/index.d.cts",
        "default": "./dist/index.cjs"
      }
    }
  }
}

Mỗi đường dẫn đều đúng. Mỗi định dạng đều được ánh xạ. Mỗi khai báo loại đều đúng. Bạn không bao giờ phải chỉnh sửa thủ công nữa.

Nhiều Điểm Vào

Các thư viện thực tế thường có nhiều điểm vào. Bunup giúp việc này trở nên dễ dàng:

// bunup.config.ts
export default defineConfig({
  entry: ['src/index.ts', 'src/utils.ts', 'src/math.ts'],
  format: ['esm', 'cjs'],
  plugins: [exports()]
});

Mỗi điểm vào sẽ có tệp đầu ra riêng và ánh xạ xuất đúng. Người tiêu dùng của bạn có thể nhập chính xác những gì họ cần:

import { greet } from 'my-library';
import { formatDate } from 'my-library/utils';
import { calculate } from 'my-library/math';

Giữ Thư Viện Của Bạn Sạch

Bunup giúp bạn duy trì một thư viện sạch, hiệu quả với plugin phụ thuộc không sử dụng:

// bunup.config.ts
import { defineConfig } from 'bunup';
import { exports, unused } from 'bunup/plugins';

export default defineConfig({
  entry: 'src/index.ts',
  plugins: [
    exports(),
    unused()
  ]
});

Trong quá trình xây dựng, bạn sẽ nhận được cảnh báo về các phụ thuộc không được sử dụng, phụ thuộc nằm sai phần và thiếu phụ thuộc peer. Thư viện của bạn sẽ luôn gọn nhẹ và các phụ thuộc sẽ chính xác.

Hỗ Trợ Monorepo

Xây dựng hệ thống thiết kế hoặc thư viện thành phần với nhiều gói? Hỗ trợ workspace của Bunup giúp phát triển monorepo trở nên dễ dàng:

// bunup.config.ts
import { defineWorkspace } from 'bunup';

export default defineWorkspace([
  {
    name: 'core',
    root: 'packages/core'
  },
  {
    name: 'utils',
    root: 'packages/utils'
  },
  {
    name: 'components',
    root: 'packages/components'
  }
]);

Xây dựng tất cả các gói chỉ với một lệnh:

bunup

Bunup xử lý các xây dựng gia tăng, chỉ xây dựng lại các gói đã thay đổi. Chế độ theo dõi hoạt động trên tất cả các gói. Các phụ thuộc giữa các gói được giải quyết tự động.

Cấu Hình Nâng Cao

Đối với các trường hợp phức tạp hơn, bunup cung cấp thêm tùy chọn trong khi vẫn giữ trải nghiệm đơn giản. Bạn có thể cấu hình nén, bản đồ nguồn, ngoại lệ và nhiều hơn nữa. Xem tài liệu bunup để biết tất cả các tùy chọn có sẵn.

// bunup.config.ts
export default defineConfig({
  entry: 'src/index.ts',
  format: ['esm', 'cjs'],
  minify: true,
  sourcemap: 'linked',
  target: 'node',
  plugins: [exports()]
});

Quy Trình Phát Triển

Quy trình hàng ngày của bạn trở nên dễ dàng:

# Bắt đầu phát triển với chế độ theo dõi
bun run dev

# Xây dựng cho sản xuất
bun run build

# Kiểm tra loại mã của bạn
bun run typecheck

Sự thay đổi sẽ được xây dựng ngay lập tức. Các khai báo loại tự động được tạo ra. Các xuất gói luôn đồng bộ. Mọi thứ hoạt động trơn tru.

Tại Sao Điều Này Quan Trọng

Điều này không chỉ về việc xây dựng nhanh hơn hay cấu hình tốt hơn. Nó về việc loại bỏ ma sát trong phát triển thư viện. Khi việc xây dựng tức thời, bạn có thể thử nghiệm một cách tự do hơn. Khi cấu hình tự động, bạn tập trung vào mã của mình. Khi mọi thứ hoạt động ngay lập tức, bạn phát hành nhanh hơn.

Các công cụ xây dựng truyền thống được thiết kế cho một thời đại khác. Chúng mang theo gánh nặng của những quyết định cũ và hệ sinh thái plugin. Bunup được thiết kế cho ngày hôm nay, tận dụng tốc độ tự nhiên của Bun và các tính năng TypeScript hiện đại để cung cấp trải nghiệm mà bạn sẽ yêu thích.

Bắt Đầu Xây Dựng

Tạo thư viện TypeScript tiếp theo của bạn với bunup:

bunx @bunup/cli@latest create

Chọn mẫu TypeScript và bắt đầu xây dựng. Thư viện của bạn sẽ có các bản dựng tức thì, xuất gói tự động, cấu hình TypeScript đúng và tất cả những gì bạn cần để phát hành lên npm.

Tương lai của phát triển thư viện TypeScript đã đến. Nhanh chóng, tiện lợi và thú vị. Chào mừng bạn đến với phát triển thư viện hiện đại với bunup.