前端工程化

前言 对于 macOS App 开发者来说，我们通常情况下可能会选择在网络上分发 App。但是，站在使用者的角度，如果下载的 App 没有经过 Apple Notary Service 公证（Nota

前言 在维护 Jenkins Slave Node（这里指 macOS 构建机）的过程，不可避免地是你会遇到一些文件访问权限和进程常驻的问题。所以，如果要解决这些问题，就要求你了解 Linux 文件访

前言 在前面「macOS App 自动化分发 App Store 探索与实践」和 「一文带你读懂何为 macOS App 公证以及如何自动化实现」2 篇文章中，分别给大家介绍了 macOS 分发自动化

前言 提及自动化一词，我想很多同学会想到 CI/CD，这 2 者之间确实是存在一定的联系，可以简单理解成父、子集合之间的关系。 而正如文章标题所言，近期我在研究 macOS App 自动化分发 App

相信很多关注 Monorepo 生态的同学，应该大都看过这篇文章 monorepo.tools，其中列举了现存的几个主流的 Monorepo 相关的工具： Bazel (by Google) L

前段时间，由于团队使用的 Monorepo 工程使用的工具是 Lerna，所以在思考如何改造的问题，最终整体的技术选型是 PNPM + Changeset + Turborepo。相应地，就需要

前言 Tree-shaking 这一术语在前端社区内，起初是 Rich Harris 在 Rollup 中提出。简单概括起来，Tree-shaking 可以使得项目最终构建（Bundle）结果中只包含

在 5月22日的 Vue Conf 21 上，尤大在介绍单文件组件（SFC）在编译阶段的优化的时候，讲了 SFC Style CSS Variable Injection 这个提案，即 <s

说到词法分析，我想很多同学第一时间想到的可能是 Babel、Acorn 等工具。不可否认，它们都很强大 😶。 es-module-lexer 是一个可以对 ES Module 进行「词法分析」的工具包。 它压缩后之后只有 4KiB，其底层通过内联（Inline） Web As…

随着 Vite 2.0 的发布，其底层的设计也不断地被大家所认知。其中，大家十分津津乐道的就是采用 ESBuild 来做 Dev 环境下的代码转换（快到飞起 😲）。 与此同时，这也给 ESBuild 带来了很多曝光。并且，esbuild 生态也陆续出现了一些插件（Plugin…

确实是这样的，不过这只是最终 Scope CSS 呈现的结果。而这个过程又是如何实现的？我想能回答上一二的同学应该不多。 Scope CSS 即作用域 CSS，组件化所密不可分的一部分。Scope CSS 使得我们可以在各组件中定义的 CSS 不产生污染。例如，我们在 Vue …

私有 npm 库，我想是每个团队都会实践和经历的一个阶段。实现私有 npm 的方式有很多种，例如基于私有 Git 仓库、基于 npm 官方提供的私有功能（付费）、Verdaccio 等等。但是，综合比较各种因素下来（不要钱、还好用），Verdaccio 都略胜前面两者。 Ver…

前段时间，Vite 做了一个优化依赖预构建（Dependency Pre-Bundling）。简而言之，它指的是 Vite 会在 DevServer 启动前对需要预构建的依赖进行构建，然后在分析模块的导入（import）时会动态地应用构建过的依赖。 这么一说，我想大家可能立马会…

那么，你开始学 Vite 了吗？用过 Vite 的同学应该都熟悉，创建一个 Vite 的项目模版是通过 npm init @vitejs/app 的方式。而 npm init 命令是在 npm@6.1.0 开始支持的，实际上它是先帮你安装 Vite 的 @vitejs/crea…

前天（周日），写了一个 webpack-loader，auto-inject-async-catch-loader，晚上 8 点多发的 npm 包。昨天早上，上 npm 官网一看，才十几个小时下载量 282 次（着实有点意外😯）～ 在之前，我写过一篇文章《现场教学，优雅地处理…

在5 分钟带你快速读懂 vite 打包过程，源码分析一文中，我们介绍了 vite 打包的代码转化是通过 esbuild 来完成的。而 esbuild 是不支持 ie11 的。所以 vite 的 GitHub 上经常会出现一些 issue 问如何支持 ie11，例如下面这个 is…

在下一个时代的打包工具 esbuild 中，我给大家介绍了什么是「esbuild」，以及如何使用它实现一个 bundle 打包。今天，在这个特别的节日（1024），我拎出了「vite」打包实现的核心逻辑，分别进行图解和代码分析，目标只有一个： 当我们需要打包基于「vite」的项…

关注「Vite」底层实现的同学，我想应该清楚它使用「esbuild」来实现对 .ts、jsx、.js 代码的转化。当然，在「Vite」之前更早使用「esbuild」的就是「Snowpack」。不过，相比较「Vite」拥有的巨大社区，显然「Snowpack」的关注度较小。 「Vi…

使用 errorCaptured 来调用 async 函数。 使用 plugin 或 loader 在打包的时候统一包裹 try catch。 相比较这两者，显然后者更好，因为它甚至连 errorCaptured 都不需要写。但是，实际中，使用 loader 并不是这么简单，例…

我想这两年，应该是「Webpack」受冲击最明显的时间段。前有「Snowpack」基于浏览器原生ES Module 提出，后有「Vite」站在「Vue3」肩膀上的迅猛发展，真的是后浪推前浪，前浪.... 并且，「Vite」主推的实现技术「不是一点点新」，典型的一点使用「esbu…