- Next generation frontend tooling with ViteJS ✨ Open Source Friday ✨
- 【 原 文 】 Next generation of front end tool ViteJS Chinese English bilingual subtitles – Open Source Friday
- 【 原 文 】 Next generation of front end tool ViteJS Chinese English bilingual subtitles – Open Source Friday
- English subtitles: listen to translation, YouTube automatic subtitles
- English proofread, translation: Ivocin
- Video subtitles address: vite-open-source-Friday
- ViteJS is the next generation of front end tools
About Vite, let’s see what the author has to say. This is a live video of Vue and Vite writer Yu Yuxi appearing on Twitch on February 12, 2021 on GitHub Open Source Friday. In the video, you have a detailed description of the functions of Vite, online coding, online Debug, diss Webpack and the philosophy of Vite. This video is very long, close to 70 minutes, here are the excerpts, you can choose the point of interest to send your own. I strongly encourage you to watch the video, there’s a lot of detail in it and I think you’ll find it interesting. ViteJS is the next generation of front end tools — Open Source Friday
The pronunciation of Vite
Video feed – 1:18
Soul interrogation on Vite pronunciation: Since Vite is pronounced in French, why not Vue? (Probably because of the French pronunciation). You tell us, read as the author says.
Personally, I think Vue and Vite’s documents can be a conscience. First of all, they explain the pronunciation of their names, so that developers around the world can understand them. Let’s look at Svelte. Let’s forget the pronunciation. I still can’t remember the spelling.
What is the Vite
Video feed. – 2:33
“It’s hard to describe what Vite is in one sentence,” he said. The main reason for this is probably that it consists of two parts, an ESM-based development server using esBuild and a configured wrapper based on Rollup. Of course there are many other powerful features, but it’s more than a sentence. The closest thing to Vite on the market is Parcel, says Yuda, but the implementation is completely different.
Why does Vite appear at this moment
Video feed – 4:53
The underlying reason is that most modern browsers (with the exception of IE 11) already have good support for native ES modules, and new versions of Node also support ESM. The ESM could finally take over in the near future. The original is incense.
Start the Demo
Video feed – 7:05
Create a Vite project demo from 0 without using @vitejs/create-app.
The entry file isindex.html
Video feed – 14:25
Vite is Opinionated
Video feed – 17:08
Highlighting, Vite is Opinionated, and this is shown several times in the video.
In fact, opinionated is originally a derogatory term, which means opinionated. However, in the field of computer science, opinionated has become an absolute positive term. The so-called opinionated tool ensures ease of use through engagement and provides configuration to ensure that flexibility is not lost. A number of best practices are built into Vite, eliminating cumbersome configuration and ensuring that features commonly used by front-end developers are available right out of the box.
For the Opinionated translation method, please refer to the discussion of a PR of the Excavation Translation Project and a PR of the Vite Chinese document.
So here’s the question: list a few apps that are opinionated and Unopinionated. “Opinionated”, “Vite”, “Prettier”, “Unopinionated”, for example webpack. “Unopinionated” is not a good word to say in an official document.
This paragraph is about webpack, see how the big guy diss webpack:
Will Vue CLI migrate to Vite
Video feed – 23:56
Not yet, it’s still Webpack-based, but it will definitely migrate to Vite eventually.
Vite is framework-independent
Video feed. – 25:43
Vite provides a very well defined JavaScript API that can be used at a higher level, such as VitePress, which is the twin of VuePress and is built on Vite.
Tailwind CSS + Vite combat
Video feed – 27:07
You write Tailwind code online.
Evan You need to debug, too.
Vite + React actual combat
Video feed – 35:30
Host jokes, we watch youyuxi online write React!
About Esbuild — “fast” is just one word
Video transmission – 38:24
Esbuild is why Vite is so fast, it is 20-30 times faster than traditional TSC. Vite prepackages with ESbuild instead of Rollup, which is also very fast.
Here you reveal his work computer, the Mac Book Pro with THE ARM architecture with the M1 chip. Unfortunately, the ESBuild at that time did not support ARM architecture, but the latest version of Go does. A few days later, esBuild released a version that supports the M1 chip, and You tested it first:
DX is what
Video feed – 47:36
In the process of video translation, I heard You say the word DX. Because I didn’t know what it meant, I listened to it many times. Later, Google found out that DX originally means “Developer Experience”. What Is DX? (Developer Experience).
Vite takes advantage of its fast nature to dramatically improve the experience for developers, and Youda says he’s like a spoiled child. He can’t bear to start a project for more than a second.
About the SSR
Video feed – 52:20
SSR is currently in the experimental stage, see the official website documentation.
About the HMR
Video feed – 57:59
Vite really solves the problem of HMR speed versus slowing down as applications get larger.
Why not use esbuild in production mode, isn’t it faster?
Video feed – 65:31
I’d love to, but ESBuild currently doesn’t have robust support for production packages, and many configurations can’t be implemented with ESBuild. So for now, Rollup is a good choice, although it’s much slower than esbuild.
In addition, esbuild can be used as a compressor instead of terser (see build.minify). This will be faster, but the package size may increase by 5%-10%, depending on the user.
Afterword.
It’s been a long time since I did this big video translation. The last time I did it was React Conf 2018. Starting from the Spring Festival holiday on February 15, the time after the start of the work is relatively small, on and off for more than three weeks. Thanks to GitHub’s automatic captioning feature, the Twitch videos were uploaded to YouTube after they failed, saving a lot of time. It’s true that YouTube is more capable of speech-to-text. This video has been reuploaded with external subtitles, subtitles address: vite-open-source-Friday, if you have any questions, please feel free to pr. I hope this video helped you.
This article is participating in the “Gold mining March pass activity”, click to see the details of the activity.