新一代组件/库构建工具 father 4 RC 发布啦 🎈

简介: 新一代组件/库构建工具 father 4 RC 发布啦 🎈

image.png

image.png

距离 father 上一个 major 版本的发布已经过去了近 3 年,在这期间打包方案、NPM 社区、组件研发流程等方面都发生了不小的变化,加上 father 项目已经堆积了大量 issue、且有很大一部分是由于技术方案陈旧导致的,如果你还在使用 father,一定是深有体会。


为了给开发者带来更好的打包体验,在经历几个月的研发工作后,我们终于带来了 father 4 的 RC 版,来看看它有哪些特性。



双模式构建

father 4 支持 Bundless 和 Bundle 两种构建模式。

Bundless 指把所有源码文件单独编译、平行输出做发布。在 father 4 中,输出 ESModule 及 CommonJS 产物时会使用 Bundless 构建模式。

image.png (来源:blog.slashgear.dev/should-snowpack-replace-webpack )

Bundle 指把源码按 entry 打包成 1 个或多个文件做发布,也就是 Webpack 的打包模式。在 father 4 中,输出 UMD 及依赖预打包产物时会使用 Bundle 构建模式。

image.png (来源:webpack.js.org )



多 Bundless 编译核心

在 Bundless 模式下,father 4 在 RC 版提供了两种编译核心,分别是 Babel 和 ESBuild。


Babel 的特点是宽容度高、兼容性强,配合插件可以做很多事情,通常更适用于面向浏览器平台的源码构建,所以 father 4 会在 platform 配置项为 browser 或输出 ESModule 时默认使用 Babel 做源码编译。


image.png

(来源:babeljs.io )


ESBuild 的特点就是快、非常快,但产物最低能兼容到 ES6,通常更适用于面向 Node.js 平台的源码构建,所以 father 4 会在 platform 配置项为 node 或输出 CommonJS 时默认使用 ESBuild 做源码编译。

image.png (来源: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 的第一波特性,在正式版发布之前,我们还将完成如下特性:

  1. SWC Bundless 编译核心
  2. father doctor 命令,自动诊断当前项目中存在的问题,给开发者提示(例如未把产物目录包含在 NPM 包发布目录中、分析产物大小等)
  3. father g 命令,提供工程原子化能力的生成,例如 test、commitlint 等
  4. 插件接入能力,给项目提供定制化的入口,并发展插件生态
  5. ……



欢迎大家在项目中尝鲜 father 4 RC,也可以在 father 4 项目中与我们反馈问题、分享感受:github.com/umijs/fathe… 如果你也对组件/库打包有兴趣或有经验,欢迎 参与到 father 4 的建设中,一起将它变得更好 ❤️



最后,感谢参与打造 father 4 的 Contributors:xiaohuonixierenyuancnyballkzzcanlylwananfz6m

目录
相关文章
|
28天前
|
前端开发 JavaScript 开发工具
Vite 4.0 发布,下一代的前端工具链
【10月更文挑战第21天】Vite 4.0 的发布标志着前端开发领域的又一次重要进步。它为开发者带来了更高效、更智能、更具创新性的开发体验,正逐渐成为下一代前端工具链的引领者。
|
6月前
|
小程序 IDE 开发工具
社区每周丨IDE 3.7.4 Beta 版本上线及基础库更新至 2.8.10(6.5-6.9)
社区每周丨IDE 3.7.4 Beta 版本上线及基础库更新至 2.8.10(6.5-6.9)
83 11
|
6月前
|
小程序 IDE 开发工具
社区每周丨基础库更新至 2.8.8及IDE3.6.3 Beta 版本上线(4.3-4.7)
社区每周丨基础库更新至 2.8.8及IDE3.6.3 Beta 版本上线(4.3-4.7)
73 11
|
开发框架 JavaScript 小程序
扩展应用功能的无限可能——UniApp生态系统中的组件库与插件探索
扩展应用功能的无限可能——UniApp生态系统中的组件库与插件探索
|
网络安全 图形学 UED
Rhino ceros 7.25:3D设计软件的全新进化!+Rhino ceros 全版本安装包
Rhino ceros 7.25:3D设计软件的全新进化!+Rhino ceros 全版本安装包
|
JavaScript 前端开发 开发工具
从0搭建Vue3组件库:使用gulp自动化处理打包与发布
从0搭建Vue3组件库:使用gulp自动化处理打包与发布
579 0
|
JavaScript 测试技术 开发工具
从0搭建vue3组件库:自动化发布、管理版本号、生成 changelog、tag
从0搭建vue3组件库:自动化发布、管理版本号、生成 changelog、tag
451 0
|
前端开发 JavaScript API
openHarmony系统组件学习
openHarmony系统应用开发的组件很多,本篇文章仅以一个例子作为一个通用的学习方法,如果之前学过安卓开发,这部分内容应该除了语言,其他没有任何难度,本篇文章参考官网实现一个dialog组件,开始了~~
177 0
openHarmony系统组件学习
|
Prometheus Kubernetes 监控
一文了解如何源码编译Rainbond基础组件
一文了解如何源码编译Rainbond基础组件
一文了解如何源码编译Rainbond基础组件
|
资源调度 Rust Shell
集成tauri到已有项目中
tauri是一款类似electron的桌面工具,具有体积小,占用内存少的特点。以下是在已有项目中集成tauri的步骤
1055 0
下一篇
无影云桌面