新一代组件/库构建工具 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

目录
相关文章
|
存储 数据库
在TiDB中查询数据
【2月更文挑战第29天】在TiDB中查询数据涉及基本语法如SELECT,条件查询(WHERE子句),排序(ORDER BY),分组(GROUP BY)和聚合函数(COUNT, SUM等)。LIMIT与OFFSET用于分页,子查询和连接查询处理复杂场景。注意列名和表名准确性,优化查询以提升性能,谨慎使用更新或删除操作。
1071 3
|
前端开发 JavaScript API
020 Umi@4 中如何实现动态菜单
020 Umi@4 中如何实现动态菜单
1348 0
020 Umi@4 中如何实现动态菜单
|
Java 测试技术 开发者
通义灵码助力高效开发——我的实践心得
作为一名Java开发工程师,我一直在寻找提高开发效率的方法。最近,我尝试了通义灵码的个人版新功能,并取得了显著的效果。本文将分享我的实践场景、效果和心得。
452 1
|
Web App开发 JavaScript 前端开发
Web 页面性能衡量指标-以用户为中心的性能指标
Web 页面性能衡量指标-以用户为中心的性能指标 以用户为中心的性能指标是理解和改进站点体验的关键点 一、以用户为中心的性能指标 1. 指标是用来干啥的? 指标是用来衡量性能和用户体验的 2. 指标类型 • 感知加载速度:网页可以多快地加载网页中的所有视觉元素并将其渲染到屏幕上 • 加载响应速度:页面加载和执行组件快速响应用户互动所需的 JavaScript 代码的速度 • 运行时响应速度:网页在加载后对用户互动的响应速度 • 视觉稳定性:页面上的元素是否会以用户意想不到的方式发生偏移,是否可能会干扰用户的互动? • 流畅性:过渡和动画是否以一致的帧速率渲染,并在一种状态之间流畅地流动
667 1
|
移动开发 前端开发 JavaScript
使用JavaScript实现一个复杂功能:自定义拖拽排序列表
使用JavaScript实现一个复杂功能:自定义拖拽排序列表
|
Web App开发 XML 前端开发
Layui菜单模块
Layui菜单模块
235 0
|
JavaScript Windows 内存技术
【node】nvm切换node版本
【node】nvm切换node版本
819 0
|
缓存 前端开发 JavaScript
webpack拓展篇(六十八):bundle 和 bundless 的差异
webpack拓展篇(六十八):bundle 和 bundless 的差异
341 0
webpack拓展篇(六十八):bundle 和 bundless 的差异
|
网络架构
ensp :使用静态协议实现两台pc之间的通信
ensp :使用静态协议实现两台pc之间的通信
936 0
ensp :使用静态协议实现两台pc之间的通信
|
编译器 测试技术 开发者
如何使用 dumi 和 father-build 创建组件库
如何使用 dumi 和 father-build 创建组件库
2806 0
如何使用 dumi 和 father-build 创建组件库