距离 father 上一个 major 版本的发布已经过去了近 3 年,在这期间打包方案、NPM 社区、组件研发流程等方面都发生了不小的变化,加上 father 项目已经堆积了大量 issue、且有很大一部分是由于技术方案陈旧导致的,如果你还在使用 father,一定是深有体会。
为了给开发者带来更好的打包体验,在经历几个月的研发工作后,我们终于带来了 father 4 的 RC 版,来看看它有哪些特性。
双模式构建
father 4 支持 Bundless 和 Bundle 两种构建模式。
Bundless 指把所有源码文件单独编译、平行输出做发布。在 father 4 中,输出 ESModule 及 CommonJS 产物时会使用 Bundless 构建模式。
(来源:blog.slashgear.dev/should-snowpack-replace-webpack )
Bundle 指把源码按 entry 打包成 1 个或多个文件做发布,也就是 Webpack 的打包模式。在 father 4 中,输出 UMD 及依赖预打包产物时会使用 Bundle 构建模式。
(来源:webpack.js.org )
多 Bundless 编译核心
在 Bundless 模式下,father 4 在 RC 版提供了两种编译核心,分别是 Babel 和 ESBuild。
Babel 的特点是宽容度高、兼容性强,配合插件可以做很多事情,通常更适用于面向浏览器平台的源码构建,所以 father 4 会在 platform
配置项为 browser
或输出 ESModule 时默认使用 Babel 做源码编译。
(来源:babeljs.io )
ESBuild 的特点就是快、非常快,但产物最低能兼容到 ES6,通常更适用于面向 Node.js 平台的源码构建,所以 father 4 会在 platform
配置项为 node
或输出 CommonJS 时默认使用 ESBuild 做源码编译。
(来源:esbuild.github.io )
开发者也可以结合项目实际情况、使用 transformer
配置项指定要使用的编译核心。除此之外,Bundless 的编译核心是可扩展的,未来 father 4 还计划支持 SWC 等编译核心,给开发者提供更多选择。
依赖预打包
流行的前端开发框架(比如 Umi、Next.js、Vite)都做了依赖预打包,father 4 基于 Vercel 的 ncc 和 Microsoft 的 api-extractor 带来了开箱即用的依赖预打包能力,它能给项目带来三大好处。
一是 NPM 包发布后安装体积更小、速度更快。由于 NPM 包的依赖树往往十分复杂,我们依赖的只是 A 这棵树,安装的却可能是一片森林,但却不是每棵树都会被用到。而依赖预打包能将依赖打包成单个文件,让一片森林压缩成一棵大树,再跟随我们的项目一起发布 NPM,达到体积更小、速度更快的目的。
二是不担心三方依赖更新引起 Bug。相信大家都碰到过『昨天还好好的,今天怎么就挂了』的情况,即便底层依赖的更新再小心翼翼,也无法验证上层项目的所有场景,更何况有些层依赖发版还不一定遵循 semver 的约定。而依赖预打包可以将『底层依赖更新』这件事由被动变为主动,需要更新的时候我们再重新预打包一份便是,从而大大提升项目稳定性。
三是** NPM 包发布后安装 0 warning**。由于 NPM 安装会进行 peerDependencies
的校验,可能会产生大量的警告,依赖预打包后不需要安装,用户在使用我们的 NPM 包时也不会再看到警告信息了。而我们作为 NPM 包开发者,在开发阶段安装的时候仍然是可以审查这些警告信息的。
不过,由于依赖中可能存在 dynamic require/import 等复杂的情况,现阶段不一定每个依赖都能顺利打包,father 4 会在 RC 阶段持续优化,将这项功能变得更加好用。
试一试
如果 father 4 RC 成功吸引了你的注意,不妨创建一个新项目玩一玩,感受一下 father 的新特性:
$ mkdir test-father-4 $ npx create-father test-father-4 复制代码
等待依赖安装完毕后,执行构建:
# build watch $ npm run dev # build $ npm run build 复制代码
如果你的新项目是框架或者工具,也可以安装某个三方依赖到 devDependencies
,再参考 配置项文档 配置 prebundle
,体验依赖预打包:
$ npm run build:deps 复制代码
后续规划
RC 阶段只是 father 4 的第一波特性,在正式版发布之前,我们还将完成如下特性:
- SWC Bundless 编译核心
- father doctor 命令,自动诊断当前项目中存在的问题,给开发者提示(例如未把产物目录包含在 NPM 包发布目录中、分析产物大小等)
- father g 命令,提供工程原子化能力的生成,例如 test、commitlint 等
- 插件接入能力,给项目提供定制化的入口,并发展插件生态
- ……
欢迎大家在项目中尝鲜 father 4 RC,也可以在 father 4 项目中与我们反馈问题、分享感受:github.com/umijs/fathe… 如果你也对组件/库打包有兴趣或有经验,欢迎 参与到 father 4 的建设中,一起将它变得更好 ❤️
最后,感谢参与打造 father 4 的 Contributors:xiaohuoni、xierenyuan、cnyballk、zzcan、lylwanan、fz6m