father-build (UmiJS Father)

1.22.5 · active · verified Sun Apr 19

Father-build is the primary library build tool within the UmiJS ecosystem, often referred to simply as 'Father'. Currently stable at version 4.6.17, it's a powerful and highly configurable solution for packaging JavaScript and TypeScript libraries. It leverages Rollup for robust bundling and integrates esbuild for performance optimizations across various output formats, including ESM, CJS, UMD, and a 'bundless' mode for individual file compilation. The project maintains a very active development pace, frequently issuing multiple minor and patch updates each month, incorporating new features like CSS extraction, enhanced JSX runtime support, and parallel bundless compilation. Key differentiators include comprehensive TypeScript support (shipping its own types and regularly upgrading internal TS versions), flexible configuration via `father.config.ts` using `defineConfig`, and a strong focus on delivering optimized output for diverse JavaScript environments. It aims to streamline library development by abstracting complex build configurations and providing a consistent developer experience.

Common errors

Warnings

Install

Imports

Quickstart

Demonstrates a typical `father` setup in a `package.json` with a comprehensive `father.config.ts` for ESM, CJS, UMD, and bundless outputs, along with a simple TypeScript source file. Run `npm install` then `npm run build`.

// package.json
{
  "name": "my-library",
  "version": "1.0.0",
  "main": "dist/index.cjs.js",
  "module": "dist/index.esm.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "build": "father build"
  },
  "devDependencies": {
    "father": "^4.6.17",
    "typescript": "^5.0.0"
  }
}

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

export default defineConfig({
  // Target Node.js v14+ environments
  targets: {
    node: '14',
  },
  // Configure ESM build (for modern environments)
  esm: {
    output: 'dist/esm', // Output directory for ESM
    platform: 'browser', // For browser-compatible ESM
    // Optional: add aliases
    alias: {
      '@/utils': './src/utils',
    },
  },
  // Configure CommonJS build (for Node.js)
  cjs: {
    output: 'dist/cjs', // Output directory for CJS
    platform: 'node', // For Node.js CommonJS
  },
  // Configure UMD build (for browser globals)
  umd: {
    output: 'dist/umd', // Output directory for UMD
    name: 'MyLibrary', // Global variable name
    // Optional: define external globals
    globals: {
      react: 'React',
      'react-dom': 'ReactDOM',
    },
  },
  // Configure Bundless build (individual file compilation)
  bundless: {
    output: 'dist/lib', // Output directory for bundless
  },
  // Enable TypeScript declaration generation automatically
  // extraBabelPlugins: [], // Uncomment and add if you need custom Babel plugins
  // entry: 'src/index.ts', // Father can auto-detect entries, specify if needed
});

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

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

// Example of an exported type definition
export type User = {
  id: string;
  name: string;
};

// Example function (could be framework-dependent in a real library)
export function createUser(id: string, name: string): User {
  console.log(`Creating user with id: ${id} and name: ${name}`);
  return { id, name };
}

view raw JSON →