Name: Evan You - Vue、Vite、VoidZero 和 JavaScript 工具的未來 (Evan You - Vue, Vite, VoidZero and the Future of JavaScript Tooling)
Uploaded: 2024-11-13T05:19:34.000Z
Duration: 51 min 4 s

程度副詞

The first stage of VEET really was like, let's just make things work and make it better than the status quo, but underneath there might be a lot of, you know, hacks and things we want to improve in the future.

VEET 的第一階段就像是，讓我們把事情做好，讓它比現狀更好，但在這背後可能有很多，你知道的，黑客和我們希望在未來改進的東西。

This is a podcast about developer tools and the people who make them.

這是一個關於開發者工具和開發者的播客。

We're really excited to have Evan Yu joining us again.

埃文-於（Evan Yu）能再次加入我們，我們感到非常興奮。

Evan, you were with us on episode 12 back a few years ago talking about VUE and VEET.

埃文，幾年前，你曾在第 12 集裡和我們一起談論過 VUE 和 VEET。

目前，我們已經錄製了 119 個節目。

We've been doing it a while, but it's, it's so fantastic to have you back.

我們已經做了一段時間了，但你能回來真是太好了。

We are continually big fans of your work and how it shapes the ecosystem.

我們一直非常欣賞您的作品，以及您的作品對生態系統的影響。

And we're going to talk about what you're up to these days.

But before we dive into that, would you like to tell our listeners a little bit more about yourself?

在我們深入探討之前，您願意向聽眾介紹一下您自己嗎？

I am, I have been an independent open source developer since 2016.

我是，我從 2016 年開始成為一名獨立的開源開發者。

實際上，我現在還在為 VUE 工作。

And just recently we started a company called Void Zero and focus a bit deep, even deeper that goes into, you know, the full JavaScript tool chain, starting from servers, no, no, no, starting from parsers to linters, formatters, bundlers, transformers, everything that supports higher level tooling.

就在最近，我們成立了一家名為 Void Zero 的公司，專注於更深入的領域，你知道，整個 JavaScript 工具鏈，從服務器開始，不，不，不，從解析器到精簡器、格式化器、捆綁器、轉換器，所有支持更高級工具的東西。

So the bundler we're building called Rodan is going to support VEET in the future.

是以，我們正在構建的名為 "Rodan "的捆綁程序未來將支持 VEET。

And VEET is now supporting a lot of other frameworks.

VEET 現在還支持許多其他框架。

So essentially we're trying to build this vertical unified tool chain that can support all the frameworks that depend on VEET today and hopefully make everyone's development experience better.

是以，從本質上講，我們正試圖構建一個垂直統一的工具鏈，以支持目前依賴 VEET 的所有框架，並希望讓每個人都能獲得更好的開發體驗。

So back, back on that old episode, a long ago, you had actually just released VEET.

在很久以前的那期節目中，你剛剛發佈了《VEET》。

And since then it's really become like a pillar of the industry.

從那時起，它就真正成為了行業的支柱。

Like many a meta framework is based on it now.

就像現在很多元框架都以它為基礎一樣。

And it's like the starter pack for everything.

What was the journey from getting, going from VEET to, oh, we actually have to rebuild most of what's below the surface level and form a company around that?

從獲得 VEET 到 "哦，我們實際上必須重建大部分地表以下的東西，並以此為基礎成立一家公司"，這中間經歷了怎樣的過程？

I think the idea started at one point because when I first started VEET, I was just doing a prototype, honestly, right?

我認為這個想法始於某個時刻，因為當我第一次啟動 VEET 時，老實說，我只是在做一個原型，對吧？

So I pretty much just took whatever that's available out there and try to fulfill the goals.

是以，我幾乎是隨心所欲，想方設法實現目標。

And there were a lot of trade-offs and nowadays I consider them kind of hacks because I didn't have the, you know, the bandwidth to do all the things myself.

這其中有很多取捨，如今我認為這些都是 "黑客"，因為我沒有足夠的帶寬來自己完成所有的事情。

So I have to use what other people have built.

是以，我必須使用別人的成果。

And that's, I think that's typically what we've been doing in the Java ecosystem because we feel like, okay, like we don't want to necessarily reinvent the wheels.

我認為，這就是我們在 Java 生態系統中一直在做的事情，因為我們覺得，好吧，我們不一定要重新發明輪子。

Why not just use things people have already done?

為什麼不利用人們已經做過的事情呢？

So in the beginning we were, I was using Rollup because I've always liked Rollup's

所以，一開始我們使用 Rollup，因為我一直喜歡 Rollup 的

API and then we ran into performance issues because, so the first step of VEET was to have a native ESM dev server, right?

API 然後我們遇到了性能問題，因為 VEET 的第一步就是要有一個在地的 ESM 開發服務器，對嗎？

And then we use Rollup to try to handle the dependencies because some dependencies are in CJS.

然後我們使用 Rollup 來嘗試處理依賴關係，因為有些依賴關係在 CJS 中。

We want to convert them to ESM so they can load in the browser.

我們希望將它們轉換為 ESM，以便在瀏覽器中加載。

But Rollup was actually quite slow if you have large dependencies.

但如果有大量的依賴關係，Rollup 的運行速度實際上相當慢。

And so we started using ESBuild for that purpose.

And then we tried using ESBuild for production bundling and it was not satisfactory because it has no control over how the chunks are split.

然後，我們嘗試使用 ESBuild 進行生產捆綁，但效果並不理想，因為它無法控制如何分割分塊。

And the way ESBuild splits code is just a bit counterintuitive if you're building applications.

如果你正在構建應用程序，那麼 ESBuild 分割代碼的方式就有點違反直覺了。

So we're like, okay, now we need to think about, okay, we use ESBuild for development and pre-bundling, but we use Rollup for production bundling.

所以我們想，好吧，現在我們需要考慮一下，好吧，我們使用 ESBuild 進行開發和預捆綁，但使用 Rollup 進行生產捆綁。

And we kind of smoothed over the surface to make them work kind of the same way.

我們對錶面進行了平滑處理，使它們以同樣的方式工作。

And later on when people started building real applications with VEET, for example, when people are using VEET with React and previously everyone was using Babel because Babel was supported.

後來，當人們開始使用 VEET 構建真正的應用時，例如，當人們將 VEET 與 React 結合使用時，而之前大家都在使用 Babel，因為 Babel 得到了支持。

Interestingly, if you use VEET by default and you write JSX in TypeScript, they are transformed using ESBuild, which is quite fast.

有趣的是，如果您默認使用 VEET，並用 TypeScript 編寫 JSX，那麼它們會使用 ESBuild 進行轉換，速度相當快。

But the moment you want hot module replacement for React, now you need to use Babel because ESBuild does not support hot module replacement transforms.

但是，一旦你想對 React 進行熱模塊替換，現在就需要使用 Babel，因為 ESBuild 不支持熱模塊替換轉換。

So then Babel, again, made everything slow.

於是，巴別塔又一次讓一切變得緩慢。

So people also came up with an SWC version of the React plugin.

是以，人們還開發了一個 SWC 版本的 React 插件。

So you see the problem here is there are great tools out there, but some of them do this, some of them do that.

是以，你會發現問題所在，現在有很多很棒的工具，但其中有些會做這個，有些會做那個。

And now some of the things they both do, they decide to do them differently.

現在，他們都會做的一些事情，他們決定用不同的方式去做。

And that's the reality that we're kind of dealing with in a JavaScript tooling ecosystem.

這就是我們在 JavaScript 工具生態系統中所要面對的現實。

I'm pretty sure if you've worked with custom build stacks long enough, you understand what I'm saying, right?

我敢肯定，如果你使用自定義堆棧的時間足夠長，你就會明白我在說什麼，對嗎？

So in a lot of ways, the reason people love VEET is because we kind of hide this complexity away from them and try to give you a very smooth and consistent entry point so that you don't need to think about these things.

是以，從很多方面來看，人們之所以喜歡 VEET，是因為我們將這種複雜性隱藏起來，並試圖為您提供一個非常順暢和一致的切入點，這樣您就不需要考慮這些事情了。

But we're kind of, for me, I think we achieved this goal with the initial version of VEET, but long term wise, when people are starting putting more and more dependence on VEET, right, we've seen more and more frameworks moving over to use

對我來說，我認為我們通過 VEET 的初始版本實現了這一目標，但從長遠來看，當人們開始越來越依賴 VEET 時，我們已經看到越來越多的框架轉而使用 VEET。

VEET as the base layer, I kind of start to worry because I feel like, you know, the internal is not as pretty as it should be.

VEET 作為基礎層，我開始有點擔心，因為我覺得，你知道，內部並不那麼漂亮。

And we kind of just swept all the deeper problems under the rug and pretend everything is great.

我們把所有深層次的問題都掩蓋起來，假裝一切都很好。

So I guess deep down, you know, along with VEET's growth and adoption, I've always had this, like, inner urge to say, like, is it really up to the task of being the future of all these, like, next generation frameworks serving as the infrastructure?

是以，我想在內心深處，你知道，隨著 VEET 的發展和採用，我一直有這樣一種內心的衝動，比如說，它真的能勝任作為所有這些下一代框架基礎設施的未來任務嗎？

Will VEET be able to live up to that expectation?

And I don't think it will if we just keep using this sort of fragmented internals and try to stitch things together and smooth all of the inconsistencies.

我認為，如果我們繼續使用這種支離破碎的內部結構，並試圖將所有東西拼接在一起，消除所有不一致的地方，那是不可能的。

In a way, the tool chain we're building right now at Voice Zero is an attempt to kind of attack this problem more fundamentally.

從某種程度上說，我們現在在 "零點之聲 "建立的工具鏈就是試圖從根本上解決這個問題。

Let's say, like, if we want to solve all the problems we want to fix in VEET, what do we need? We need a bundler that actually is designed for it.

比方說，如果我們想解決我們想在 VEET 中解決的所有問題，我們需要什麼？我們需要一個真正為此而設計的捆綁程序。

And we need this bundler to be also built on top of a tool chain that can, you know, handle all the different concerns, like starting from the AST all the way to minification and production, bundling, right, through a consistent system.

我們需要這個捆綁程序建立在一個工具鏈之上，這個工具鏈可以處理所有不同的問題，比如從 AST 開始，一直到最小化、製作、捆綁，對吧，通過一個一致的系統。

And at the same time, we also want to make each part of this tool chain individually usable.

與此同時，我們還希望這個工具鏈的每個部分都能單獨使用。

So let's say you want to just take the parser and do something crazy with it.

比方說，你想利用解析器做些瘋狂的事情。

You can totally, you should be able to do that, right?

你完全可以，你應該可以做到，對嗎？

This tool chain, although it's unified and it's a coherent system, it should not be a black box, right?

這個工具鏈雖然是統一的，是一個連貫的系統，但它不應該是一個黑盒子，對嗎？

You should not have to say, like, you either take it all or you can never use it.

你不應該說，要麼全拿走，要麼就永遠用不上。

So I think that's, these are the two main premises that we're sort of centering the tool chain around is unification, but without sacrificing the ability to, of composability.

是以，我認為這是我們將工具鏈置於中心位置的兩個主要前提，即統一，但又不犧牲可組合性。

We'd like to stop and thank our sponsor for the week, Mux.

在此，我們要感謝本週的贊助商 Mux。

If you haven't heard of Mux, Mux is an awesome platform that makes adding video to your product easy as adding a few libraries.

如果你還沒聽說過 Mux，Mux 是一個非常棒的平臺，它能讓你輕鬆地為產品添加視頻，就像添加幾個庫一樣簡單。

If you never had to add video to a product, you don't know how many pits of failure there are, whether it's file formats, delivery, uploads, or even playback.

如果你從未在產品中添加過視頻，你就不會知道有多少失敗的隱患，無論是文件格式、傳輸、上傳，甚至是回放。

There's so much to worry about and so much that will bog your team down while trying to ship a stellar product.

有太多需要擔心的事情，有太多的事情會讓您的團隊在努力推出一流產品的同時陷入困境。

They have a set of APIs and components that make adding video playback to your app or platform super easy.

它們擁有一套 API 和組件，可讓您在應用程序或平臺中添加視頻播放功能變得超級簡單。

And since there are a bunch of experts that know video inside and out, they'll have so many different features that your team would never have the time to get to.

由於有一群對視頻瞭如指掌的專家，他們會提供許多不同的功能，而你的團隊根本沒有時間去了解這些功能。

One of those things being metrics, they have all sorts of different fancy metric dashboards to understand how people are consuming video in the apps that you ship.

其中之一就是衡量標準，他們有各種不同的花哨的衡量標準儀表板，可以瞭解人們是如何在您所提供的應用程序中消費視頻的。

Recently, they've been adding even more capabilities to their platform.

最近，他們正在為自己的平臺增加更多的功能。

Now you can see when viewers dropped from your videos, so you can gain better insight into how people are consuming those videos.

現在，您可以看到觀眾何時從您的視頻中退出，從而更好地瞭解人們是如何觀看這些視頻的。

So if you want to add video to your platform and you don't want to spend weeks to months doing it, head over to Mux.com.

是以，如果您想在自己的平臺上添加視頻，又不想花費數週至數月的時間，請訪問 Mux.com。

And with that, let's get back to the episode.

接下來，讓我們回到本期節目。

So you've been a independent developer for a while and probably one of the most successful, being able to work on a lot of open source projects and produce a lot of very successful open source projects while working mostly on your own.

你做獨立開發者已經有一段時間了，而且可能是最成功的獨立開發者之一，能夠參與很多開源項目，並開發出很多非常成功的開源項目，同時大部分工作都是自己完成的。

And now you're going this route of, so you've raised some VC, you're forming Void

而現在你要走的這條路是，你籌集了一些風險投資，你正在組建 Void

Zero, you have a few people coming to join you to like work on this ecosystem tooling.

總部，有幾個人要加入你們，一起研究這個生態系統工具。

So why did you decide to make that transition from independent developer to starting a company?

那麼，您為什麼決定從獨立開發者轉型為創辦公司呢？

And like, what about the timing or the circumstances made this a different choice?

比如，是什麼時機或環境讓你做出了不同的選擇？

So I think overall, I would actually consider myself a pretty risk averse person.

是以，我認為總的來說，我是一個非常厭惡風險的人。

Some of the biggest decisions I'd made in my life, I kind of feel like I just swinged it, but like going fully independent to work on Vue, I didn't really know what that would entail. Luckily, I think I built a lifestyle entrepreneurship, kind of lifestyle business thing around Vue.

我人生中做過的一些重大決定，我覺得我就這樣做了，但就像完全獨立去做 Vue，我真的不知道那會帶來什麼。幸運的是，我想我建立了一種生活方式創業，一種圍繞 Vue 的生活方式商業。

So that is enough to sort of support me and make my life sustainable.

是以，這足以支撐我的生活，使我的生活能夠持續下去。

So on top of that, right, I'm not starting a company because like, oh, we need to make more money. So that situation.

除此之外，我開公司不是因為我們需要賺更多的錢。所以這種情況。

It's more about starting the company is the more realistic way to essentially fulfill the vision that I'm trying to achieve.

更重要的是，創辦公司是實現我的願景的更現實的方式。

So it's also partly based on the experience of working as an independent developer.

是以，這部分也是基於獨立開發人員的工作經驗。

字幕列表影片播放

Evan You - Vue、Vite、VoidZero 和 JavaScript 工具的未來 (Evan You - Vue, Vite, VoidZero and the Future of JavaScript Tooling)

stuff

episode

sort

essentially