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

目录
相关文章
|
2天前
|
搜索推荐 Go 开发者
Go模块与依赖管理:构建稳定、可维护的项目生态
【2月更文挑战第9天】Go模块是Go语言从1.11版本开始引入的一个新的依赖管理工具,它改变了以往通过GOPATH管理项目依赖的方式,为Go开发者带来了更加灵活、高效的依赖管理方式。本文将深入探讨Go模块与依赖管理的概念、使用方法和最佳实践,帮助读者更好地理解和应用Go模块,构建稳定、可维护的项目生态。
|
2天前
|
存储 JavaScript 前端开发
盘点主流 Flutter 状态管理库2024
状态管理是每个应用不可缺少的,本文将会盘点下主流的状态管理包。
100 2
盘点主流 Flutter 状态管理库2024
|
11月前
|
JavaScript 测试技术 开发工具
从0搭建vue3组件库:自动化发布、管理版本号、生成 changelog、tag
从0搭建vue3组件库:自动化发布、管理版本号、生成 changelog、tag
258 0
|
网络安全 图形学 UED
Rhino ceros 7.25:3D设计软件的全新进化!+Rhino ceros 全版本安装包
Rhino ceros 7.25:3D设计软件的全新进化!+Rhino ceros 全版本安装包
|
资源调度 Rust Shell
集成tauri到已有项目中
tauri是一款类似electron的桌面工具,具有体积小,占用内存少的特点。以下是在已有项目中集成tauri的步骤
926 0
|
小程序 物联网 测试技术
HaaS UI小程序解决方案应用分发之三:应用和版本管理
应用创建和版本管理是应用分发的核心功能之一,新应用在开发完成上线前,需要到应用分发平台申请应用的唯一标识appId一起打包,然后将打包后的升级文件上传到应用分发平台,设备在开机或定时发起升级检测请求时,会将最新的应用版本信息下发到设备进行版本更新。
HaaS UI小程序解决方案应用分发之三:应用和版本管理
|
Linux 应用服务中间件 编译器
msyscuione:基于msys的一体化CUI开发生产环境,支持qt,llvm,ros集成常见web appstack
CUI又称TUI,作为一个开发者和云主机这种服务性环境的使用者,无论有没有意识到,它都是装机时我们大多数情况下第一要装的。linux往往天然集成语言环境和包管理(语言级或系统桌面级),这使得云主机linux装机量往往占首位。相反在windows下没有这样一套东西,因为windows往往作为终端windows应用往往面向要求图形界面的普通用户。
267 0
msyscuione:基于msys的一体化CUI开发生产环境,支持qt,llvm,ros集成常见web appstack
|
JavaScript 内存技术
史上最详细nodejs版本管理器nvm的安装与使用(附注意事项和优化方案)
使用场景 在Node版本快速更新迭代的今天,新老项目使用的node版本号可能已经不相同了,node版本更新越来越快,项目越做越多,node切换版本号的需求越来越迫切,传统卸载一个版本在安装另一个版本的方式太过于麻烦,这也是nvm能够流行的原因。
2010 0