五柳

前段时间，由于团队使用的 Monorepo 工程使用的工具是 Lerna，所以在思考如何改造的问题，最终整体的技术选型是 PNPM + Changeset + Turborepo。相应地，就需要在这个选型的背景下支持原先使用到的 Lerna 的能力。其中，比较有意思的就是需要把 Package 发布到私有 Registry。因为，这里选择了 ，所以最后执行发布的命令会是：那这个时候，就牵扯到一个问题，项目中的私有 Registry 要配置在哪？这里我们不着急找答案，先来了解一下配置私有 Registry

前言Tree-shaking 这一术语在前端社区内，起初是 Rich Harris 在 Rollup 中提出。简单概括起来，Tree-shaking 可以使得项目最终构建（Bundle）结果中只包含你实际需要的代码。而且，说到 Tree-shaking，不难免提及 Dead Code Elimination，相信很多同学在一些关于 Tree-shaking 的文章中都会看到诸如这样的描述：Tree-shaking 是一项 Dead Code Elimination（以下统称 DCE）技术。那么，既然

前言又回到了经典的一句话：“先知其然，而后使其然”。相信很多同学都知道了 esbuild，其以飞快的构建速度闻名于众。并且，esbuild 作者 Evan Wallace 也在官网的 FAQ专门介绍了为什么 esbuild 会这么快？（有兴趣的同学可以自行了解 https://esbuild.github.io/faq/）那么，回到今天本文，将会从 esbuild 源码的目录结构入手，围绕以下 2 点和大家一起走进 esbuild 底层的世界：初识 Esbuild 构建的入口Esbuild 构建的

前言说到词法分析，我想很多同学第一时间想到的可能是 Babel、Acorn 等工具。不可否认，它们都很强大 ????。但是，具体到今天这个话题 ES Module 语句的词法分析而言，es-module-lexer 会胜过它们很多！那么，今天我们将围绕以下 2 点，深入浅出一番 es-module-lexer：认识 es-module-lexer实际场景下如何应用 es-module-lexer1 认识 es-module-lexeres-module-lexer 是一个可以对 ES Mo

前言前段时间，Vite 做了一个优化依赖预编译（Dependency Pre-Bundling）。简而言之，它指的是 Vite 会在 DevServer 启动前对需要预编译的依赖进行编译，然后在分析模块的导入（import）时会动态地应用编译过的依赖。这么一说，我想大家可能立马会抛出一个疑问：Vite 不是 No Bundle 吗？确实 Vite 是 No Bundle，但是依赖预编译并不是意味着 Vite 要走向 Bundle，我们不要急着下定义，因为它的存在必然是有着其实际的价值。那么，今天本文将

前言在5 分钟带你快速读懂 vite 打包过程，源码分析一文中，我们介绍了 vite 打包的代码转化是通过 esbuild 来完成的。而 esbuild 是不支持 ie11 的。所以 vite 的 GitHub 上经常会出现一些 issue 问如何支持 ie11，例如下面这个 issue：在这个 issue 下，vite 的几位 contributor 分别讲了几种支持 ie11 的解法：undefin 大佬：我没有这样测过，似乎你需要在 rollupOptions 中添加 babel/polyfi

前言关注「Vite」底层实现的同学，我想应该清楚它使用「esbuild」来实现对 .ts、jsx、.js 代码的转化。当然，在「Vite」之前更早使用「esbuild」的就是「Snowpack」。不过，相比较「Vite」拥有的巨大社区，显然「Snowpack」的关注度较小。「Vite」的核心是基于浏览器原生的 ES Module。但是，相比较传统的打包工具和开发工具而言，它做出了很多改变，采用「esbuild」来支持 .ts、jsx、.js 代码的转化就是其中之一。那么，接下来我们就步入今天的正题，W

前言我想这两年，应该是「Webpack」受冲击最明显的时间段。前有「Snowpack」基于浏览器原生ES Module 提出，后有「Vite」站在「Vue3」肩膀上的迅猛发展，真的是后浪推前浪，前浪…并且，「Vite」主推的实现技术不是一点点新，典型的一点使用「esbuild」来充当「TypeScript」的解释器，这一点是和目前社区内绝大多数打包工具是不同的。在下一篇文章，我将会介绍什么是「esbuild」，以及其带来的价值。但是，虽说后浪确实很强，不过起码近两年来看「Webpack」所处的地

前言距离尤大大在微博宣布「vite」的出现，不知不觉间已经过了 2 个月多。当时，「vite」只是支持对 .vue 文件的即时编译和 import 的 rewrite，相应地「Plugin」也没有几个。并且，最初在「GitHub」上「vite」的 slogan 是这样的：—— No-bundle Dev Server for Vue 3 Single-File Components.可以看到，起初介绍「vite」是一个不需要打包的开发阶段的服务器。但是，现在再回首，这句 slogan 已经消失了，

引言其实，相信很多只是从事快速应用开发的同学，对于 Webpack打包优化方面可能是一知半解（我深有感触…）。但是，作为一名从事编程的人，我一直推崇的就是用编程高效、快速解决一些问题。因为，如果只是解决问题，我想这不是我想要的，就比如只会迭代不会递归，以及还停留在 console.log调试代码等等。当然，人总是从未知向知一点到知一些到构建完整的知识体系过渡，只要坚持，未知终将变为已知。那么，...

引言早期很多时候看 webpack，都是局限于看看基础的配置，例如 entry、ouput、rules 等等，自己着手配置也仅仅只是 less-loader 之类的。所以，作为前端求学者，从今天起，开始探索 webpack 奇妙的世界，有兴趣的同学可以一起坚持学习。项目准备初始化一个基础项目 npm init创建最基础的几个文件用于后续构建使用 |-- node_module...