Code Monkey home page Code Monkey 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

pi0 avatar renovate[bot] avatar danielroe avatar antfu avatar hannoeru avatar dwightjack avatar chrisbbreuer avatar zoeyzhao19 avatar ajitzero avatar beerose avatar caffeinum avatar dunqing avatar johannschopplich avatar jounqin avatar kidonng avatar litomore avatar patzick avatar rickdt avatar sachinraja avatar sukkaw avatar tangdaoyuan avatar yfwz100 avatar yjl9903 avatar xiaoxiangmoe avatar peterroe avatar meteorlxy avatar ntnyq avatar bernankez 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.