关于使用 esbuild 的一些笔记

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费积分!

这是 Julia Evans 写的一篇很棒的文章,关于与现代前端工具的较量。Julia 创建了许多 Vue 项目,并且通常根本不使用构建过程

我通常会有一个 index.html 文件,一个 script.js 文件,然后我会使用 <script src="script.js">,就是这样。

我认为这很棒,并且可能意味着这些项目将持续很长时间。但是,我理解人们希望转向一些更现代的开发工具,即使只是为了解锁整个 npm 生态系统。基本上,Julia 想做

import Vue from 'vue';

这直接意味着 npm 和打包器,因为这种语法是打包器特定的(它是无效的 ES 模块语法)。这过去几乎意味着 webpack、rollup 或 Parcel,但这种情况正在开始改变,并且 强烈建议使用 Vite

但 Julia 不想使用功能过于强大的工具()

但我停止使用这些工具,并回到了我旧的 <script src="script.js"> 系统,因为我不理解 vue-cli-servicevite 在做什么,并且我不确定自己是否能够在它们出现故障时修复它们。所以我宁愿坚持使用我真正理解的设置。

因此,由于 Vite 功能过于强大,Julia 选择了 esbuild。我不能说我完全理解细节,但 Vite 在内部使用 esbuild 来完成某些事情

Vite 使用 esbuild 而不是 Rollup 来进行依赖项预打包。这在冷服务器启动和依赖项失效时的重新打包方面带来了显著的性能提升。

因此,直接使用 esbuild 算是在复杂度阶梯上向下走了一步。

它非常接近于完美,但当然,前端生态系统的复杂本质再次出现了。esbuild 从 import Vue from 'vue'; 中获取的 Vue 的假设副本是 vue.runtime.esm.js,它是为在浏览器中运行而设计的 Vue 版本,而不是包含编译器的版本。Ughghk。感觉它们应该是两个独立的包或类似的东西。但 Julia 最终克服了这个问题,并且取得了胜利

我不理解 esbuild 做的所有事情,但它感觉比我以前使用过的基于 [webpack] 的工具更易于理解和透明。

所有这些都是我仍然看好 Skypack 的另一个原因。您可以 使用像这样的现代 import 语句,并且仍然不需要任何构建过程。

直达链接 →