Git Product home page Git Product logo

unbuild's Introduction

unbuild

npm version npm downloads Github Actions Codecov

A unified javascript build system

๐Ÿ“ฆ Optimized bundler

Robust rollup based bundler that supports typescript and generates commonjs and module formats + type declarations.

๐Ÿช„ Automated config

Automagically infer build config and entries from package.json.

๐Ÿ“ Bundleless build

Integration with mkdist for generating bundleless dists with file-to-file transpilation.

โœจ Passive watcher

Stub dist once using jiti and you can try and link your project without needing to watch and rebuild during development.

โœ Untype Generator

Integration with untyped.

โœ”๏ธ Secure builds

Automatically check for various build issues such as potential missing and unused dependencies and fail CI.

CLI output also includes output size and exports for quick inspection.

Usage

Create src/index.ts:

export const log = (...args) => {
  console.log(...args);
};

Update package.json:

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

Note You can find a more complete example in unjs/template for project setup.

Build with unbuild:

npx unbuild

Configuration is automatically inferred from fields in package.json mapped to src/ directory. For more control, continue with next section.

Configuration

Create build.config.ts:

export default {
  entries: ["./src/index"],
};

You can either use unbuild key in package.json or build.config.{js,cjs,mjs,ts,mts,cts,json} to specify configuration.

See options here.

Example:

import { defineBuildConfig } from "unbuild";

export default defineBuildConfig({
  // If entries is not provided, will be automatically inferred from package.json
  entries: [
    // default
    "./src/index",
    // mkdist builder transpiles file-to-file keeping original sources structure
    {
      builder: "mkdist",
      input: "./src/package/components/",
      outDir: "./build/components",
    },
  ],

  // Change outDir, default is 'dist'
  outDir: "build",

  // Generates .d.ts declaration file
  declaration: true,
});

Or with multiple builds you can declare an array of configs:

import { defineBuildConfig } from "unbuild";

export default defineBuildConfig([
  {
    // If entries is not provided, will be automatically inferred from package.json
    entries: [
      // default
      "./src/index",
      // mkdist builder transpiles file-to-file keeping original sources structure
      {
        builder: "mkdist",
        input: "./src/package/components/",
        outDir: "./build/components",
      },
    ],

    // Change outDir, default is 'dist'
    outDir: "build",

    /**
     * * `compatible` means "src/index.ts" will generate "dist/index.d.mts", "dist/index.d.cts" and "dist/index.d.ts".
     * * `node16` means "src/index.ts" will generate "dist/index.d.mts" and "dist/index.d.cts".
     * * `true` is equivalent to `compatible`.
     * * `false` will disable declaration generation.
     * * `undefined` will auto detect based on "package.json". If "package.json" has "types" field, it will be `"compatible"`, otherwise `false`.
     */
    declaration: "compatible",
  },
  {
    name: "minified",
    entries: ["./src/index"],
    outDir: "build/min",
    rollup: {
      esbuild: {
        minify: true,
      },
    },
  },
]);

๐Ÿ’ป Development

  • Clone this repository
  • Enable Corepack using corepack enable (use npm i -g corepack for Node.js < 16.10)
  • Install dependencies using pnpm install
  • Run interactive tests using pnpm dev

License

MIT

unbuild's People

Contributors

ajitzero avatar antfu avatar barbapapazes avatar beerose avatar brendonmatos avatar caffeinum avatar chrisbbreuer avatar danielroe avatar dunqing avatar dwightjack avatar hannoeru avatar johannschopplich avatar jounqin avatar kidonng avatar litomore avatar meteorlxy avatar ntnyq avatar patzick avatar peterroe avatar pi0 avatar renovate[bot] avatar rickdt avatar rss1102 avatar sachinraja avatar sukkaw avatar tangdaoyuan avatar xiaoxiangmoe avatar yfwz100 avatar yjl9903 avatar zoeyzhao19 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.