unbuild
前端
📦 An unified javascript build system
unbuild基于Rollup，集成了Rollup态中非常优秀的插件，开箱即用的支持 typescript，并允许生成commonjs和esmodule 格式和类型声明
https://github.com/unjs/unbuild
unjs 一个由 UNIX 哲学驱动的强大生态系统，包含专门构建的高质量 JavaScript 实用程序、库和工具，并由协作社区维护。
也开发了 nitro， h3, ofetch等等
其他项目查看
构建第一个包
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.
内置插件
使用
format
添加别名
// build.config.ts
import { defineBuildConfig } from 'unbuild'
import { join } from "node:path"
export default defineBuildConfig({
entries: ['src/index'],
clean: true,
declaration: true,
rollup: {
emitCJS: true,
inlineDependencies: true,
esbuild: {
minify: true,
},
},
alias: {
'@': join(__dirname, 'src')
},
})
{
"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"
]
}
保持目录结构
declaration
是否自动添加d.ts 声明文件
index.ts => dist.index.d.mts
/**
* * `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" | "node16" | boolean;
特性
✨ Passive watcher
传统的打包工具，在开发环境采用监听模式时，每改动一次源码就需要打包一次。
在 unbuild 中
λ npx unbuild --stub
ℹ Stubbing my-package 14:38:07
ℹ Cleaning dist directory: ./dist
生成了带有 jiti 的 bundle.
jiti 可以动态的执行 js 或者 ts 源码，不需要监听模式
这也意味着我们在写 monorepo 时，只需要运行一次 stub 即可，不会触发重新打包。