Javascript is required
unbuild

📦 An unified javascript build system

unbuild基于Rollup,集成了Rollup态中非常优秀的插件,开箱即用的支持 typescript,并允许生成commonjs和esmodule 格式和类型声明


https://unjs.io/

https://github.com/unjs/unbuild

unjs 一个由 UNIX 哲学驱动的强大生态系统,包含专门构建的高质量 JavaScript 实用程序、库和工具,并由协作社区维护。

也开发了 nitro, h3, ofetch等等

其他项目查看

https://github.com/unjs

构建第一个包

        flowchart LR

1["unbuild"]
2["rollup"]


1 --> 2

      
λ mkdir my-package
λ cd my-package 
λ mkdir src

λ yarn init -y
yarn init v1.22.4
success Saved package.json
✨  Done in 0.01s.

安装依赖

yarn add typescript
yarn add unbuild

tsconfig.json

{
    "compilerOptions": {
      "target": "ESNext",
      "jsx": "preserve",
      "lib": ["DOM", "ESNext"],
      "baseUrl": ".",
      "module": "ESNext",
      "moduleResolution": "node",
      "paths": {
        "@/*": ["./src/*"]
      },
      "resolveJsonModule": true,
      "types": ["node"],
      "strict": true,
      "strictNullChecks": true,
      "noUnusedLocals": true,
      "allowSyntheticDefaultImports": true,
      "esModuleInterop": true,
      "forceConsistentCasingInFileNames": true
    },
    "exclude": ["node_modules", "dist"]
  }
// package.json

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

创建配置项: build.config.ts

import { defineBuildConfig } from 'unbuild'

export default defineBuildConfig({
  entries: ['src/index'],
  clean: true,
  declaration: true,
  rollup: {
    emitCJS: true,
    inlineDependencies: true,
    esbuild: {
      minify: true,
    },
  },
})

执行构建

λ yarn build

yarn run v1.22.4
$ unbuild
ℹ Building my-package                                                                                                                                                                                       14:27:10
ℹ Cleaning dist directory: ./dist                                                                                                                                                                           14:27:10
✔ Build succeeded for my-package                                                                                                                                                                            14:27:10
  dist/index.cjs (total size: 59 B, chunk size: 59 B, exports: add)                                                                                                                                          14:27:10

  dist/index.mjs (total size: 45 B, chunk size: 45 B, exports: add)                                                                                                                                          14:27:10

Σ Total dist size (byte size): 329 B
                                                                                                                                                                                                             14:27:10
✨  Done in 1.00s.

内置插件

特性

✨ Passive watcher

传统的打包工具,在开发环境采用监听模式时,每改动一次源码就需要打包一次。

在 unbuild 中

λ  npx unbuild --stub

ℹ Stubbing my-package                                                                                                                                                                                       14:38:07
ℹ Cleaning dist directory: ./dist

生成了带有 jiti 的 bundle.

jiti 可以动态的执行 js 或者 ts 源码,不需要监听模式

https://github.com/unjs/jiti

这也意味着我们在写 monorepo 时,只需要运行一次 stub 即可,不会触发重新打包。

代码

https://git.taoya.art/learn/unbuild-demo.git