# 一起探索 VoidZero 為 JS 生態系準備的瑞士刀 - Codefarmer

{%hackmd @JSDC2024/INuUpOqWS42gD1_pz5S4Bg %}

## 議程與講者資訊

- Slido：https://app.sli.do/event/iY7gaw6ER7nwcnz6vTfuEc
- Slides：https://talks.codefarmer.tw/2024-12-jsdc
- [部落格](https://www.codefarmer.tw)
- [IG (有任何問題歡迎一起討論)](https://www.instagram.com/codefarmer.tw/)
- [關於此主題的深入鐵人賽系列](https://www.codefarmer.tw/topic/fe-tools)

## 共筆

> 開始做筆記

CK Chuang
codefarmer.tw
Slides: https://talks.codefarmer.tw/2024-12-jsdc/1

https://voidzero.dev/

- [Vite](https://vite.dev/)
- [Vitest](https://vitest.dev/)
- [Rolldown](https://rolldown.rs/)
- [Oxo](https://oxc.rs/)

## Build Tool vs Bundler


- CRA / Vue CLI -> Webpack
- Vite (建構) -> Rollup (打包)
- Rsbuild -> Rspack

void(0) - 尤雨溪創立的公司

Vite

[](https://www.youtube.com/watch?v=EKvvptbTx6k)
- esbuild
- prebundling - 預先打包，快取
- Golang
- Poor plugin
- For dev bundling
- rollup
- Good plugin ecosystem
- For Production bundling
- base on JS
- SWC - transpiler, as Babel

越到底層，衝突很多，造成大亂鬥

成立公司，集合眾人

For Unit Test, jest has issues in vite, appears sodatea/vite-jest

Rolldown - 解決底層打包工具的衝突問題

Oxc
- Oxidation Compiler

Demo
https://github.com/ckchuang-dev/jsdc-vitest-demo

簡報
https://talks.codefarmer.tw/2024-12-jsdc/1
(用箭頭左右控制)

## Q&A ([Slido](https://app.sli.do/event/iY7gaw6ER7nwcnz6vTfuEc))

1. 因為這些新潮的工具都開始轉往 Rust，請問您認為前端人員需要學習 Rust 嗎？

> [name=codefarmer] 個人認為算是加分項，因目前求職市場上確實針對此技能沒這麼必要，把基本功打穩可能更有幫助。但如果行有餘力當作興趣去學習新語言 Rust 的特性可以對像是記憶體管理等概念更有掌握度。

> [name=DanSnow] 分享一下身為前端開發者，同時還會寫 Rust 的經驗， Rust expose 了很多電腦運作的細節，但同時又強制你要寫出他認為正確的程式碼，如果了解 Rust 的設計概念的話其實對寫出好的 code 是有幫助的，但一開始可能會很痛苦就是了

> [name=codefarmer] 感謝大大幫忙補充！

2. VoidZero 怎麼賺錢為什麼會有人願意投資?

> [name=codefarmer] 時間因素來不及講到，不小心準備太多內容了😅。我看到有說法像是從 [VoidZero 官方公告](https://voidzero.dev/posts/announcing-voidzero-inc) 中的這段可以看到：
>
> On top of our open-source projects, we will offer an end-to-end JavaScript tooling solution specifically designed to meet the scale and security requirements of enterprise environments.
>
> 看討論在猜測有可能未來有機會去提供企業閉源的整合式解決方案。或是類似像是置入的方式來做雲端、託管服務的整合，例如說去與電子信服務商 Resend 用 Vite 整合，當你今天想用 Vite 去做電子信就可能會一起買 Resend 方案等等。

3. 對 build tool 到 bundle 打包工具 （包含 compiler) 之間的關係仍然很不熟悉, 有推薦的學習資源 （有助於了解整個 flow) 嗎？ 感謝

> [name=codefarmer] 這場短講中因為時間因素所以帶的比較快，有興趣深入研究可以參考我部落格上這個關於 [前端工具](https://www.codefarmer.tw/topic/fe-tools) 的系列。其中也有附上許多學習資源可以參考，或有問題歡迎加我 [IG](https://www.instagram.com/codefarmer.tw/) 一起交流！

4. 請問Vite是不是不能適用於非模組化的前端舊專案?

> [name=codefarmer] 不確定整個舊專案的脈絡是什麼，但因為 Vite 標配會需要能用 ES Module，如果專案舊到是用純 HTML 包 CommonJS、AMD 等 script 的方式，或有用傳統 SSR 的 template engine，有可能會需要一個漸進式的遷移計畫來改善開發體驗：
> - 模組化
> - 先將舊模組遷移至較現代的 ESM
> - 前後端分離

5. vite 開發時是用 esbuild 打包，正式機是用 rollup 打包。想問如果在 vite config 做以下設定 build: { minify: 'esbuild' ...}，正式機也會變成用 esbuild 打包嗎？

> [name=codefarmer] 查了 Vite 關於這個設定的文件 ([ref](https://cn.vite.dev/config/build-options.html#build-minify))，看起來指的是在 production build 時的 minification 工具想使用 esbuild 來幫忙做。
>
> 我的理解是在使用 Rollup 設定去做打包時，將其中的 minify 這件事外包給 esbuild 去做，因為 esbuild 本身也是有提供 minifier 的 API 可以用 ([ref](https://esbuild.github.io/api/#minify))。但實際是不是這樣可能要實驗看看或簡單追追看這個設定的原始碼才能確定，你可以再朝這個方向試試，有遇到問題歡迎加我 [IG](https://www.instagram.com/codefarmer.tw/) 一起交流！

> 聊天區