father

repository·master·Indexed 25 days ago

https://github.com/umijs/father

A specialized build tool for NPM package developers providing dual-mode bundling: Bundless (for ESM and CJS outputs using esbuild, Babel, or SWC) and Bundle (for UMD outputs using Webpack). It features automatic .d.ts type generation, persistent caching, project health checks, and experimental dependency pre-bundling to improve stability for Node.js frameworks and libraries.

Tokens
23.9K
Snippets
62
Records
129
Agent score
78%

What's inside father

  1. Overview of father

    master

    father is an NPM package development tool designed to help developers build, bundle, and publish NPM packages more efficiently and with higher quality.

    Key features include:

    • Dual Build Modes: Supports both Bundless (for ESModule and CommonJS outputs) and Bundle (for UMD outputs) modes.
    • Multiple Build Cores: The Bundle mode uses Webpack. The Bundless mode supports esbuild, Babel, and SWC, which can be switched via configuration.
    • Type Generation: Automatically generates .d.ts type definitions for TypeScript modules during both source builds and dependency pre-bundling.
    • Persistent Caching: Supports persistent caching for all output types to speed up incremental builds.
    • Project Health Checks: Performs checks for common NPM package development pitfalls to ensure stable releases.
    • Micro-generators: Adds common engineering capabilities to projects, such as setting up Jest for testing.
    • Dependency Pre-bundling (Experimental): Provides out-of-the-box dependency pre-bundling to improve stability for Node.js frameworks/libraries by insulating them from upstream dependency updates.
  2. What is father

    master

    father is an NPM package development tool designed to help developers build, generate build artifacts, and publish NPM packages more efficiently and with higher quality.

    Key features include:

    • Dual Build Modes: Supports both Bundless and Bundle modes. ESModule and CommonJS outputs use Bundless mode, while UMD outputs use Bundle mode.
    • Multiple Build Cores: Bundle mode uses Webpack. Bundless mode supports esbuild, Babel, and SWC, which can be switched via configuration.
    • Type Generation: Supports generating .d.ts type definitions for both source code builds and dependency pre-bundling.
    • Persistent Caching: Supports persistent caching for all output types to speed up incremental builds.
    • Project Health Check: Includes a "doctor" feature to check for common mistakes in NPM package development.
    • Micro-generators: Can add common engineering capabilities to projects, such as setting up jest for testing.
    • Dependency Pre-bundling (Experimental): Provides out-of-the-box dependency pre-bundling to improve stability for Node.js frameworks/libraries.
  3. Key features of Father

    master

    Father is an NPM package development tool designed for efficient and reliable package development, build artifact generation, and publishing. Its core capabilities include:

    • Dual-mode Build: Uses Bundless mode for ESModule and CommonJS outputs, and Bundle mode for UMD outputs.
    • Multiple Build Engines: Bundle mode uses Webpack. Bundless mode supports esbuild, Babel, and SWC.
    • Type Generation: Automatically generates .d.ts type definitions for TypeScript modules.
    • Persistent Caching: Supports persistent caching across all output types for faster incremental builds.
    • Project Inspection: Identifies common pitfalls in NPM package development.
    • Micro Generators: Provides engineering capabilities like setting up Jest.
    • Dependency Pre-Bundling (Experimental): Pre-bundles dependencies to improve stability and prevent issues from upstream updates.
  4. What is Dependency Pre-Bundling

    master

    Dependency pre-bundling is an experimental feature in Father designed only for Node.js projects. It involves compiling a project's dependencies (including transitive dependencies) into a single output in advance. The project's source code is then modified to import these dependencies directly from the pre-bundled output rather than from node_modules.

    Key Benefits

    • Smaller/Faster Installation: Consolidates complex dependency trees into a single file, reducing the size and installation time of published NPM packages.
    • Improved Stability: Protects against breaking changes in upstream dependencies by locking the dependency state until you choose to re-bundle.
    • Zero Installation Warnings: Since dependencies are included in the package, users won't encounter peerDependencies validation warnings during NPM installation.
    WARNING

    This feature is experimental. It may struggle with dynamic require/import statements or code that expects to access adjacent files in the original dependency structure.

  5. Understand Bundless build mode

    master

    Bundless is a file-to-file build mode where father performs parallel compilation of source files without processing dependencies. It is the default mode used when outputting ESModule (esm) and CommonJS (cjs) formats in father 4.

    How Bundless works:

    1. TypeScript modules: Compiled to JavaScript modules with corresponding .d.ts type files generated.
    2. JavaScript modules: Compiled to JavaScript modules with compatibility transformations applied.
    3. Other modules (e.g., .less, .css): Directly copied to the output directory without compilation.

    Advantages:

    • Allows selective importing of specific files from the output.
    • Provides better debuggability.
    • Recommended for most projects.
    # Example source structure
    .
    └── src
        ├── index.less
        ├── index.tsx
        └── util.js
    
    # Example Bundless output structure
    .
    └── dist
        ├── index.d.ts
        ├── index.js
        ├── index.less
        └── util.js
  6. Use dependency pre-bundling (experimental)

    master

    Dependency pre-bundling is an experimental feature in father designed exclusively for Node.js projects. Do not use this for browser-oriented projects.

    Pre-bundling compiles your project's dependencies (and their dependencies) into a single output, and modifies your project's source code to import from these pre-bundled artifacts instead of the original packages.

    Benefits

    • Smaller and faster NPM installations: Reduces the complex dependency tree into a single bundled file, making the package smaller and faster to install.
    • Improved stability: Protects your project from unexpected breaking changes in underlying dependencies by locking the dependency state into your pre-bundled artifacts.
    • Zero installation warnings: Since dependencies are bundled, users won't encounter peerDependencies validation warnings during NPM installation.

    Risks

    This feature is experimental. It may struggle with dynamic require/import or scenarios where adjacent files need to be read from a dependency. Use with caution.

  7. Use Bundle build mode for UMD

    master

    Bundle mode packages source files by starting from an entry file, recursively resolving dependencies, and merging them into a final build output. In father 4, this mode is exclusively used for umd outputs.

    How it works:

    • Bundles all dependencies into a single output file.
    • Generates minified JavaScript and CSS assets for optimized delivery.

    When to choose Bundle:

    • Use this when you need self-contained outputs. Since father 4 only uses Bundle mode for UMD, selecting the umd output automatically triggers this mode.
    export default {
      umd: { output: 'dist' },
    };
  8. Understand Bundle build mode

    master

    Bundle mode treats an entry file as a starting point, recursively processing all dependencies and merging them into a single output. In father 4, this mode is used exclusively when outputting UMD products.

    How Bundle works:

    • It bundles the source code and its dependencies (including CSS/Less imports).
    • It outputs compressed (minified) JavaScript and CSS files.

    Advantages:

    • Provides better integrity/encapsulation of the library.
    • Ideal for UMD formats intended for direct script tag usage.
  9. Use Bundless build mode for ESM and CJS

    master

    Bundless is a file-to-file build mode that compiles source files in parallel without processing dependencies. In father 4, both esm and cjs outputs use this mode by default.

    How it works:

    1. TypeScript files: Compiled into JavaScript files with corresponding .d.ts type definitions.
    2. JavaScript files: Compiled into JavaScript with compatibility adjustments.
    3. Other files (e.g., stylesheets): Copied directly to the output directory without modification.

    When to choose Bundless:

    • It is the preferred choice for most projects.
    • It allows for selective imports.
    • It provides better debugging capabilities.
    export default {
      esm: { output: 'dist' },
      // or
      cjs: { output: 'dist' },
    };
  10. Choose between ESModule and CommonJS outputs

    master

    Decide which output format to build based on your target runtime.

    • ESModule: Recommended for Browser environments and projects intended for both Browser and Node.js. It is the modern JavaScript standard and future-proof for tools like Vite.
    • CommonJS: Recommended for Node.js environments. While Node.js is moving towards ESM, producing CommonJS is still recommended for broader compatibility in the Node.js ecosystem.
    • Both: If your package (like react-dom or umi) is intended to run in both environments, you should configure Father to produce both outputs.
  11. When to use UMD output

    master

    You should choose to output UMD (Universal Module Definition) products in your project if either of the following conditions are met:

    1. Your users need to treat the dependency as an external and load it directly in HTML via a <script> tag from a CDN (similar to how React or Ant Design are used).
    2. Your project needs to provide compiled stylesheets for users, such as compiling Less files into CSS files using specific variables (common for component libraries based on Ant Design that require custom themes).
  12. Quickstart: Create and build a father project

    master

    You can quickly bootstrap a new project using create-father and then run a build using the father CLI.

    1. Initialize a project: Run the following command to create a new project named my-father-project (replace with your desired name):

      npx create-father my-father-project

      Note: The scaffold includes only basic configurations. For advanced settings, refer to the configuration documentation.

    2. Execute a build: Navigate into your project directory and run:

      npx father build
    3. Verify output: Check the dist folder to see your generated build artifacts.

    $ npx create-father my-father-project
    $ npx father build