-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
105 lines (102 loc) · 41.6 KB
/
index.html
File metadata and controls
105 lines (102 loc) · 41.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!doctype html>
<html lang="zh"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><meta><title>Liang的个人博客</title><link rel="manifest" href="/manifest.json"><meta name="theme-color" content="#3273dc"><meta name="application-name" content="Liang Blog"><meta name="msapplication-TileImage" content="/img/avatar.jpg"><meta name="msapplication-TileColor" content="#3273dc"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-title" content="Liang Blog"><meta name="apple-mobile-web-app-status-bar-style" content="default"><link rel="apple-touch-icon" sizes="144x144" href="/img/avatar.jpg"><meta property="og:type" content="blog"><meta property="og:title" content="Liang的个人博客"><meta property="og:url" content="https://liang5757.github.io/"><meta property="og:site_name" content="Liang的个人博客"><meta property="og:locale" content="zh_CN"><meta property="og:image" content="https://liang5757.github.io/img/og_image.png"><meta property="article:author" content="Liang"><meta property="twitter:card" content="summary"><meta property="twitter:image:src" content="https://liang5757.github.io/img/og_image.png"><script type="application/ld+json">{"@context":"https://schema.org","@type":"BlogPosting","mainEntityOfPage":{"@type":"WebPage","@id":"https://liang5757.github.io"},"headline":"Liang的个人博客","image":["https://liang5757.github.io/img/og_image.png"],"author":{"@type":"Person","name":"Liang"},"publisher":{"@type":"Organization","name":"Liang的个人博客","logo":{"@type":"ImageObject","url":"https://liang5757.github.io/"}},"description":""}</script><link rel="icon" href="/img/avatar.jpg"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css"><link data-pjax rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11.7.0/styles/atom-one-light.css"><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;600&family=Source+Code+Pro"><link data-pjax rel="stylesheet" href="/css/default.css"><style>body>.footer,body>.navbar,body>.section{opacity:0}</style><!--!--><!--!--><!--!--><!--!--><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cookieconsent@3.1.1/build/cookieconsent.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery@1.10.0/dist/css/lightgallery.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/justifiedGallery@3.8.1/dist/css/justifiedGallery.min.css"><!--!--><!--!--><style>.pace{-webkit-pointer-events:none;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.pace-inactive{display:none}.pace .pace-progress{background:#3273dc;position:fixed;z-index:2000;top:0;right:100%;width:100%;height:2px}</style><script src="https://cdn.jsdelivr.net/npm/pace-js@1.2.4/pace.min.js"></script><!--!--><!--!--><!-- hexo injector head_end start --><script>
(function () {
function switchTab() {
if (!location.hash) {
return;
}
const id = '#' + CSS.escape(location.hash.substring(1));
const $tabMenu = document.querySelector(`.tabs a[href="${id}"]`);
if (!$tabMenu) {
return;
}
const $tabMenuContainer = $tabMenu.parentElement.parentElement;
Array.from($tabMenuContainer.children).forEach($menu => $menu.classList.remove('is-active'));
Array.from($tabMenuContainer.querySelectorAll('a'))
.map($menu => document.getElementById($menu.getAttribute("href").substring(1)))
.forEach($content => $content.classList.add('is-hidden'));
if ($tabMenu) {
$tabMenu.parentElement.classList.add('is-active');
}
const $activeTab = document.querySelector(id);
if ($activeTab) {
$activeTab.classList.remove('is-hidden');
}
}
switchTab();
window.addEventListener('hashchange', switchTab, false);
})();
</script><!-- hexo injector head_end end --><meta name="generator" content="Hexo 7.3.0"><link rel="alternate" href="/atom.xml" title="Liang的个人博客" type="application/atom+xml">
</head><body class="is-3-column"><nav class="navbar navbar-main"><div class="container navbar-container"><div class="navbar-brand justify-content-center"><a class="navbar-item navbar-logo" href="/">Liang的个人博客</a></div><div class="navbar-menu"><div class="navbar-start"><a class="navbar-item is-active" href="/">首页</a><a class="navbar-item" href="/archives">归档</a><a class="navbar-item" href="/categories">分类</a><a class="navbar-item" href="/tags">标签</a><a class="navbar-item" href="/about">关于</a></div><div class="navbar-end"><a class="navbar-item" target="_blank" rel="noopener" title="Download on GitHub" href="https://github.com/Liang5757"><i class="fab fa-github"></i></a><a class="navbar-item search" title="搜索" href="javascript:;"><i class="fas fa-search"></i></a></div></div></div></nav><section class="section"><div class="container"><div class="columns"><div class="column order-2 column-main is-8-tablet is-8-desktop is-6-widescreen"><div class="card"><article class="card-content article" role="article"><div class="article-meta is-size-7 is-uppercase level is-mobile"><div class="level-left"><span class="level-item"><time dateTime="2025-12-11T14:48:03.000Z" title="2025/12/11 22:48:03">2025-12-11</time>发表</span><span class="level-item"><time dateTime="2025-12-13T14:32:27.284Z" title="2025/12/13 22:32:27">2025-12-13</time>更新</span><span class="level-item"><a class="link-muted" href="/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/">前端工程化</a></span><span class="level-item">25 分钟读完 (大约3675个字)</span></div></div><p class="title is-3 is-size-4-mobile"><a class="link-muted" href="/2025/12/11/node.js/%E6%B5%85%E5%86%99%E4%B8%80%E4%B8%8B%E8%84%9A%E6%89%8B%E6%9E%B6/">浅写一下脚手架</a></p><div class="content"><p>在现代前端开发中，脚手架（CLI 工具）已经成为不可或缺的开发工具。无论是 Vue CLI、Create React App 还是 Angular CLI，它们都能帮助我们快速搭建项目结构、统一团队规范、提高开发效率。</p>
<p>本文将带你从零开始实现一个功能完整的 Node.js 脚手架，涵盖命令行解析、用户交互、模板下载、文件操作等核心功能。通过本文，你将学会如何开发一个类似 Vue CLI 的命令行工具，并能将其发布到 npm 供他人使用。</p>
<p>让我们开始吧！</p></div><a class="article-more button is-small is-size-7" href="/2025/12/11/node.js/%E6%B5%85%E5%86%99%E4%B8%80%E4%B8%8B%E8%84%9A%E6%89%8B%E6%9E%B6/#more">阅读更多</a></article></div><div class="card"><article class="card-content article" role="article"><div class="article-meta is-size-7 is-uppercase level is-mobile"><div class="level-left"><span class="level-item"><time dateTime="2025-03-19T17:04:57.000Z" title="2025/3/20 01:04:57">2025-03-20</time>发表</span><span class="level-item"><time dateTime="2025-12-07T10:16:59.290Z" title="2025/12/7 18:16:59">2025-12-07</time>更新</span><span class="level-item"><a class="link-muted" href="/categories/%E8%A7%86%E9%A2%91/">视频</a></span><span class="level-item">9 分钟读完 (大约1320个字)</span></div></div><p class="title is-3 is-size-4-mobile"><a class="link-muted" href="/2025/03/20/%E8%A7%86%E9%A2%91/%E4%B8%BA%E4%BB%80%E4%B9%88MP4%E8%A7%86%E9%A2%91%E8%B6%8A%E9%95%BF%E8%B6%8A%E6%85%A2/">为什么MP4视频越长起播越慢</a></p><div class="content"><h2 id="利用在线网站解析分析"><a href="#利用在线网站解析分析" class="headerlink" title="利用在线网站解析分析"></a>利用在线网站解析分析</h2><blockquote>
<p>在线解析mp4：<a target="_blank" rel="noopener" href="https://www.onlinemp4parser.com/">https://www.onlinemp4parser.com/</a></p>
</blockquote></div><a class="article-more button is-small is-size-7" href="/2025/03/20/%E8%A7%86%E9%A2%91/%E4%B8%BA%E4%BB%80%E4%B9%88MP4%E8%A7%86%E9%A2%91%E8%B6%8A%E9%95%BF%E8%B6%8A%E6%85%A2/#more">阅读更多</a></article></div><div class="card"><article class="card-content article" role="article"><div class="article-meta is-size-7 is-uppercase level is-mobile"><div class="level-left"><span class="level-item"><time dateTime="2024-10-27T17:14:10.000Z" title="2024/10/28 01:14:10">2024-10-28</time>发表</span><span class="level-item"><time dateTime="2025-12-07T10:16:59.255Z" title="2025/12/7 18:16:59">2025-12-07</time>更新</span><span class="level-item"><a class="link-muted" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a></span><span class="level-item">11 分钟读完 (大约1682个字)</span></div></div><p class="title is-3 is-size-4-mobile"><a class="link-muted" href="/2024/10/28/%E5%89%8D%E7%AB%AF%E5%AE%9E%E6%88%98%E6%8A%80%E5%B7%A7/%E7%A6%81%E6%AD%A2%E7%94%A8%E6%88%B7%E8%B0%83%E8%AF%95%E7%BD%91%E7%AB%99/">禁止用户调试网站</a></p><div class="content"><blockquote>
<p>web想禁止调试，没有绝对安全的方式</p>
</blockquote>
<h2 id="妙用1-debugger"><a href="#妙用1-debugger" class="headerlink" title="妙用1 debugger"></a>妙用1 debugger</h2><h3 id="示例"><a href="#示例" class="headerlink" title="示例"></a>示例</h3><p>用<code>setInterval</code>执行<code>debugger</code>，打开控制台就会暂停代码</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">(<span class="function">() =></span> {</span><br><span class="line"> <span class="keyword">function</span> <span class="title function_">ban</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="built_in">setInterval</span>(<span class="function">() =></span> { </span><br><span class="line"> <span class="keyword">debugger</span>;</span><br><span class="line"> }, <span class="number">50</span>);</span><br><span class="line"> }</span><br><span class="line"> <span class="title function_">ban</span>();</span><br><span class="line">})();</span><br></pre></td></tr></table></figure></div><a class="article-more button is-small is-size-7" href="/2024/10/28/%E5%89%8D%E7%AB%AF%E5%AE%9E%E6%88%98%E6%8A%80%E5%B7%A7/%E7%A6%81%E6%AD%A2%E7%94%A8%E6%88%B7%E8%B0%83%E8%AF%95%E7%BD%91%E7%AB%99/#more">阅读更多</a></article></div><div class="card"><article class="card-content article" role="article"><div class="article-meta is-size-7 is-uppercase level is-mobile"><div class="level-left"><span class="level-item"><time dateTime="2024-10-11T16:01:34.000Z" title="2024/10/12 00:01:34">2024-10-12</time>发表</span><span class="level-item"><time dateTime="2025-12-07T10:16:59.285Z" title="2025/12/7 18:16:59">2025-12-07</time>更新</span><span class="level-item"><a class="link-muted" href="/categories/%E7%AE%97%E6%B3%95/">算法</a></span><span class="level-item">2 分钟读完 (大约337个字)</span></div></div><p class="title is-3 is-size-4-mobile"><a class="link-muted" href="/2024/10/12/%E7%AE%97%E6%B3%95/%E6%B0%B4%E5%A1%98%E6%8A%BD%E6%A0%B7%E7%AE%97%E6%B3%95/">水塘抽样算法</a></p><div class="content"><h2 id="目的"><a href="#目的" class="headerlink" title="目的"></a>目的</h2><p>水塘抽样的目标是从一个很大的或未知大小的数据集中随机选取k个样本。</p>
<p>特点：不要求一次性读取所有数据，也不需要知道数据总量，能保证每个元素被选中的概率相等</p></div><a class="article-more button is-small is-size-7" href="/2024/10/12/%E7%AE%97%E6%B3%95/%E6%B0%B4%E5%A1%98%E6%8A%BD%E6%A0%B7%E7%AE%97%E6%B3%95/#more">阅读更多</a></article></div><div class="card"><article class="card-content article" role="article"><div class="article-meta is-size-7 is-uppercase level is-mobile"><div class="level-left"><span class="level-item"><time dateTime="2023-10-06T11:27:17.000Z" title="2023/10/6 19:27:17">2023-10-06</time>发表</span><span class="level-item"><time dateTime="2025-12-07T10:16:59.206Z" title="2025/12/7 18:16:59">2025-12-07</time>更新</span><span class="level-item"><a class="link-muted" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a></span><span class="level-item">6 分钟读完 (大约968个字)</span></div></div><p class="title is-3 is-size-4-mobile"><a class="link-muted" href="/2023/10/06/Js/npm-script/">npm script</a></p><div class="content"><h2 id="串行-or-并行"><a href="#串行-or-并行" class="headerlink" title="串行 or 并行"></a>串行 or 并行</h2><p>并行跑命令：&，在命令结尾加<code>& wait</code>，可以使用ctrl c关闭命令行来结束进程<br>串行跑命令：&&</p>
<h2 id="控制日志输出"><a href="#控制日志输出" class="headerlink" title="控制日志输出"></a>控制日志输出</h2><ul>
<li>–silent（-s）：输出尽可能少的日志</li>
<li>–verbose：显示尽可能多的状态，日志级别的输出，用于调试</li>
</ul></div><a class="article-more button is-small is-size-7" href="/2023/10/06/Js/npm-script/#more">阅读更多</a></article></div><div class="card"><article class="card-content article" role="article"><div class="article-meta is-size-7 is-uppercase level is-mobile"><div class="level-left"><span class="level-item"><time dateTime="2023-09-10T08:53:55.000Z" title="2023/9/10 16:53:55">2023-09-10</time>发表</span><span class="level-item"><time dateTime="2025-12-07T10:16:59.209Z" title="2025/12/7 18:16:59">2025-12-07</time>更新</span><span class="level-item"><a class="link-muted" href="/categories/%E6%BA%90%E7%A0%81%E8%A7%A3%E8%AF%BB/">源码解读</a></span><span class="level-item">32 分钟读完 (大约4840个字)</span></div></div><p class="title is-3 is-size-4-mobile"><a class="link-muted" href="/2023/09/10/Js/%E6%BA%90%E7%A0%81%E8%A7%A3%E8%AF%BB/Vueuse%E6%BA%90%E7%A0%81%E8%A7%A3%E8%AF%BB/">Vueuse源码解读</a></p><div class="content"><blockquote>
<p>本文不会放api的用法，建议先看看是怎么用的</p>
<p>写本篇文章时间间隔较长，所以代码版本不一</p>
</blockquote>
<h2 id="项目架构"><a href="#项目架构" class="headerlink" title="项目架构"></a>项目架构</h2><p>采用monorepo的形式，项目目录下有多个子项目，下面放了资料链接和几处用法，其他本文不多赘述。</p>
<p><a target="_blank" rel="noopener" href="https://juejin.cn/post/6944877410827370504">现代前端工程为什么越来越离不开 Monorepo?</a><br><a target="_blank" rel="noopener" href="https://www.codeleading.com/article/46915806308/">为什么使用pnpm可以光速建立好用的monorepo（比yarn/lerna效率高）</a><br><a target="_blank" rel="noopener" href="https://pnpm.io/zh/workspaces">pnpm workspace文档</a></p></div><a class="article-more button is-small is-size-7" href="/2023/09/10/Js/%E6%BA%90%E7%A0%81%E8%A7%A3%E8%AF%BB/Vueuse%E6%BA%90%E7%A0%81%E8%A7%A3%E8%AF%BB/#more">阅读更多</a></article></div><div class="card"><article class="card-content article" role="article"><div class="article-meta is-size-7 is-uppercase level is-mobile"><div class="level-left"><span class="level-item"><time dateTime="2023-04-18T16:53:37.000Z" title="2023/4/19 00:53:37">2023-04-19</time>发表</span><span class="level-item"><time dateTime="2025-12-07T10:16:59.211Z" title="2025/12/7 18:16:59">2025-12-07</time>更新</span><span class="level-item"><a class="link-muted" href="/categories/%E6%BA%90%E7%A0%81%E8%A7%A3%E8%AF%BB/">源码解读</a></span><span class="level-item">4 分钟读完 (大约594个字)</span></div></div><p class="title is-3 is-size-4-mobile"><a class="link-muted" href="/2023/04/19/Js/%E6%BA%90%E7%A0%81%E8%A7%A3%E8%AF%BB/p-limit-%E9%99%90%E5%88%B6%E5%B9%B6%E5%8F%91%E6%95%B0/">【源码解读】p-limit 限制并发数</a></p><div class="content"><blockquote>
<p>github: <a target="_blank" rel="noopener" href="https://github.com/sindresorhus/p-limit">https://github.com/sindresorhus/p-limit</a></p>
</blockquote>
<h2 id="使用方式"><a href="#使用方式" class="headerlink" title="使用方式"></a>使用方式</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> pLimit <span class="keyword">from</span> <span class="string">'p-limit'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> limit = <span class="title function_">pLimit</span>(<span class="number">1</span>); <span class="comment">// 只能有一个promise在执行</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> input = [</span><br><span class="line"> <span class="title function_">limit</span>(<span class="function">() =></span> <span class="title function_">fetchSomething</span>(<span class="string">'foo'</span>)),</span><br><span class="line"> <span class="title function_">limit</span>(<span class="function">() =></span> <span class="title function_">fetchSomething</span>(<span class="string">'bar'</span>)),</span><br><span class="line"> <span class="title function_">limit</span>(<span class="function">() =></span> <span class="title function_">doSomething</span>())</span><br><span class="line">];</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> result = <span class="keyword">await</span> <span class="title class_">Promise</span>.<span class="title function_">all</span>(input);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(result);</span><br></pre></td></tr></table></figure></div><a class="article-more button is-small is-size-7" href="/2023/04/19/Js/%E6%BA%90%E7%A0%81%E8%A7%A3%E8%AF%BB/p-limit-%E9%99%90%E5%88%B6%E5%B9%B6%E5%8F%91%E6%95%B0/#more">阅读更多</a></article></div><div class="card"><article class="card-content article" role="article"><div class="article-meta is-size-7 is-uppercase level is-mobile"><div class="level-left"><span class="level-item"><time dateTime="2022-05-21T03:33:05.000Z" title="2022/5/21 11:33:05">2022-05-21</time>发表</span><span class="level-item"><time dateTime="2025-12-07T10:16:59.210Z" title="2025/12/7 18:16:59">2025-12-07</time>更新</span><span class="level-item"><a class="link-muted" href="/categories/%E6%BA%90%E7%A0%81%E8%A7%A3%E8%AF%BB/">源码解读</a></span><span class="level-item">4 分钟读完 (大约660个字)</span></div></div><p class="title is-3 is-size-4-mobile"><a class="link-muted" href="/2022/05/21/Js/%E6%BA%90%E7%A0%81%E8%A7%A3%E8%AF%BB/arrify-%E8%BD%AC%E6%95%B0%E7%BB%84/">【源码解读】arrify 转数组</a></p><div class="content"><p>半年没写博客，从简单的源码开始启动</p></div><a class="article-more button is-small is-size-7" href="/2022/05/21/Js/%E6%BA%90%E7%A0%81%E8%A7%A3%E8%AF%BB/arrify-%E8%BD%AC%E6%95%B0%E7%BB%84/#more">阅读更多</a></article></div><div class="card"><article class="card-content article" role="article"><div class="article-meta is-size-7 is-uppercase level is-mobile"><div class="level-left"><span class="level-item"><time dateTime="2021-12-15T11:45:48.000Z" title="2021/12/15 19:45:48">2021-12-15</time>发表</span><span class="level-item"><time dateTime="2025-12-07T10:16:59.223Z" title="2025/12/7 18:16:59">2025-12-07</time>更新</span><span class="level-item"><a class="link-muted" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a><span> / </span><a class="link-muted" href="/categories/%E5%89%8D%E7%AB%AF/%E6%BA%90%E7%A0%81%E8%A7%A3%E8%AF%BB/">源码解读</a></span><span class="level-item">10 分钟读完 (大约1490个字)</span></div></div><p class="title is-3 is-size-4-mobile"><a class="link-muted" href="/2021/12/15/Ts/Mitt%E6%BA%90%E7%A0%81%E8%A7%A3%E8%AF%BB/">Mitt源码解读</a></p><div class="content"><p>github地址：<a target="_blank" rel="noopener" href="https://github.com/developit/mitt">https://github.com/developit/mitt</a></p>
<blockquote>
<p>200b大小的event bus库</p>
</blockquote></div><a class="article-more button is-small is-size-7" href="/2021/12/15/Ts/Mitt%E6%BA%90%E7%A0%81%E8%A7%A3%E8%AF%BB/#more">阅读更多</a></article></div><div class="card"><article class="card-content article" role="article"><div class="article-meta is-size-7 is-uppercase level is-mobile"><div class="level-left"><span class="level-item"><time dateTime="2021-12-10T17:46:15.000Z" title="2021/12/11 01:46:15">2021-12-11</time>发表</span><span class="level-item"><time dateTime="2025-12-07T10:16:59.224Z" title="2025/12/7 18:16:59">2025-12-07</time>更新</span><span class="level-item"><a class="link-muted" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a><span> / </span><a class="link-muted" href="/categories/%E5%89%8D%E7%AB%AF/%E6%BA%90%E7%A0%81%E8%A7%A3%E8%AF%BB/">源码解读</a></span><span class="level-item">25 分钟读完 (大约3813个字)</span></div></div><p class="title is-3 is-size-4-mobile"><a class="link-muted" href="/2021/12/11/Vue/vueuse%E6%BA%90%E7%A0%81%E8%A7%A3%E6%9E%90/">vueuse源码解析</a></p><div class="content"><blockquote>
<p>本文不会放api的用法，建议先看看是怎么用的</p>
</blockquote>
<h2 id="项目架构"><a href="#项目架构" class="headerlink" title="项目架构"></a>项目架构</h2><p>采用monorepo的形式，项目目录下有多个子项目，下面放了资料链接和几处用法，其他本文不多赘述。</p>
<p><a target="_blank" rel="noopener" href="https://juejin.cn/post/6944877410827370504">现代前端工程为什么越来越离不开 Monorepo?</a><br><a target="_blank" rel="noopener" href="https://www.codeleading.com/article/46915806308/">为什么使用pnpm可以光速建立好用的monorepo（比yarn/lerna效率高）</a><br><a target="_blank" rel="noopener" href="https://pnpm.io/zh/workspaces">pnpm workspace文档</a></p></div><a class="article-more button is-small is-size-7" href="/2021/12/11/Vue/vueuse%E6%BA%90%E7%A0%81%E8%A7%A3%E6%9E%90/#more">阅读更多</a></article></div><nav class="pagination" role="navigation" aria-label="pagination"><div class="pagination-previous is-invisible is-hidden-mobile"><a href="/page/0/">上一页</a></div><div class="pagination-next"><a href="/page/2/">下一页</a></div><ul class="pagination-list is-hidden-mobile"><li><a class="pagination-link is-current" href="/">1</a></li><li><a class="pagination-link" href="/page/2/">2</a></li><li><span class="pagination-ellipsis">…</span></li><li><a class="pagination-link" href="/page/7/">7</a></li></ul></nav></div><div class="column column-left is-4-tablet is-4-desktop is-3-widescreen order-1"><div class="card widget" data-type="profile"><div class="card-content"><nav class="level"><div class="level-item has-text-centered flex-shrink-1"><div><figure class="image is-128x128 mx-auto mb-2"><img class="avatar is-rounded" src="/img/avatar.jpg" alt="Liang"></figure><p class="title is-size-4 is-block" style="line-height:inherit;">Liang</p><p class="is-size-6 is-flex justify-content-center"><i class="fas fa-map-marker-alt mr-1"></i><span>Guangzhou, China</span></p></div></div></nav><nav class="level is-mobile"><div class="level-item has-text-centered is-marginless"><div><p class="heading">文章</p><a href="/archives/"><p class="title">70</p></a></div></div><div class="level-item has-text-centered is-marginless"><div><p class="heading">分类</p><a href="/categories/"><p class="title">12</p></a></div></div><div class="level-item has-text-centered is-marginless"><div><p class="heading">标签</p><a href="/tags/"><p class="title">21</p></a></div></div></nav><div class="level"><a class="level-item button is-primary is-rounded" href="https://github.com/Liang5757" target="_blank" rel="me noopener">关注我</a></div><div class="level is-mobile is-multiline"><a class="level-item button is-transparent is-marginless" target="_blank" rel="me noopener" title="Github" href="https://github.com/Liang5757"><i class="fab fa-github"></i></a><a class="level-item button is-transparent is-marginless" target="_blank" rel="me noopener" title="Email" href="mailto:1036933225@qq.com"><i class="fas fa-envelope"></i></a></div></div></div><div class="card widget" data-type="categories"><div class="card-content"><div class="menu"><h3 class="menu-label">分类</h3><ul class="menu-list"><li><a class="level is-mobile" href="/categories/%E5%89%8D%E7%AB%AF/"><span class="level-start"><span class="level-item">前端</span></span><span class="level-end"><span class="level-item tag">37</span></span></a><ul><li><a class="level is-mobile" href="/categories/%E5%89%8D%E7%AB%AF/%E6%BA%90%E7%A0%81%E8%A7%A3%E8%AF%BB/"><span class="level-start"><span class="level-item">源码解读</span></span><span class="level-end"><span class="level-item tag">2</span></span></a></li></ul></li><li><a class="level is-mobile" href="/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/"><span class="level-start"><span class="level-item">前端工程化</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile" href="/categories/%E5%90%8E%E7%AB%AF/"><span class="level-start"><span class="level-item">后端</span></span><span class="level-end"><span class="level-item tag">2</span></span></a><ul><li><a class="level is-mobile" href="/categories/%E5%90%8E%E7%AB%AF/%E6%BA%90%E7%A0%81%E8%A7%A3%E8%AF%BB/"><span class="level-start"><span class="level-item">源码解读</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li></ul></li><li><a class="level is-mobile" href="/categories/%E5%A4%A7%E5%AD%A6%E8%AF%BE%E7%A8%8B/"><span class="level-start"><span class="level-item">大学课程</span></span><span class="level-end"><span class="level-item tag">3</span></span></a></li><li><a class="level is-mobile" href="/categories/%E6%B5%8B%E8%AF%95/"><span class="level-start"><span class="level-item">测试</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile" href="/categories/%E6%BA%90%E7%A0%81%E8%A7%A3%E8%AF%BB/"><span class="level-start"><span class="level-item">源码解读</span></span><span class="level-end"><span class="level-item tag">6</span></span></a></li><li><a class="level is-mobile" href="/categories/%E7%AE%97%E6%B3%95/"><span class="level-start"><span class="level-item">算法</span></span><span class="level-end"><span class="level-item tag">3</span></span></a></li><li><a class="level is-mobile" href="/categories/%E7%BC%96%E8%AF%91%E5%99%A8%E9%85%8D%E7%BD%AE/"><span class="level-start"><span class="level-item">编译器配置</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile" href="/categories/%E8%A7%86%E9%A2%91/"><span class="level-start"><span class="level-item">视频</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile" href="/categories/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/"><span class="level-start"><span class="level-item">设计模式</span></span><span class="level-end"><span class="level-item tag">15</span></span></a></li></ul></div></div></div><div class="card widget" data-type="archives"><div class="card-content"><div class="menu"><h3 class="menu-label">归档</h3><ul class="menu-list"><li><a class="level is-mobile" href="/archives/2025/12/"><span class="level-start"><span class="level-item">十二月 2025</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile" href="/archives/2025/03/"><span class="level-start"><span class="level-item">三月 2025</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile" href="/archives/2024/10/"><span class="level-start"><span class="level-item">十月 2024</span></span><span class="level-end"><span class="level-item tag">2</span></span></a></li><li><a class="level is-mobile" href="/archives/2023/10/"><span class="level-start"><span class="level-item">十月 2023</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile" href="/archives/2023/09/"><span class="level-start"><span class="level-item">九月 2023</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile" href="/archives/2023/04/"><span class="level-start"><span class="level-item">四月 2023</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile" href="/archives/2022/05/"><span class="level-start"><span class="level-item">五月 2022</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile" href="/archives/2021/12/"><span class="level-start"><span class="level-item">十二月 2021</span></span><span class="level-end"><span class="level-item tag">2</span></span></a></li><li><a class="level is-mobile" href="/archives/2021/09/"><span class="level-start"><span class="level-item">九月 2021</span></span><span class="level-end"><span class="level-item tag">2</span></span></a></li><li><a class="level is-mobile" href="/archives/2021/08/"><span class="level-start"><span class="level-item">八月 2021</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile" href="/archives/2021/07/"><span class="level-start"><span class="level-item">七月 2021</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile" href="/archives/2021/06/"><span class="level-start"><span class="level-item">六月 2021</span></span><span class="level-end"><span class="level-item tag">2</span></span></a></li><li><a class="level is-mobile" href="/archives/2021/05/"><span class="level-start"><span class="level-item">五月 2021</span></span><span class="level-end"><span class="level-item tag">4</span></span></a></li><li><a class="level is-mobile" href="/archives/2021/04/"><span class="level-start"><span class="level-item">四月 2021</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile" href="/archives/2021/02/"><span class="level-start"><span class="level-item">二月 2021</span></span><span class="level-end"><span class="level-item tag">14</span></span></a></li><li><a class="level is-mobile" href="/archives/2021/01/"><span class="level-start"><span class="level-item">一月 2021</span></span><span class="level-end"><span class="level-item tag">8</span></span></a></li><li><a class="level is-mobile" href="/archives/2020/12/"><span class="level-start"><span class="level-item">十二月 2020</span></span><span class="level-end"><span class="level-item tag">3</span></span></a></li><li><a class="level is-mobile" href="/archives/2020/11/"><span class="level-start"><span class="level-item">十一月 2020</span></span><span class="level-end"><span class="level-item tag">4</span></span></a></li><li><a class="level is-mobile" href="/archives/2020/10/"><span class="level-start"><span class="level-item">十月 2020</span></span><span class="level-end"><span class="level-item tag">4</span></span></a></li><li><a class="level is-mobile" href="/archives/2020/09/"><span class="level-start"><span class="level-item">九月 2020</span></span><span class="level-end"><span class="level-item tag">6</span></span></a></li><li><a class="level is-mobile" href="/archives/2020/08/"><span class="level-start"><span class="level-item">八月 2020</span></span><span class="level-end"><span class="level-item tag">2</span></span></a></li><li><a class="level is-mobile" href="/archives/2020/07/"><span class="level-start"><span class="level-item">七月 2020</span></span><span class="level-end"><span class="level-item tag">8</span></span></a></li></ul></div></div></div><div class="card widget" data-type="tags"><div class="card-content"><div class="menu"><h3 class="menu-label">标签</h3><div class="field is-grouped is-grouped-multiline"><div class="control"><a class="tags has-addons" href="/tags/CSS/"><span class="tag">CSS</span><span class="tag">6</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Java/"><span class="tag">Java</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Less/"><span class="tag">Less</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/React/"><span class="tag">React</span><span class="tag">4</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Webpack/"><span class="tag">Webpack</span><span class="tag">6</span></a></div><div class="control"><a class="tags has-addons" href="/tags/egg-js/"><span class="tag">egg.js</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/js/"><span class="tag">js</span><span class="tag">17</span></a></div><div class="control"><a class="tags has-addons" href="/tags/leetcode/"><span class="tag">leetcode</span><span class="tag">2</span></a></div><div class="control"><a class="tags has-addons" href="/tags/node-js/"><span class="tag">node.js</span><span class="tag">2</span></a></div><div class="control"><a class="tags has-addons" href="/tags/ts/"><span class="tag">ts</span><span class="tag">2</span></a></div><div class="control"><a class="tags has-addons" href="/tags/vue/"><span class="tag">vue</span><span class="tag">4</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/"><span class="tag">前端性能优化</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E5%BE%AE%E4%BF%A1%E7%BD%91%E9%A1%B5/"><span class="tag">微信网页</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E6%8A%80%E5%B7%A7/"><span class="tag">技巧</span><span class="tag">4</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E6%B5%8F%E8%A7%88%E5%99%A8/"><span class="tag">浏览器</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E7%AE%97%E6%B3%95/"><span class="tag">算法</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E7%BC%96%E8%AF%91%E5%99%A8%E9%85%8D%E7%BD%AE/"><span class="tag">编译器配置</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E8%A7%86%E9%A2%91/"><span class="tag">视频</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/"><span class="tag">设计模式</span><span class="tag">15</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E8%BD%AF%E4%BB%B6%E5%B7%A5%E7%A8%8B/"><span class="tag">软件工程</span><span class="tag">2</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E9%A1%B9%E7%9B%AE%E6%80%BB%E7%BB%93/"><span class="tag">项目总结</span><span class="tag">1</span></a></div></div></div></div></div><div class="column-right-shadow is-hidden-widescreen is-sticky"></div></div><div class="column column-right is-4-tablet is-4-desktop is-3-widescreen is-hidden-touch is-hidden-desktop-only order-3 is-sticky"><!--!--><div class="card widget" data-type="recent-posts"><div class="card-content"><h3 class="menu-label">最新文章</h3><article class="media"><div class="media-content"><p class="date"><time dateTime="2025-12-11T14:48:03.000Z">2025-12-11</time></p><p class="title"><a href="/2025/12/11/node.js/%E6%B5%85%E5%86%99%E4%B8%80%E4%B8%8B%E8%84%9A%E6%89%8B%E6%9E%B6/">浅写一下脚手架</a></p><p class="categories"><a href="/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/">前端工程化</a></p></div></article><article class="media"><div class="media-content"><p class="date"><time dateTime="2025-03-19T17:04:57.000Z">2025-03-20</time></p><p class="title"><a href="/2025/03/20/%E8%A7%86%E9%A2%91/%E4%B8%BA%E4%BB%80%E4%B9%88MP4%E8%A7%86%E9%A2%91%E8%B6%8A%E9%95%BF%E8%B6%8A%E6%85%A2/">为什么MP4视频越长起播越慢</a></p><p class="categories"><a href="/categories/%E8%A7%86%E9%A2%91/">视频</a></p></div></article><article class="media"><div class="media-content"><p class="date"><time dateTime="2024-10-27T17:14:10.000Z">2024-10-28</time></p><p class="title"><a href="/2024/10/28/%E5%89%8D%E7%AB%AF%E5%AE%9E%E6%88%98%E6%8A%80%E5%B7%A7/%E7%A6%81%E6%AD%A2%E7%94%A8%E6%88%B7%E8%B0%83%E8%AF%95%E7%BD%91%E7%AB%99/">禁止用户调试网站</a></p><p class="categories"><a href="/categories/%E5%89%8D%E7%AB%AF/">前端</a></p></div></article><article class="media"><div class="media-content"><p class="date"><time dateTime="2024-10-11T16:01:34.000Z">2024-10-12</time></p><p class="title"><a href="/2024/10/12/%E7%AE%97%E6%B3%95/%E6%B0%B4%E5%A1%98%E6%8A%BD%E6%A0%B7%E7%AE%97%E6%B3%95/">水塘抽样算法</a></p><p class="categories"><a href="/categories/%E7%AE%97%E6%B3%95/">算法</a></p></div></article><article class="media"><div class="media-content"><p class="date"><time dateTime="2023-10-06T11:27:17.000Z">2023-10-06</time></p><p class="title"><a href="/2023/10/06/Js/npm-script/">npm script</a></p><p class="categories"><a href="/categories/%E5%89%8D%E7%AB%AF/">前端</a></p></div></article></div></div></div></div></div></section><footer class="footer"><div class="container"><div class="level"><div class="level-start"><a class="footer-logo is-block mb-2" href="/">Liang的个人博客</a><p class="is-size-7"><span>© 2025 Liang</span> Powered by <a href="https://hexo.io/" target="_blank" rel="noopener">Hexo</a> & <a href="https://github.com/ppoffice/hexo-theme-icarus" target="_blank" rel="noopener">Icarus</a></p></div><div class="level-end"><div class="field has-addons"><p class="control"><a class="button is-transparent is-large" target="_blank" rel="noopener" title="Creative Commons" href="https://creativecommons.org/"><i class="fab fa-creative-commons"></i></a></p><p class="control"><a class="button is-transparent is-large" target="_blank" rel="noopener" title="Attribution 4.0 International" href="https://creativecommons.org/licenses/by/4.0/"><i class="fab fa-creative-commons-by"></i></a></p><p class="control"><a class="button is-transparent is-large" target="_blank" rel="noopener" title="Download on GitHub" href="https://github.com/Liang5757"><i class="fab fa-github"></i></a></p></div></div></div></div></footer><script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/moment@2.22.2/min/moment-with-locales.min.js"></script><script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.4/dist/clipboard.min.js" defer></script><script>moment.locale("zh-cn");</script><script>var IcarusThemeSettings = {
article: {
highlight: {
clipboard: true,
fold: 'unfolded'
}
}
};</script><script data-pjax src="/js/column.js"></script><script src="/js/animation.js"></script><a id="back-to-top" title="回到顶端" href="javascript:;"><i class="fas fa-chevron-up"></i></a><script data-pjax src="/js/back_to_top.js" defer></script><!--!--><!--!--><!--!--><script src="https://cdn.jsdelivr.net/npm/cookieconsent@3.1.1/build/cookieconsent.min.js" defer></script><script>window.addEventListener("load", () => {
window.cookieconsent.initialise({
type: "info",
theme: "edgeless",
static: false,
position: "bottom-left",
content: {
message: "此网站使用Cookie来改善您的体验。",
dismiss: "知道了！",
allow: "允许使用Cookie",
deny: "拒绝",
link: "了解更多",
policy: "Cookie政策",
href: "https://www.cookiesandyou.com/",
},
palette: {
popup: {
background: "#edeff5",
text: "#838391"
},
button: {
background: "#4b81e8"
},
},
});
});</script><script src="https://cdn.jsdelivr.net/npm/lightgallery@1.10.0/dist/js/lightgallery.min.js" defer></script><script src="https://cdn.jsdelivr.net/npm/justifiedGallery@3.8.1/dist/js/jquery.justifiedGallery.min.js" defer></script><script>window.addEventListener("load", () => {
if (typeof $.fn.lightGallery === 'function') {
$('.article').lightGallery({ selector: '.gallery-item' });
}
if (typeof $.fn.justifiedGallery === 'function') {
if ($('.justified-gallery > p > .gallery-item').length) {
$('.justified-gallery > p > .gallery-item').unwrap();
}
$('.justified-gallery').justifiedGallery();
}
});</script><!--!--><!--!--><!--!--><!--!--><!--!--><script data-pjax src="/js/main.js" defer></script><div class="searchbox"><div class="searchbox-container"><div class="searchbox-header"><div class="searchbox-input-container"><input class="searchbox-input" type="text" placeholder="想要查找什么..."></div><a class="searchbox-close" href="javascript:;">×</a></div><div class="searchbox-body"></div></div></div><script data-pjax src="/js/insight.js" defer></script><script data-pjax>document.addEventListener('DOMContentLoaded', function () {
loadInsight({"contentUrl":"/content.json"}, {"hint":"想要查找什么...","untitled":"(无标题)","posts":"文章","pages":"页面","categories":"分类","tags":"标签"});
});</script></body></html>