fix: update

docs/20.学习笔记/01.前端基础建设与架构 30 讲/-01.导读 前端技术发展回顾和架构升级之路.md

@@ -1,3 +1,13 @@
+---
+title: 导读  前端技术发展回顾和架构升级之路
+date: 2024-04-07 10:05:11
+permalink: /pages/eee6d0410e874/
+categories:
+  - 学习笔记
+  - 前端基础建设与架构 30 讲
+tags:
+  - 
+---
 <p data-nodeid="25200" class="">这一讲我将从整体上梳理前端开发的演进历史，并从渲染方案架构升级的案例出发，带你了解现代化开发的方向。这部分内容并不涉及具体技术细节，更多的是作为本专栏的导读，带你体会现代化前端架构和基建的背景以及目前前端开发的大环境。</p>
 <h3 data-nodeid="25201">前端技术发展轨迹</h3>
 <p data-nodeid="25202">过去十多年，前端技术发展日新月异，互联网风口也从 PC 时代过渡到移动时代甚至智能时代。其间，前端岗位从无到有，再到如今扮演了至关重要的角色。相应地，前端基建和架构也慢慢浮出水面，呈现百花齐放的场景，技术环节自然也愈发复杂。</p>

docs/20.学习笔记/01.前端基础建设与架构 30 讲/00.开篇词 像架构师一样思考，突破技术成长瓶颈.md

@@ -1,3 +1,13 @@
+---
+title: 开篇词  像架构师一样思考，突破技术成长瓶颈
+date: 2024-04-07 09:56:20
+permalink: /pages/664ab7712895e/
+categories:
+  - 学习笔记
+  - 前端基础建设与架构 30 讲
+tags:
+  - 
+---
 # 前端技术学习路线图（来源：<https://github.com/kamranahmedse/developer-roadmap）>
 
 ## 我理解的“前端工程化基建和架构设计”

docs/20.学习笔记/01.前端基础建设与架构 30 讲/01.npm 安装机制及企业级部署私服原理.md

@@ -1,3 +1,13 @@
+---
+title: npm 安装机制及企业级部署私服原理
+date: 2024-04-07 09:56:20
+permalink: /pages/49cd9ababc9a1/
+categories:
+  - 学习笔记
+  - 前端基础建设与架构 30 讲
+tags:
+  - 
+---
 <p data-nodeid="19802" class="">前端工程化离不开 npm（node package manager） 或者 Yarn 这些管理工具。npm 或 Yarn 在工程项目中，除了负责依赖的安装和维护以外，还能通过 npm scripts 串联起各个职能部分，让独立的环节自动运转起来。</p>
 <p data-nodeid="19803">无论是 npm 还是 Yarn，它们的体系都非常庞大，在使用过程中你很可能产生如下疑问：</p>
 <ul data-nodeid="19804">

docs/20.学习笔记/01.前端基础建设与架构 30 讲/02.Yarn 的安装理念及如何破解依赖管理困境.md

@@ -1,3 +1,13 @@
+---
+title: Yarn 的安装理念及如何破解依赖管理困境
+date: 2024-04-07 09:56:20
+permalink: /pages/09fbf8a1156b8/
+categories:
+  - 学习笔记
+  - 前端基础建设与架构 30 讲
+tags:
+  - 
+---
 <p data-nodeid="1645" class="">01 讲我们讲了 npm 的技巧和原理，但其实在前端工程化这个主题上除了 npm，还有不可忽视的 Yarn。</p>
 <p data-nodeid="1646">Yarn 是一个由 Facebook、Google、Exponent 和 Tilde 构建的新的 JavaScript 包管理器。它的出现是为了解决历史上 npm 的某些不足（比如 npm 对于依赖的完整性和一致性保障，以及 npm 安装速度过慢的问题等），虽然 npm 目前经过版本迭代汲取了 Yarn 一些优势特点（比如一致性安装校验算法等），但我们依然有必要关注 Yarn 的思想和理念。</p>
 <p data-nodeid="1647">Yarn 和 npm 的关系，有点像当年的 Io.js 和 Node.js，殊途同归，都是为了进一步解放和优化生产力。这里需要说明的是，<strong data-nodeid="1782">不管是哪种工具，你应该做的就是全面了解其思想，优劣胸中有数，这样才能驾驭它，为自己的项目架构服务</strong>。</p>

docs/20.学习笔记/01.前端基础建设与架构 30 讲/03.CI 环境上的 npm 优化及更多工程化问题解析.md

@@ -1,3 +1,13 @@
+---
+title: CI 环境上的 npm 优化及更多工程化问题解析
+date: 2024-04-07 09:56:20
+permalink: /pages/10f2ebc91b73c/
+categories:
+  - 学习笔记
+  - 前端基础建设与架构 30 讲
+tags:
+  - 
+---
 <p data-nodeid="1701" class="">前两讲，我们围绕着 npm 和 Yarn 的核心原理展开了讲解，实际上 npm 和 Yarn 涉及项目的方方面面，加之本身设计复杂度较高，这一讲我将继续讲解 CI 环境上的 npm 优化以及更多工程化相关问题。希望通过这一讲的学习你能够学习到 CI 环境上使用包管理工具的方方面面，并能够解决非本地环境下（一般是在容器上）使用包管理工具解决相关问题。</p>
 <h3 data-nodeid="1702">CI 环境上的 npm 优化</h3>
 <p data-nodeid="1703">CI 环境下的 npm 配置和开发者本地 npm 操作有些许不同，接下来我们一起看看 CI 环境上的 npm 相关优化。</p>

docs/20.学习笔记/01.前端基础建设与架构 30 讲/04.横向对比主流构建工具，了解构建工具的设计考量.md

@@ -1,3 +1,13 @@
+---
+title: 横向对比主流构建工具，了解构建工具的设计考量
+date: 2024-04-07 09:56:20
+permalink: /pages/245300f457539/
+categories:
+  - 学习笔记
+  - 前端基础建设与架构 30 讲
+tags:
+  - 
+---
 <p data-nodeid="1033" class="">现代化前端架构离不开构建工具的加持。构建工具的选择、理解和应用决定了是否能够打造一个流畅且接近完美的开发体验。这一讲，我们通过“横向对比构建工具”这个非常新颖的角度，来了解构建工具背后的架构理念。</p>
 <p data-nodeid="1034">提到构建工具，作为经验丰富的前端开发者，相信你能列举出不同时代的代表：从 Browserify + Gulp 到 Parcel，从 Webpack 到 Rollup，甚至尤雨溪最近编写的 Vite，相信你也并不陌生。没错，前端发展到现在，构建工具琳琅满目，且已经成熟稳定下来。但这些构建工具的实现和设计非常复杂，甚至出现了“面向构建工具编程”的调侃。</p>
 <p data-nodeid="1035">事实上，能够熟悉并精通构建工具的开发者凤毛麟角。请注意，<strong data-nodeid="1116">这里的“熟悉并精通”并不是要求你对不同构建工具的配置项目如数家珍，而是真正能把握构建流程</strong>。在“6 个月就会出现一批新的技术潮流”的前端领域，能始终把握构建工具的奥秘——这也是区分资深架构师和程序员的一个重要标志。</p>

docs/20.学习笔记/01.前端基础建设与架构 30 讲/05.Vite 实现：从源码分析出发，构建 bundlele 开发工程.md

@@ -1,3 +1,13 @@
+---
+title: Vite 实现：从源码分析出发，构建 bundlele 开发工程
+date: 2024-04-07 09:56:20
+permalink: /pages/a094da54e65f/
+categories:
+  - 学习笔记
+  - 前端基础建设与架构 30 讲
+tags:
+  - 
+---
 <p data-nodeid="39436" class="">通过上一讲的内容，相信你已经了解了现代化构建流程和处理内容。这一讲，我将结合 Webpack 为主的成熟方案现阶段的“不足”，从源码实现角度带你分析 Vite 的设计哲学，同时为“解析 Webpack 源码，实现自己的构建工具”一讲内容打下基础，循序渐进，最终你将能够开发一个自己的构建工具。</p>
 <h3 data-nodeid="39437">Vite 的“横空出世”</h3>
 <p data-nodeid="39438">Vite 是由 Vue 作者尤雨溪开发的 Web 开发工具，尤雨溪在微博上推广时对 Vite 做了简短介绍：</p>

docs/20.学习笔记/01.前端基础建设与架构 30 讲/06.core-j 及垫片理念：设计一个“最完美”的 Polyfill 方案.md

@@ -1,3 +1,13 @@
+---
+title: core-j 及垫片理念：设计一个“最完美”的 Polyfill 方案
+date: 2024-04-07 09:56:20
+permalink: /pages/3bbfdc8e7cf4/
+categories:
+  - 学习笔记
+  - 前端基础建设与架构 30 讲
+tags:
+  - 
+---
 <p data-nodeid="1485" class="">即便你不知道 <a href="https://github.com/zloirock/core-js" data-nodeid="1597">core-js</a>，也一定在项目中直接或间接地使用过它。core-js 是一个 JavaScript 标准库，它包含了 ECMAScript 2020 在内的多项特性的 polyfills，以及 ECMAScript 在 proposals 阶段的特性、WHATWG/W3C 新特性等。因此它是一个现代化前端项目的“标准套件”。</p>
 <p data-nodeid="1486">除了 core-js 本身的重要性，它的实现理念、设计方式都值得我们学习。事实上，core-js 是一扇大门：</p>
 <ul data-nodeid="1487">

docs/20.学习笔记/01.前端基础建设与架构 30 讲/07.梳理混乱的 Babel，不再被编译报错困扰.md

@@ -1,3 +1,13 @@
+---
+title: 梳理混乱的 Babel，不再被编译报错困扰
+date: 2024-04-07 09:56:20
+permalink: /pages/a0e586d6898f9/
+categories:
+  - 学习笔记
+  - 前端基础建设与架构 30 讲
+tags:
+  - 
+---
 <p data-nodeid="21749" class="">今天我和你分享的话题和 Babel 相关。Babel 在前端中占有举足轻重的历史地位，几乎所有的大型前端应用项目都离不开 Babel 的支持。同时，Babel 不仅仅是一个工具，更是一个<strong data-nodeid="21755">工具链（toolchain）</strong>，是前端基建中绝对重要的一环。</p>
 
 

docs/20.学习笔记/01.前端基础建设与架构 30 讲/08.探索前端工具链生态，制定一个统一标准化 babel-preet.md

@@ -1,3 +1,13 @@
+---
+title: 探索前端工具链生态，制定一个统一标准化 babel-preet
+date: 2024-04-07 09:56:20
+permalink: /pages/3caede772e761/
+categories:
+  - 学习笔记
+  - 前端基础建设与架构 30 讲
+tags:
+  - 
+---
 <p data-nodeid="7591" class="">前端生态有着与生俱来的混乱和与之抗衡的秩序，有着新生力量的崛起以及随之而来的规范约束。在这个背景下，正面来看，欣欣向荣的前端生态带来了广阔的发展前景，但也造成了一些困扰。比如，我们都经历过在前端基础设施建设中，被各种冗杂的配置项困扰，一不小心就是 Error，步履蹒跚。也许我们可以通过搜索引擎暂时解决问题，但是恍恍惚惚、难以洞悉问题本源。</p>
 <p data-nodeid="7592">另一方面，前端生态的重要一环是公共库。公共库的模块化规范、编译标准，甚至压缩方式都有讲究，同时公共库与使用它们的业务项目也要密切配合，这样才能打造一个顺滑的基建结果。请你仔细审视手上的项目，编译构建过程是否做到了最高效，产出代码是否达到了最高级别的安全保障，是否做到了性能体验的最佳实践？</p>
 <p data-nodeid="7593">这一讲，就让我们从公共库的角度出发，梳理当前前端生态，最终还原一个趋近完美的公共库设计标准。</p>

docs/20.学习笔记/01.前端基础建设与架构 30 讲/09.从实战出发，从 0 到 1 构建一个符合标准的公共库.md

@@ -1,3 +1,13 @@
+---
+title: 从实战出发，从 0 到 1 构建一个符合标准的公共库
+date: 2024-04-07 09:56:20
+permalink: /pages/4dbb987bcfc5f/
+categories:
+  - 学习笔记
+  - 前端基础建设与架构 30 讲
+tags:
+  - 
+---
 <p data-nodeid="1489" class="">上一讲我们从 Babel 编译预设的角度理清了前端生态中的公共库和应用的丝缕关联，这一讲我们就从实战出发，动手剖析一个公共库从设计到完成的过程。</p>
 <p data-nodeid="1490">（源码出处：<a href="https://github.com/intricatecloud/reusable-js-demo" data-nodeid="1608">Creating a simple npm library to use in and out of the browser）</a></p>
 <h3 data-nodeid="1491">实战打造一个公共库</h3>

docs/20.学习笔记/01.前端基础建设与架构 30 讲/10.代码拆分和按需加载：缩减 bundle ize，把性能做到极致.md

@@ -1,3 +1,13 @@
+---
+title: 代码拆分和按需加载：缩减 bundle ize，把性能做到极致
+date: 2024-04-07 09:56:20
+permalink: /pages/7f9d7786e6aa1/
+categories:
+  - 学习笔记
+  - 前端基础建设与架构 30 讲
+tags:
+  - 
+---
 <p data-nodeid="1801" class="">这一讲，我们将对代码拆分和按需加载这一话题进行解析。</p>
 <p data-nodeid="1802">随着 Webpack 等构建工具的能力越来越强，开发者在构建阶段可以随心所欲打造项目流程，代码拆分和按需加载技术在业界曝光量也越来越高。事实上，代码拆分和按需加载的设计决定着工程化构建的结果，这将直接影响应用的性能表现，因为合理的加载时机和代码拆分能够使初始代码体积更小，页面加载更快。因此，如何合理设计代码拆分和按需加载，是对一个项目架构情况的直接考量。</p>
 <p data-nodeid="1803">下面我们从代码拆分和按需加载的场景入手，一同体会这一技术手段的必要性和业务价值。</p>

docs/20.学习笔记/01.前端基础建设与架构 30 讲/11.Tree Shaking：移除 JavaScript 上下文中的未引用代码.md

@@ -1,3 +1,13 @@
+---
+title: Tree Shaking：移除 JavaScript 上下文中的未引用代码
+date: 2024-04-07 09:56:20
+permalink: /pages/d7a25227c33fc/
+categories:
+  - 学习笔记
+  - 前端基础建设与架构 30 讲
+tags:
+  - 
+---
 <p data-nodeid="76796">时至今日，Tree Shaking 对于前端工程师来说，已经不是一个陌生的名词了。顾名思义：Tree Shaking 译为“摇树”，它通常用于描述移除 JavaScript 上下文中的未引用代码（dead-code）。</p>
 <p data-nodeid="76797">据我观察，Tree Shaking 也经常出现在诸多候选人的简历当中。然而可惜的是，大部分候选人都知道 Tree Shaking 的定义，但“知其然不知其所以然”，并没有在工程中真正实践过 Tree Shaking 技术，更没有深入理解 Tree Shaking 这个概念。社区上一些好的文章，比如<a href="https://github.com/wuomzfx/tree-shaking-test" data-nodeid="76953">《你的 Tree-Shaking 并没什么卵用》</a>发布于 2018 年初，但就目前来看，其中内容也有些“过期”了。</p>
 <p data-nodeid="76798">这一节，就让我们真正深入学习 Tree Shaking 这个概念。</p>

docs/20.学习笔记/01.前端基础建设与架构 30 讲/12.如何理解 AST 实现和编译原理？.md

@@ -1,3 +1,13 @@
+---
+title: 如何理解 AST 实现和编译原理？
+date: 2024-04-07 09:56:20
+permalink: /pages/d0d381c1e284e/
+categories:
+  - 学习笔记
+  - 前端基础建设与架构 30 讲
+tags:
+  - 
+---
 <p data-nodeid="27419">经常留意前端开发技术的同学一定对 AST 技术不陌生。AST 技术是现代化前端基建和工程化建设的基石：Babel、Webpack、ESLint、代码压缩工具等耳熟能详的工程化基建工具或流程，都离不开 AST 技术；Vue、React 等经典前端框架，也离不开基于 AST 技术的编译。</p>
 <p data-nodeid="27420">目前社区上不乏 Babel 插件、Webpack 插件等知识的讲解，但是涉及 AST 的部分，往往都是使用现成工具转载模版代码。这一讲，我们就从 AST 基础理念讲起，并实现一个简单的 AST 实战脚本。</p>
 <h3 data-nodeid="27421">AST 基础知识</h3>

docs/20.学习笔记/01.前端基础建设与架构 30 讲/13.工程化思维处理方案：如何实现应用主题切换功能？.md

@@ -1,3 +1,13 @@
+---
+title: 工程化思维处理方案：如何实现应用主题切换功能？
+date: 2024-04-07 09:56:20
+permalink: /pages/773169c96a412/
+categories:
+  - 学习笔记
+  - 前端基础建设与架构 30 讲
+tags:
+  - 
+---
 <p data-nodeid="1133" class="">前几讲内容，我们主要围绕 JavaScript 和项目相关工程化方案展开。实际上，在前端基础建设中，样式方案的处理也必不可少。这一讲，就让我们设计一个工程化主题切换功能，并梳理现代前端样式的解决方案。</p>
 <h3 data-nodeid="1134">设计一个主题切换工程架构</h3>
 <p data-nodeid="1135">随着 iOS 13 引入 Dark Mode（深色模式），各大应用和网站也都开始支持深色模式。相比传统的页面配色方案，深色模式具有较好的降噪性，也能让用户的眼睛看内容更舒适。</p>

docs/20.学习笔记/01.前端基础建设与架构 30 讲/14.解析 Webpack 源码，实现自己的构建工具.md

@@ -1,3 +1,13 @@
+---
+title: 解析 Webpack 源码，实现自己的构建工具
+date: 2024-04-07 09:56:20
+permalink: /pages/943231620daa3/
+categories:
+  - 学习笔记
+  - 前端基础建设与架构 30 讲
+tags:
+  - 
+---
 <p data-nodeid="3596">前端工程化和基础建设这个话题，自然少不了分析构建工具。作为前端工程中最常见、最经典的构建工具，Webpack 必须要有一个独立小节进行精讲。可是，关于 Webpack 什么样的内容才更有意义呢？当前社区，Webpack 插件编写、loader 编写相关内容已经非常多了，甚至 Tapable 机制也已经有了涉猎。</p>
 <p data-nodeid="3597">这一讲，我们独辟蹊径，从 Webpack 的实现入手，帮助你构建一个自己的工程化工具。</p>
 <h3 data-nodeid="3598">Webpack 的初心和揭秘</h3>

docs/20.学习笔记/01.前端基础建设与架构 30 讲/15.从编译到运行，跨端解析小程序多端方案.md

@@ -1,3 +1,13 @@
+---
+title: 从编译到运行，跨端解析小程序多端方案
+date: 2024-04-07 09:56:20
+permalink: /pages/12102b0892053/
+categories:
+  - 学习笔记
+  - 前端基础建设与架构 30 讲
+tags:
+  - 
+---
 <p data-nodeid="7844" class="">客观来说，小程序在用户规模及商业化方面的巨大成功，并不能掩盖其技术环节的设计问题和痛点。从孱弱简陋的小程序开发体验，到整体架构实现，再到小程序 APIs 碎片化现状，就注定了小程序多端方案层出不穷，展现出百家争鸣的局面。</p>
 <p data-nodeid="7845">欣欣向荣的小程序多端方案背后有着深广且有趣的技术话题，这一讲，就让我们一同解析小程序多端方案技术。</p>
 <p data-nodeid="7846">小程序生态如今已经如火如荼地开展开来，自腾讯微信小程序后，各巨头也纷纷建立起自己的小程序。这些小程序的设计原理类似，但是对于开发者来说，开发层面并不互通。在此背景下，效率为先，也就有了各种小程序多端方案。</p>

docs/20.学习笔记/01.前端基础建设与架构 30 讲/16.原生跨平台技术：移动端跨平台到 Flutter 的技术变革.md

@@ -1,3 +1,13 @@
+---
+title: 原生跨平台技术：移动端跨平台到 Flutter 的技术变革
+date: 2024-04-07 09:56:20
+permalink: /pages/22b509db57f1a/
+categories:
+  - 学习笔记
+  - 前端基础建设与架构 30 讲
+tags:
+  - 
+---
 <p data-nodeid="185601" class="">跨平台其实是一个老生常谈的话题，技术方案也是历经变迁，但始终热点不断，究其原因有二：</p>
 <ul data-nodeid="185602">
 <li data-nodeid="185603">

docs/20.学习笔记/01.前端基础建设与架构 30 讲/17.学习 axio：封装一个结构清晰的 Fetch 库.md

@@ -1,3 +1,13 @@
+---
+title: 学习 axio：封装一个结构清晰的 Fetch 库
+date: 2024-04-07 09:56:20
+permalink: /pages/20b426615a1c8/
+categories:
+  - 学习笔记
+  - 前端基础建设与架构 30 讲
+tags:
+  - 
+---
 <p data-nodeid="6450" class="">从这一讲开始，我们将进入核心框架原理与代码设计模式的学习。任何一个动态应用的实现，都离不开前后端的互动配合。前端发送请求获取数据是开发者必不可少的场景。正因为如此，每一个前端项目都有必要接入一个请求库。</p>
 <p data-nodeid="6451">那么请求库如何设计，才能保证使用者的顺畅？请求逻辑如何抽象成统一请求库，才能避免出现代码混乱堆积，难以维护的现象呢？下面我们就进入正题。</p>
 <h3 data-nodeid="6452">一个请求库需要考虑哪些问题</h3>

docs/20.学习笔记/01.前端基础建设与架构 30 讲/18.对比 Koa 和 Redux：分析前端中的中间件理念.md

@@ -1,3 +1,13 @@
+---
+title: 对比 Koa 和 Redux：分析前端中的中间件理念
+date: 2024-04-07 09:56:20
+permalink: /pages/3c41f5dcb7811/
+categories:
+  - 学习笔记
+  - 前端基础建设与架构 30 讲
+tags:
+  - 
+---
 <p data-nodeid="83997" class="">上一讲，我们通过分析 axios 源码，延伸了“如何设计一个请求公共库”，其中提到了不同层次级别的分层理念。这一讲，我们继续讨论代码设计这一话题，聚焦中间件化和插件化理念。并通过实现一个中间件化的请求库和上一节内容融会贯通。</p>
 <h3 data-nodeid="83998">以 Koa 为代表的 Node.js 中间件化设计</h3>
 <p data-nodeid="83999">说到中间件，很多开发者都会想到 Koa.js，其中间件设计无疑是前端中间件思想的典型代表之一。我们先来剖析 Koa.js 的设计和实现。</p>

docs/20.学习笔记/01.前端基础建设与架构 30 讲/19.如何理解软件开发灵活性和高定制性？.md

@@ -1,3 +1,13 @@
+---
+title: 如何理解软件开发灵活性和高定制性？
+date: 2024-04-07 09:56:20
+permalink: /pages/328eaba5cae39/
+categories:
+  - 学习笔记
+  - 前端基础建设与架构 30 讲
+tags:
+  - 
+---
 <p data-nodeid="929" class="">前两讲我们介绍了前端开发领域常见的开发模式和封装思想，这一讲，我们将该主题升华，聊一聊软件开发灵活性和高定制性这个话题。</p>
 <p data-nodeid="930">业务需求是烦琐多变的，因此开发灵活性至关重要，这直接决定了开发效率，而与灵活性相伴相生的话题就是定制性。本讲主要从设计模式和函数式思想入手，从实际代码出发，来阐释灵活性和高定制性。</p>
 <h3 data-nodeid="931">设计模式</h3>