fewuliu-CSDN博客

原创如何基于文档的内容实现 AI 对话功能，以 Documate 为例

在 ChatGPT 出现之时，社区内也出现过把 React 官方文档投喂给它，然后对它进行提问的实践。但是，由于每次 ChatGPT 对话能接受的文本内容对应的 Token 是有上限的，所以这种使用方式存在一定的手动操作成本和不能复用的问题。而Documate的出现则是通过工具链的集成，仅需使用 CLI 提供的命令和部署服务端的代码，就可以很轻松地实现上述的数据投喂模型 + 提问 ChatGPT 过程的自动化，让你的文档（VitePressDocusaurusDocsify）站点具备 AI 对话功能。

2024-02-04 08:12:19 1780 1

原创揭秘，Vue3 性能优化之 Non-reactive Object

在 Vue2 中，有一个老生常谈的话题，如何避免data中一个复杂对象（自身或属性对象）被默认被创建为响应式（Non-reactive Object）的过程？举个例子，有一个 Vue2 的组件的data：

2022-08-07 14:41:48 771

原创设置 NPM Registry 的 4 种姿势

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

2022-06-12 16:49:33 9717

原创 Vue3 Ref 语法糖，告别 .value 的写法

前言近期，Vue3 提了一个 Ref Sugar 的 RFC，即 ref 语法糖，目前还处理实验性的（Experimental）阶段。在 RFC 的动机（Motivation）中，Evan You 介绍到在 Composition API 引入后，一个主要未解决的问题是 refs 和 reactive 对象的使用。而到处使用 .value 可能会很麻烦，如果在没使用类型系统的情况下，也会很容易错过：let count = ref(1)function add() { count.value++}

2021-09-16 10:26:50 7315 7

原创从过去到现在，聊聊 Tree-shaking 到底是什么？

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

2021-08-11 10:03:43 459

原创 Vue 3 的 SFC Style CSS Variable Injection 提案实现的背后

前言在 5月22日的 Vue Conf 21 上，尤大介绍在介绍单文件组件（SFC）在编译阶段的优化的时候，讲了 SFC Style CSS Variable Injection 这个提案，即 <style> 动态变量注入。简单地讲，它可以让你在 <style> 中通过 v-bind 的方式使用 <script> 中定义好的变量。这么一听，似乎很像 CSS In JS？确实，从使用的角度是和 CSS In JS 很类似。但是，大家都知道的是 CSS In JS 在一些

2021-06-07 14:55:42 3233

原创 Esbuild 入口文件及启动过程｜源码解读

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

2021-05-10 09:24:56 1397

原创 Es-Module-Lexer，ES Module 语法的词法分析利器

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

2021-04-13 09:34:28 1955

原创 Charts.css 一个新的数据可视化框架，底层使用纯 CSS 实现

前言提到数据可视化框架，那可真的多的去了 Echarts、AntV、D3 等等。但是，这些数据可视化框架都有一个共性 ????，即它们的使用都脱离不开 JavaScript。相反地是，Charts.css 是一个用纯 CSS 实现的数据可视化框架，它的核心是把 table 标签的表现为柱形图、折线图、饼图等等。而 Charts.css 的使用非常简单，支持以下 2 种使用方式：在原生的网页项目中使用 link 标签引入 Charts.css 的文件，可以是 CDN 上的地址或者在 GitHub

2021-03-27 14:48:38 1225

原创刨根问底，揭开 Vue 中 Scope CSS 实现的幕后（原理）

前言我想大家都对 Vue 的 Scope CSS 耳熟能详了，但是说起 Vue 的 Scope CSS 实现的原理，很多人应该会说不就是给 HTML、CSS 添加属性吗 ????️？确实是这样的，不过这只是最终 Scope CSS 呈现的结果。而这个过程又是如何实现的？我想能回答上一二的同学应该不多。那么，回到今天本文，我将会围绕以下 3 点，和大家一起从 Vue 的 Scope CSS 的最终呈现结果出发，深入浅出一番其实现的底层原理：什么是 Scope CSSvue-loader 处理组件

2021-03-18 10:07:23 1877

原创使用 Verdaccio 搭建一个企业级私有 npm 库

前言私有 npm 库，我想是每个团队都会实践和经历的一个阶段。实现私有 npm 的方式有很多种，例如基于私有 Git 仓库、基于 npm 官方提供的私有功能（付费）、Verdaccio 等等。但是，综合比较各种因素下来（不要钱、还好用），Verdaccio 都略胜前面两者。那么，今天本文也将带着大家一起使用 Verdaccio 来搭建一个企业级私有 npm 库！一、安装、启动Verdaccio 的安装启动过程较为简单。首先是全局安装 Verdaccio：npm i -g verdaccio然后

2021-03-01 14:17:45 1522

原创 Vite 依赖预编译，缩短数倍的冷启动时间

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

2021-02-14 10:27:24 9366 1

原创通过 Vite 的 create-app 学习如何实现一个简易版 CLI

前言前段时间，尤雨溪回答了一个广大网友都好奇的一个问题：Vite 会不会取代 Vue CLI？答案是：是的！那么，你开始学 Vite 了吗？用过 Vite 的同学应该都熟悉，创建一个 Vite 的项目模版是通过 npm init @vitejs/app 的方式。而 npm init 命令是在 [email protected] 开始支持的，实际上它是先帮你安装 Vite 的 @vitejs/create-app 包（package），然后再执行 create-app 命令。至于 @vitejs/create-ap

2021-02-08 09:55:35 2811

原创 Vue 3 中 v-if 和 v-show 指令实现的原理（源码分析）

前言又回到了经典的一句话：“知其然，而后使其然”。相信大家对 Vue 提供 v-if 和 v-show 指令的使用以及对应场景应该都滚瓜烂熟了。但是，我想仍然会有很多同学对于 v-if 和 v-show 指令实现的原理存在知识空白。所以，今天就让我们来一起了解一番 v-if 和 v-show 指令实现的原理～v-if在之前【Vue3 源码解读】从编译过程，理解静态节点提升一文中，我给大家介绍了 Vue 3 的编译过程，即一个模版会经历 baseParse、transform、generate 这

2021-01-17 16:04:26 11901 2

原创【前端进阶】使用 Vue3 的 complier-core 玩转模版编译

前言 ????我是五柳，喜欢创新、捣鼓源码，专注于 Vue3 源码、Vite 源码、前端工程化等技术领域分享，欢迎关注我的「微信公众号：Code center」。近期，在团队内推自动化表单，主要是为了去掉后台项目中繁多的表单代码。众所周知，表单一直都是后台代码的一个痛点，因为它的代码就是一个字 “长”…所以，作为一名 21 世纪的前端工程师，我们要时刻反省如何提效（能不写代码就不写代码）。自动化表单的主要设计理念是围绕一个渲染器，通过配置对象来生成对应的表单。那么，这个时候就遇到了一个问题，对象和

2020-11-10 22:34:05 2207

原创 vite 不支持 ie 11？configureBuild Hook 帮你定制 bundle 打包过程

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

2020-10-31 12:18:07 7260 2

原创下一个时代的打包工具 esbuild

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

2020-10-17 08:19:43 8577 1

原创如何实现一个 Webpack 的 Bundler 打包机制？

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

2020-10-04 22:57:27 409

原创深度解读 Vue3 源码 | 组件创建过程

前言在「Vue3」中，创建一个组件实例由 createApp 「API」完成。创建完一个组件实例，我们需要调用 mount() 方法将组件实例挂载到页面中：createApp({ ...}).mount("#app");在源码中整个组件的创建过程:mountComponent() 实现的核心是 setupComponent()，它可以分为两个过程：开始安装，它会初始化 props、slots、调用 setup()、验证组件和指令的合理性。结束安装，它会初始化 computed、

2020-10-03 18:43:41 1488

原创深度解读 Vue3 源码 | 内置组件 teleport 是什么“来头”？

前言上一篇文章，我们讲了「Vue3」 runtime 和 compile 结合的 patch 过程。似乎，由于文章内容太过晦涩的原因，并没有收到很多同学的反馈。但是，其实这里我想说的是源码就是这样，初见时如陌生人一般，再见时如初恋，既熟悉又怀念。所以，这一篇文章，我打算讲个「Vue3」中轻松愉快的设计点——内置组件 teleport。那么，这次我们将会从使用角度和源码角度去深入了解 teleport 组件是如何实现的？什么是 teleport 组件当然，如果已经懂得怎么使用 teleport 组件

2020-09-27 02:32:06 998 1

原创揭秘，Vue3 compile 和 runtime 结合的 patch 过程（源码分析）

前言在上一篇文章中，我们分析了在编译过程静态节点的提升。并且，在文章的结尾也说了，下一篇文章将会介绍 patch 过程。说起「Vue3」的 patch 过程，其中最为津津乐道的就是靶向更新。靶向更新，顾名思义，即更新的过程是带有目标性的、直接性的。而，这也是和静态节点提升一样，是「Vue3」针对 VNode 更新性能问题的一大优化。那么，今天，我们就来揭秘「Vue3」compile 和 runtime 结合的 patch过程究竟是如何实现的！什么是 shapeFlag说起「Vue3」的 patc

2020-09-24 12:45:12 1089

原创从编译过程，理解 Vue3 静态节点提升过程（源码分析）

前言静态节点提升是「Vue3」针对 VNode 更新过程性能问题而提出的一个优化点。众所周知，在大型应用场景下，「Vue2.x」的 patchVNode 过程，即 diff 过程是非常缓慢的，这是一个十分令人头疼的问题。虽然，对于面试常问的 diff 过程在一定程度上是减少了对 DOM 的直接操作。但是，这个减少是有一定成本的。因为，如果是复杂应用，那么就会存在父子关系非常复杂的 VNode，而这也就是 diff 的痛点，它会不断地递归调用 patchVNode，不断堆叠而成的几毫秒，最终就会造成 VN

2020-09-20 12:38:38 1438

原创详解，从后端导出文件到前端（Blob）下载过程

前言对于不是从事音视频方面的同学来说，很多情况下都是通过 window.location.href 来下载文件。这种方式，一般是前后端的登录态是基于 Cookie + Session 的方式，由于浏览器默认会将本地的 cookie 塞到 HTTP 请求首部字段的 Set-Cookie 中，从而实现来带用户的 SessionId，所以，我们也就可以用 window.location.href 来打开一个链接下载文件。当然，还有一种情况，不需要登录态的校验（比较che）。众所周知，还有另一种登录态的处

2020-08-25 21:05:48 5556 4

原创 TypeScript 高级类型，你了解几个？

前言不可否认，如今 TypeScript 已成为一个前端工程师的所需要具备的基本技能。严谨的类型检测，一方面是提高了程序的可维护性和健壮性，另一方面也在潜移默化地提高我们的编程思维，即逻辑性。那么，今天我将会通过结合实际开发场景和 Vue 3.0 源码中的部分类型定义来简单聊聊 TypeScript 中的高级类型。interfaceinterface 被用于对所有具有结构的数据进行类型检测。例如，在实际开发当中，我们会定义一些对象或数组来描述一些视图结构。定义对象常见的有对表格的列的定义：c

2020-08-19 23:48:26 717

原创从零到一，带你彻底搞懂 vite 中的 HMR 原理（源码分析）

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

2020-07-17 23:35:23 9056 1

原创作为前端，你需要知道 RxJS（响应式编程-流）

前言说起「响应式编程」，大家可能并不陌生。但是，直接说「流」这个名称，可能大家会有点愣。「流」的本质和「响应式编程」并不二般，都是衍生于前端经典的设计模式——「观察者订阅模式」。但是，在一定程度上，可以说「流」则是基于这个模式的一个上层抽象，因为它所具备的能力更多、更加强大。在我的认知里面，我又给「流」划分了一下，「玄学」。而在我们平常开发中，使用「观察者订阅模式」最经典的就是「Vue」。其中，一方面在「Vue」2x 版本中对应的就是基于 Object.defineProperty() 实现的一.

2020-06-25 22:45:21 1154

原创 Vue 中作用域 CSS 的那点事

前言首先，我们来回忆一下「CSS 作用域」这一概念，它的本质是通过让每一个选择器成为一个「unique」的存在，这样就自然而然地形成了作用域。而提到「Vue」中「作用域 CSS」，我想大家应该立即想到以 scoped 的方式形成的带有作用域的 css。但是，值得一提的是，在「Vue」中还支持了一种「作用域 CSS」，即「CSS Module」。提及「CSS Module」，想必大家会有点陌生，相信有很多同学在平常开发中都是用 scoped 来实现「Vue」组件中的「作用域CSS」。所以，今天我们就

2020-06-21 12:45:57 535

空空如也

空空如也