atom.xml

<?xml version="1.0"?>
<feed xmlns="http://www.w3.org/2005/Atom">
    <id>https://blog.imlete.cn</id>
    <title>Lete乐特 &#39;s Blog</title>
    <link href="https://blog.imlete.cn" />
    <updated>2023-10-17T20:00:29.000Z</updated>
    <category term="CSS" />
    <category term="记录" />
    <category term="JavaScript" />
    <category term="Git" />
    <category term="教程" />
    <category term="HTML" />
    <category term="CDN" />
    <category term="Github" />
    <category term="Jsdeliver" />
    <category term="SEO" />
    <category term="Hexo" />
    <category term="Yilia" />
    <category term="Valine" />
    <category term="Live2d" />
    <category term="Config" />
    <category term="LeanCloud" />
    <category term="IDEA" />
    <category term="Maven" />
    <category term="Java" />
    <category term="SpringBoot" />
    <category term="Thymeleaf" />
    <category term="java" />
    <category term="源码" />
    <category term="软件" />
    <category term="MyBatis" />
    <category term="SSM" />
    <category term="Gzip" />
    <category term="JQuery" />
    <category term="Node" />
    <category term="Cache" />
    <category term="Vue" />
    <category term="TypeScript" />
    <category term="Vercel" />
    <category term="HTTP" />
    <category term="Typecho" />
    <category term="Blog" />
    <category term="Webpack" />
    <category term="Windows" />
    <category term="Linux" />
    <category term="PhotoShop" />
    <category term="抠图" />
    <category term="VSCode" />
    <category term="jsdelivr" />
    <category term="C#" />
    <category term="Google Chrome" />
    <category term="谷歌插件" />
    <category term="Google-Chrome" />
    <entry>
        <id>https://blog.imlete.cn/article/Virtual-DOM-slower-real-DOM.html</id>
        <title>虚拟 DOM 比真 DOM 烂</title>
        <link rel="alternate" href="https://blog.imlete.cn/article/Virtual-DOM-slower-real-DOM.html"/>
        <content type="html">&lt;h2 id=&#34;前言&#34;&gt;&lt;a href=&#34;#前言&#34; class=&#34;headerlink&#34; title=&#34;前言&#34;&gt;&lt;/a&gt;前言&lt;/h2&gt;&lt;p&gt;在开始之前，说明一下为什么写这篇文章吧。虚拟 DOM（本文后面统一 &lt;code&gt;vDOM&lt;/code&gt;），这个词经常在面试、社区文章中出现，都在说 vDOM 快、至于快在哪里也没个人能说的清楚（当然，我也不一定是对的，主要是分享自己对 vDOM 和 DOM 的看法），从网上看到的资料我能了解到的就是使用 JavaScript 的普通对象&lt;code&gt;抽象&lt;/code&gt;出一个 vDOM 树，当数据变化的时候重新生成 vDOM 树，再通过 &lt;code&gt;diif&lt;/code&gt; 算法比较&lt;code&gt;新&lt;/code&gt; vDOM 和&lt;code&gt;旧&lt;/code&gt;的 vDOM 对比，看看是哪块的数据变动了，最后将变动的地方&lt;code&gt;映射&lt;/code&gt;到 DOM 上，从而完成页面数据的展示。那么问题就来了，既然最后都要修改 DOM 为什么还要弄出一个 vDOM 呢？吃饱了没事干？还遍历对比新旧 vDOM 的差异，饶了一圈不还是要改 DOM 吗？我陷入了沉思…..&lt;/p&gt;
&lt;h2 id=&#34;正文&#34;&gt;&lt;a href=&#34;#正文&#34; class=&#34;headerlink&#34; title=&#34;正文&#34;&gt;&lt;/a&gt;正文&lt;/h2&gt;&lt;p&gt;什么是 vDOM 我就不多说了，基于&lt;code&gt;前言&lt;/code&gt;最后一句话的思考，我更想了解 vDOM 它究竟带来什么优点，前端巨头 Vue、React 都在用，这究竟是为什么？？&lt;/p&gt;
&lt;p&gt;于是我打开了 Vue 的官网 &lt;a href=&#34;https://web.archive.org/web/20231017125349/https://cn.vuejs.org/guide/extras/rendering-mechanism&#34;&gt;Virtual DOM&lt;/a&gt;，并未在文档长看到有任何地方描述 vDOM 效率高、速度快、内存占用低。&lt;/p&gt;
&lt;p&gt;再来看看 React 官网 &lt;a href=&#34;https://web.archive.org/web/20231017131640/https://zh-hans.legacy.reactjs.org/docs/faq-internals.html&#34;&gt;Virtual DOM - 中文&lt;/a&gt; &lt;a href=&#34;https://web.archive.org/web/20231017131401/https://legacy.reactjs.org/docs/faq-internals.html&#34;&gt;Virtual DOM - 英语&lt;/a&gt;，和 Vue 一样，并未提起 vDOM 效率高、速度快、内存占用低等字眼。其中有一句话：在 React 的世界里，术语 “Virtual DOM” 通常与 React 元素关联在一起，因为它们都是代表了&lt;code&gt;用户界面的对象&lt;/code&gt;。&lt;/p&gt;
&lt;p&gt;因此 vDOM 并不是在提高效率，而是在消耗效率。为什么这么说？因为同样是前端框架，后起之秀 &lt;a href=&#34;https://svelte.dev&#34;&gt;Svelte.js&lt;/a&gt; 和 &lt;a href=&#34;https://www.solidjs.com&#34;&gt;Solid.js&lt;/a&gt; 都没有使用 vDOM 反而效率还吊打 Vue.js 和 React.js ，效率甚至直逼 Vanilla.js (原生 JS)&lt;/p&gt;
&lt;h3 id=&#34;为什么需要虚拟-DOM&#34;&gt;&lt;a href=&#34;#为什么需要虚拟-DOM&#34; class=&#34;headerlink&#34; title=&#34;为什么需要虚拟 DOM&#34;&gt;&lt;/a&gt;为什么需要虚拟 DOM&lt;/h3&gt;&lt;p&gt;那么问题来了，为什么需要 vDOM，vDOM 效率不是比 DOM 低吗？为什么还要用？整那么多判断和数据对比，最后不还是要改 DOM 吗？为什么不直接改 DOM？&lt;/p&gt;
&lt;p&gt;我们先想想 vDOM 究竟带来了什么优势。&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;p&gt;跨平台：借助一些工具可以将 vDOM &lt;code&gt;转换&lt;/code&gt;成对应平台可以认识的东西&lt;br&gt;例如在浏览器中 react 就需要 react-dom 这个库在实现将 vDOM 转换成真实 DOM。&lt;br&gt;还有 react-native 将 vDOM 转换成 &lt;code&gt;Android&lt;/code&gt; 和 &lt;code&gt;iOS&lt;/code&gt; 平台可以使用的用户界面。&lt;br&gt;&lt;br&gt;再举个 🌰，国内 uniApp 很多前端开发多多少少都听过吧？做小程序，或 APP 的，它使用 Vue vDOM 转换成对应平台、iOS、Android、小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;简单方便: 能让你轻松的操作 DOM，也不用你去维护 DOM 的状态。&lt;br&gt;不像浏览器中的 DOM 每次都要 document.querySelector，甚至还要判断获取的这个真实 DOM 到底存不存在，这样写代码就非常的恶心&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;性能提升: 不是说 vDOM 性能比不上 DOM 吗？为什么还说它性能提升？&lt;br&gt;在某些情况下，vDOM 性能确实是要比 DOM 性能好，如果有 1000 个 DOM 节点（举例 ul&amp;gt;li），这是后端返回的数据，需要渲染到页面上（一般人谁没事后端返回你那么多数据干嘛，更何况你也不能一次性渲染那么多数据啊，用户又看不到那么多，基本上都是做分页处理），假如有某种业务需求，修改了 100 个 li 接下来看看 vDOM 和 DOM 是怎么运行的吧&lt;br&gt;&lt;br&gt;vDOM 生成一个新的 vDOM 跟旧的 vDOM 对比，发现有 100 个 li 数据发生了变化，这时 vDOM 开始修改 DOM ，这个过程中只触发一次 DOM 修改&lt;br&gt;&lt;br&gt;DOM 可能也会和 vDOM 一样最后只触发一次 DOM 修改，也可能触发 100 次左右的 DOM 修改，具体看代码是怎么实现&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;figure class=&#34;highlight js&#34;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&#34;gutter&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;2&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;3&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;4&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;5&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;6&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;7&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;8&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;9&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;10&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;11&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;12&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;13&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;14&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;15&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;16&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;17&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;18&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;19&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;20&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;21&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;22&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;23&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;24&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;25&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&#34;code&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;!(&lt;span class=&#34;function&#34;&gt;() =&amp;gt;&lt;/span&gt; &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;keyword&#34;&gt;const&lt;/span&gt; ul = &lt;span class=&#34;variable language_&#34;&gt;document&lt;/span&gt;.&lt;span class=&#34;title function_&#34;&gt;querySelector&lt;/span&gt;(&lt;span class=&#34;string&#34;&gt;&amp;#x27;ul&amp;#x27;&lt;/span&gt;)&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;keyword&#34;&gt;for&lt;/span&gt; (&lt;span class=&#34;keyword&#34;&gt;let&lt;/span&gt; i = &lt;span class=&#34;number&#34;&gt;0&lt;/span&gt;; i &amp;lt; &lt;span class=&#34;number&#34;&gt;100&lt;/span&gt;; i++) &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    &lt;span class=&#34;keyword&#34;&gt;const&lt;/span&gt; li = &lt;span class=&#34;variable language_&#34;&gt;document&lt;/span&gt;.&lt;span class=&#34;title function_&#34;&gt;createElement&lt;/span&gt;(&lt;span class=&#34;string&#34;&gt;&amp;#x27;li&amp;#x27;&lt;/span&gt;)&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    li.&lt;span class=&#34;property&#34;&gt;textContent&lt;/span&gt; = i&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    &lt;span class=&#34;comment&#34;&gt;// 关键点&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    &lt;span class=&#34;comment&#34;&gt;// 每次给 ul 的子元素都添加一个 li，就排版一次，100次循环结束后排版了100次，也绘制渲染了100次&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    &lt;span class=&#34;comment&#34;&gt;// 不知道我这样说是不是对的，因为我对浏览器渲染原理也不是很了解。重排、重绘&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    ul.&lt;span class=&#34;title function_&#34;&gt;appendChild&lt;/span&gt;(li)&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&amp;#125;)()&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;!(&lt;span class=&#34;function&#34;&gt;() =&amp;gt;&lt;/span&gt; &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;keyword&#34;&gt;const&lt;/span&gt; ul = &lt;span class=&#34;variable language_&#34;&gt;document&lt;/span&gt;.&lt;span class=&#34;title function_&#34;&gt;querySelector&lt;/span&gt;(&lt;span class=&#34;string&#34;&gt;&amp;#x27;ul&amp;#x27;&lt;/span&gt;)&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;keyword&#34;&gt;const&lt;/span&gt; fragment = &lt;span class=&#34;variable language_&#34;&gt;document&lt;/span&gt;.&lt;span class=&#34;title function_&#34;&gt;createDocumentFragment&lt;/span&gt;()&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;keyword&#34;&gt;for&lt;/span&gt; (&lt;span class=&#34;keyword&#34;&gt;let&lt;/span&gt; i = &lt;span class=&#34;number&#34;&gt;0&lt;/span&gt;; i &amp;lt; &lt;span class=&#34;number&#34;&gt;100&lt;/span&gt;; i++) &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    &lt;span class=&#34;keyword&#34;&gt;const&lt;/span&gt; li = &lt;span class=&#34;variable language_&#34;&gt;document&lt;/span&gt;.&lt;span class=&#34;title function_&#34;&gt;createElement&lt;/span&gt;(&lt;span class=&#34;string&#34;&gt;&amp;#x27;li&amp;#x27;&lt;/span&gt;)&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    li.&lt;span class=&#34;property&#34;&gt;textContent&lt;/span&gt; = i&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    &lt;span class=&#34;comment&#34;&gt;// 关键点&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    &lt;span class=&#34;comment&#34;&gt;// 每次给文档碎片里添加一个 li 这只是在内存中，并没有添加到页面上，所以页面并会不会发生什么变化&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    fragment.&lt;span class=&#34;title function_&#34;&gt;appendChild&lt;/span&gt;(li)&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;comment&#34;&gt;// 直到循环完毕后，将文档碎片里的所有 li 一次性添加到 ul 里，此时页面只触发一次重排、重绘&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  ul.&lt;span class=&#34;title function_&#34;&gt;appendChild&lt;/span&gt;(fragment)&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&amp;#125;)()&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;

&lt;h3 id=&#34;总结&#34;&gt;&lt;a href=&#34;#总结&#34; class=&#34;headerlink&#34; title=&#34;总结&#34;&gt;&lt;/a&gt;总结&lt;/h3&gt;&lt;p&gt;本文仅仅是乐特对 vDOM 的理解和感悟，并未真正的去翻看文中提到的框架源码，所以我希望大家看完这篇文章后能够有一些自己的看法和理解，并自己行动去寻找自己的答案，而不是在网上看到别人写的文章就真的以为别人说的就是对的，从而丧失自己的判断里。就像网上发的短视频，未知事情真伪，仅仅是看到了别人裁剪视频的一小部分，就在评论区跟风&lt;/p&gt;
&lt;p&gt;总结(这才是真正的总结)，vDOM 并没有提高效率，反而是在降低效率，继续上面所说的 1000 个 DOM 节点，如果我只修改了 1 个 li 呢？vDOM 还是会生成一个新的 vDOM 和旧的 vDOM 对比，白白跑了 1000 次&lt;/p&gt;
&lt;p&gt;如果有哪写的不对的，还请各位大佬指出 😁😁&lt;/p&gt;
</content>
        <category term="JavaScript" />
        <updated>2023-10-17T20:00:29.000Z</updated>
    </entry>
    <entry>
        <id>https://blog.imlete.cn/article/Beautify-Windows-Terminal-PowerShell.html</id>
        <title>美化 Windows 终端(Terminal + PowerShell)</title>
        <link rel="alternate" href="https://blog.imlete.cn/article/Beautify-Windows-Terminal-PowerShell.html"/>
        <content type="html">&lt;h2 id=&#34;前言&#34;&gt;&lt;a href=&#34;#前言&#34; class=&#34;headerlink&#34; title=&#34;前言&#34;&gt;&lt;/a&gt;前言&lt;/h2&gt;&lt;p&gt;废话不多说，这是我做的一个 Oh-My-Posh 终端主题，仓库地址: &lt;a href=&#34;https://github.com/Lete114/oh-my-posh-themes&#34;&gt;https://github.com/Lete114/oh-my-posh-themes&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;效果如下:&lt;br&gt;&lt;img src=&#34;/img/Beautify-Windows-Terminal-PowerShell/lete114.png&#34; alt=&#34;&#34;&gt;&lt;/p&gt;
&lt;h2 id=&#34;Windows-Terminal&#34;&gt;&lt;a href=&#34;#Windows-Terminal&#34; class=&#34;headerlink&#34; title=&#34;Windows Terminal&#34;&gt;&lt;/a&gt;Windows Terminal&lt;/h2&gt;&lt;blockquote&gt;
&lt;p&gt;安装需要 Win10 2004（内部版本 19041）或更高版本&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Windows Terminal 是微软开源一个终端工具，主要功能包括多个选项卡、窗格、Unicode、和 UTF-8 字符支持，GPU 加速文本渲染引擎以及自定义主题、样式和配置&lt;/p&gt;
&lt;p&gt;总之比 cmd、powershell 那丑不拉几的窗口好使就对了&lt;/p&gt;
&lt;p&gt;可以通过微软商店直接安装，或者到开源仓库取下载安装都可以&lt;/p&gt;
&lt;p&gt;&lt;a href=&#34;https://github.com/microsoft/terminal&#34;&gt;https://github.com/microsoft/terminal&lt;/a&gt;&lt;/p&gt;
&lt;h2 id=&#34;Oh-My-Posh&#34;&gt;&lt;a href=&#34;#Oh-My-Posh&#34; class=&#34;headerlink&#34; title=&#34;Oh My Posh&#34;&gt;&lt;/a&gt;Oh My Posh&lt;/h2&gt;&lt;p&gt;Oh My Posh 类似于 Oh My zsh 的一个命令行提示工具，具体的得看官网描述 &lt;a href=&#34;https://ohmyposh.dev/docs/&#34;&gt;Oh My Posh Docs&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;安装 Oh My Posh ，参考官网安装教程&lt;br&gt;&lt;a href=&#34;https://ohmyposh.dev/docs/installation/windows&#34;&gt;https://ohmyposh.dev/docs/installation/windows&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;使用 &lt;code&gt;winget&lt;/code&gt; 安装&lt;/p&gt;
&lt;figure class=&#34;highlight bash&#34;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&#34;gutter&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;1&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&#34;code&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;winget install JanDeDobbeleer.OhMyPosh -s winget&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;

&lt;blockquote&gt;
&lt;p&gt;建议使用 powershell&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;使用 Oh My Posh，如果你不找到你当前使用的是什么终端，你可以执行这条命令查看，具体详细请看官网 &lt;a href=&#34;https://ohmyposh.dev/docs/installation/prompt&#34;&gt;https://ohmyposh.dev/docs/installation/prompt&lt;/a&gt;&lt;/p&gt;
&lt;figure class=&#34;highlight bash&#34;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&#34;gutter&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;1&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&#34;code&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;oh-my-posh get shell&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;

&lt;p&gt;使用记事本或 vscode 打开 powershell 的配置文件&lt;/p&gt;
&lt;figure class=&#34;highlight bash&#34;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&#34;gutter&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;2&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;3&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;4&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;5&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&#34;code&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;comment&#34;&gt;# 记事本&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;notepad &lt;span class=&#34;variable&#34;&gt;$PROFILE&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;comment&#34;&gt;# vscode&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;code &lt;span class=&#34;variable&#34;&gt;$PROFILE&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;

&lt;blockquote&gt;
&lt;p&gt;当上述命令出现错误时，确保先创建配置文件&lt;/p&gt;
&lt;figure class=&#34;highlight bash&#34;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&#34;gutter&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;1&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&#34;code&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;New-Item -Path &lt;span class=&#34;variable&#34;&gt;$PROFILE&lt;/span&gt; -Type File -Force&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;/blockquote&gt;
&lt;p&gt;在文件中添加如下代码使用 Oh My Posh&lt;/p&gt;
&lt;figure class=&#34;highlight bash&#34;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&#34;gutter&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;2&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;3&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;4&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;5&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;6&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;7&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;8&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;9&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;10&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;11&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;12&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;13&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;14&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;15&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&#34;code&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;comment&#34;&gt;# 注意这仅仅只是使用了 Oh My Posh，你可能会发现终端有乱码&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;comment&#34;&gt;# 因为 Oh My Posh 使用了 Nerd Fonts 字体中的一些图标，如果你的电脑中没有 Nerd Fonts 字体就会出现乱码&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;comment&#34;&gt;# 自带的主题就使用了 Nerd Fonts 的图标&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;oh-my-posh init pwsh | Invoke-Expression&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;comment&#34;&gt;# 自定义主题，使用 Oh My Posh 自带的一些开箱即用主题&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;comment&#34;&gt;# 这里是 Oh My Posh 自带的主题 https://ohmyposh.dev/docs/themes&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;oh-my-posh init pwsh --config &lt;span class=&#34;string&#34;&gt;&amp;quot;&lt;span class=&#34;variable&#34;&gt;$env&lt;/span&gt;:POSH_THEMES_PATH/robbyrussell.omp.json&amp;quot;&lt;/span&gt; | Invoke-Expression&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;comment&#34;&gt;# 下载我做的主题，我主题不需要安装 Nerd Fonts 字体&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;comment&#34;&gt;# https://raw.githubusercontent.com/Lete114/oh-my-posh-themes/main/lete114/lete114.minimal.omp.yaml&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;oh-my-posh init pwsh --config &lt;span class=&#34;string&#34;&gt;&amp;quot;你下载的路径/lete114.minimal.omp.yaml&amp;quot;&lt;/span&gt; | Invoke-Expression&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;comment&#34;&gt;# 之后执行以下命令加载配置文件&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;. &lt;span class=&#34;variable&#34;&gt;$profile&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;

&lt;h3 id=&#34;安装字体&#34;&gt;&lt;a href=&#34;#安装字体&#34; class=&#34;headerlink&#34; title=&#34;安装字体&#34;&gt;&lt;/a&gt;安装字体&lt;/h3&gt;&lt;p&gt;如果你使用的主题是含 &lt;code&gt;minimal&lt;/code&gt; 的就不需要安装&lt;/p&gt;
&lt;p&gt;参考官方: &lt;a href=&#34;https://ohmyposh.dev/docs/installation/fonts#configuration&#34;&gt;https://ohmyposh.dev/docs/installation/fonts#configuration&lt;/a&gt;&lt;/p&gt;
&lt;figure class=&#34;highlight bash&#34;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&#34;gutter&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;2&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;3&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;4&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;5&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&#34;code&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;oh-my-posh font install&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;comment&#34;&gt;# 也可以直接手动下载&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;comment&#34;&gt;# 下载完成后解压，全选右键点击安装即可自动安装&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;comment&#34;&gt;# https://github.com/ryanoasis/nerd-fonts/releases/download/v2.1.0/Meslo.zip&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;

&lt;blockquote&gt;
&lt;p&gt;以下操作是根据 Oh My Posh 官网教程搬过来的，但不知道为什么我的字体依然显示乱码&lt;br&gt;有知道是啥问题的小伙伴可以在评论区回复我&lt;br&gt;当然，设置字体也可以在 Windows Terminal 的设置中设置，不必打开配置文件 (但同样我也不知道为什么我的 Windows Terminal 里面没有设置字体的选项，就挺离谱 😅)&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;安装完成后打开 Windows Terminal 然后按 &lt;code&gt;Ctrl+Shift+,&lt;/code&gt;(逗号) 来打开 settings.json 配置文件&lt;/p&gt;
&lt;p&gt;找到 &lt;code&gt;profiles-&amp;gt;defaults&lt;/code&gt; 设置 &lt;code&gt;font-&amp;gt;face&lt;/code&gt;&lt;/p&gt;
&lt;figure class=&#34;highlight plaintext&#34;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&#34;gutter&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;2&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;3&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;4&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;5&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;6&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;7&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;8&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;9&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;10&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;11&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;12&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&#34;code&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;&amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    &amp;quot;profiles&amp;quot;:&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;        &amp;quot;defaults&amp;quot;:&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;        &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;            &amp;quot;font&amp;quot;:&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;            &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;                &amp;quot;face&amp;quot;: &amp;quot;MesloLGM NF&amp;quot;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;            &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;        &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&amp;#125;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;

&lt;h2 id=&#34;posh-git&#34;&gt;&lt;a href=&#34;#posh-git&#34; class=&#34;headerlink&#34; title=&#34;posh-git&#34;&gt;&lt;/a&gt;posh-git&lt;/h2&gt;&lt;p&gt;提供完整的 git 命令行提示以及自动补全&lt;/p&gt;
&lt;p&gt;&lt;a href=&#34;https://github.com/dahlbyk/posh-git&#34;&gt;https://github.com/dahlbyk/posh-git&lt;/a&gt;&lt;/p&gt;
&lt;figure class=&#34;highlight bash&#34;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&#34;gutter&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;2&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&#34;code&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;comment&#34;&gt;# 安装 posh-git&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;Install-Module posh-git -Scope CurrentUser -Force&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;

&lt;p&gt;然后打开 PowerShell 配置文件，添加一行导入命令 &lt;code&gt;Import-Module posh-git&lt;/code&gt; 即可&lt;/p&gt;
&lt;figure class=&#34;highlight bash&#34;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&#34;gutter&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;2&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;3&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;4&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;5&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&#34;code&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;comment&#34;&gt;# 记事本打开配置文件&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;notepad &lt;span class=&#34;variable&#34;&gt;$PROFILE&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;comment&#34;&gt;# 或使用 vscode 打开配置文件&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;code &lt;span class=&#34;variable&#34;&gt;$PROFILE&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;

&lt;h2 id=&#34;PSReadLine&#34;&gt;&lt;a href=&#34;#PSReadLine&#34; class=&#34;headerlink&#34; title=&#34;PSReadLine&#34;&gt;&lt;/a&gt;PSReadLine&lt;/h2&gt;&lt;blockquote&gt;
&lt;p&gt;PowerShell 官方的插件，可以放心使用&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;提供输入提醒，类似于 zsh 中有个插件，具体叫什么名字我忘了，就是当你输入一个命令输入到一半后，控制台就会有灰色命令提示，之后按下方向键的右键（-&amp;gt;）键就能不全的根据&lt;/p&gt;
&lt;p&gt;&lt;a href=&#34;https://github.com/PowerShell/PSReadLine&#34;&gt;https://github.com/PowerShell/PSReadLine&lt;/a&gt;&lt;/p&gt;
&lt;figure class=&#34;highlight bash&#34;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&#34;gutter&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;2&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;3&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;4&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&#34;code&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;comment&#34;&gt;# 以下是搬运的官方的教程&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;Install-Module -Name PowerShellGet -Force&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;Install-Module PSReadLine -AllowPrerelease -Force&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;

&lt;p&gt;之后&lt;/p&gt;
&lt;figure class=&#34;highlight bash&#34;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&#34;gutter&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;2&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;3&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;4&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;5&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;6&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;7&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;8&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;9&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;10&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;11&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;12&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;13&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;14&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&#34;code&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;comment&#34;&gt;# 记事本打开配置文件&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;notepad &lt;span class=&#34;variable&#34;&gt;$PROFILE&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;comment&#34;&gt;# 或使用 vscode 打开配置文件&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;code &lt;span class=&#34;variable&#34;&gt;$PROFILE&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;comment&#34;&gt;# PSReadLine&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;Import-Module PSReadLine&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;comment&#34;&gt;# Enable Prediction History&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;Set-PSReadLineOption -PredictionSource History&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;comment&#34;&gt;# Advanced Autocompletion for arrow keys&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;Set-PSReadlineKeyHandler -Key UpArrow -Function HistorySearchBackward&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;Set-PSReadlineKeyHandler -Key DownArrow -Function HistorySearchForward&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;



</content>
        <category term="记录" />
        <category term="Windows" />
        <updated>2023-03-18T12:11:03.000Z</updated>
    </entry>
    <entry>
        <id>https://blog.imlete.cn/article/nonuse-es6+-implements-call-apply-bind.html</id>
        <title>不使用 ES6+ 实现 call apply bind 方法</title>
        <link rel="alternate" href="https://blog.imlete.cn/article/nonuse-es6+-implements-call-apply-bind.html"/>
        <content type="html">&lt;p&gt;使用 ES6+ 实现这三个方法其实非常简单，本文就来挑战一下，如果不适用 ES6+ 的情况下如何实现这三个方法&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;难点: 不能使用扩展运算符(…)该如何接收参数和传入参数&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;至于这三个方法有什么区别可以阅读我之前的这篇文章 &lt;a href=&#34;/article/call-apply-bind-distinction.html&#34;&gt;call()-apply()-bind()方法有什么不同？&lt;/a&gt;&lt;/p&gt;
&lt;h2 id=&#34;apply&#34;&gt;&lt;a href=&#34;#apply&#34; class=&#34;headerlink&#34; title=&#34;apply&#34;&gt;&lt;/a&gt;apply&lt;/h2&gt;&lt;p&gt;就不多说废话了，直接看代码&lt;/p&gt;
&lt;figure class=&#34;highlight js&#34;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&#34;gutter&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;2&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;3&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;4&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;5&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;6&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;7&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;8&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;9&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;10&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;11&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;12&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;13&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;14&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;15&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;16&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;17&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;18&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;19&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;20&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;21&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;22&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;23&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;24&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;25&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;26&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;27&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;28&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;29&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;30&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&#34;code&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;title class_&#34;&gt;Function&lt;/span&gt;.&lt;span class=&#34;property&#34;&gt;&lt;span class=&#34;keyword&#34;&gt;prototype&lt;/span&gt;&lt;/span&gt;.&lt;span class=&#34;property&#34;&gt;myApply&lt;/span&gt; = &lt;span class=&#34;keyword&#34;&gt;function&lt;/span&gt; (&lt;span class=&#34;params&#34;&gt;_this, args&lt;/span&gt;) &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;keyword&#34;&gt;try&lt;/span&gt; &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    _this = _this || &lt;span class=&#34;variable language_&#34;&gt;window&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    _this[&lt;span class=&#34;string&#34;&gt;&amp;#x27;#function#&amp;#x27;&lt;/span&gt;] = &lt;span class=&#34;variable language_&#34;&gt;this&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    &lt;span class=&#34;keyword&#34;&gt;if&lt;/span&gt; (!args) &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;      &lt;span class=&#34;keyword&#34;&gt;return&lt;/span&gt; _this[&lt;span class=&#34;string&#34;&gt;&amp;#x27;#function#&amp;#x27;&lt;/span&gt;]()&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    &amp;#125; &lt;span class=&#34;keyword&#34;&gt;else&lt;/span&gt; &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;      &lt;span class=&#34;keyword&#34;&gt;var&lt;/span&gt; params = &lt;span class=&#34;title class_&#34;&gt;JSON&lt;/span&gt;.&lt;span class=&#34;title function_&#34;&gt;stringify&lt;/span&gt;(args)&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;      &lt;span class=&#34;comment&#34;&gt;// 当 JSON.stringify 把一个数组解析成字符串是会多套一层 ‘[]’ ，所以需要裁切掉&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;      params = params.&lt;span class=&#34;title function_&#34;&gt;slice&lt;/span&gt;(&lt;span class=&#34;number&#34;&gt;1&lt;/span&gt;, params.&lt;span class=&#34;property&#34;&gt;length&lt;/span&gt; - &lt;span class=&#34;number&#34;&gt;1&lt;/span&gt;)&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;      &lt;span class=&#34;comment&#34;&gt;// 由于 Function 无法访问上级作用域，由于上层以及裁掉了首尾部分&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;      &lt;span class=&#34;comment&#34;&gt;// 所以得到 _this[&amp;quot;#function#&amp;quot;](1,2) 这样就能实现扩展运算符(...)的操作了，关于 new Function 请自行查阅&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;      &lt;span class=&#34;keyword&#34;&gt;return&lt;/span&gt; &lt;span class=&#34;keyword&#34;&gt;new&lt;/span&gt; &lt;span class=&#34;title class_&#34;&gt;Function&lt;/span&gt;(&lt;span class=&#34;string&#34;&gt;&amp;#x27;_this&amp;#x27;&lt;/span&gt;, &lt;span class=&#34;string&#34;&gt;&amp;#x27;return _this[&amp;quot;#function#&amp;quot;](&amp;#x27;&lt;/span&gt; + params + &lt;span class=&#34;string&#34;&gt;&amp;#x27;)&amp;#x27;&lt;/span&gt;)(_this)&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;      &lt;span class=&#34;comment&#34;&gt;// ------ 上面这坨你也可以改为 eval() ------&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;      &lt;span class=&#34;keyword&#34;&gt;var&lt;/span&gt; params = []&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;      &lt;span class=&#34;comment&#34;&gt;// 注意，这里的 i 初始值是 1 主要目的是为了去除第一个参数(也就是 _this)&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;      &lt;span class=&#34;keyword&#34;&gt;for&lt;/span&gt; (&lt;span class=&#34;keyword&#34;&gt;var&lt;/span&gt; i = &lt;span class=&#34;number&#34;&gt;1&lt;/span&gt;; i &amp;lt; &lt;span class=&#34;variable language_&#34;&gt;arguments&lt;/span&gt;.&lt;span class=&#34;property&#34;&gt;length&lt;/span&gt;; i++) &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;        params.&lt;span class=&#34;title function_&#34;&gt;push&lt;/span&gt;(&lt;span class=&#34;string&#34;&gt;&amp;#x27;arguments[&amp;#x27;&lt;/span&gt; + i + &lt;span class=&#34;string&#34;&gt;&amp;#x27;]&amp;#x27;&lt;/span&gt;)&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;      &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;      &lt;span class=&#34;comment&#34;&gt;// 这里解释一下，当引用类型与字符串拼接的时候会隐式调用 toString() ，数组调用 toString() 会返回如下结果&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;      &lt;span class=&#34;comment&#34;&gt;// _this[&amp;quot;#function#&amp;quot;](arguments[1],arguments[2],arguments[3])&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;      &lt;span class=&#34;comment&#34;&gt;// eval 执行后可以访问上级作用域的变量，这里就可以实现扩展运算符(...)的操作了&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;      &lt;span class=&#34;keyword&#34;&gt;return&lt;/span&gt; &lt;span class=&#34;built_in&#34;&gt;eval&lt;/span&gt;(&lt;span class=&#34;string&#34;&gt;&amp;#x27;_this[&amp;quot;#function#&amp;quot;](&amp;#x27;&lt;/span&gt; + params + &lt;span class=&#34;string&#34;&gt;&amp;#x27;)&amp;#x27;&lt;/span&gt;)&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &amp;#125; &lt;span class=&#34;keyword&#34;&gt;finally&lt;/span&gt; &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    &lt;span class=&#34;keyword&#34;&gt;delete&lt;/span&gt; _this[&lt;span class=&#34;string&#34;&gt;&amp;#x27;#function#&amp;#x27;&lt;/span&gt;]&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&amp;#125;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;

&lt;h2 id=&#34;call&#34;&gt;&lt;a href=&#34;#call&#34; class=&#34;headerlink&#34; title=&#34;call&#34;&gt;&lt;/a&gt;call&lt;/h2&gt;&lt;p&gt;由于前面以及实现了 &lt;code&gt;myApply&lt;/code&gt; 方法，再 &lt;code&gt;myCall&lt;/code&gt; 即可直接调用，如果要完整写一个 &lt;code&gt;myCall&lt;/code&gt; 也只是增加代码冗余而已&lt;/p&gt;
&lt;figure class=&#34;highlight js&#34;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&#34;gutter&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;2&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;3&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;4&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;5&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;6&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;7&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;8&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;9&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&#34;code&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;title class_&#34;&gt;Function&lt;/span&gt;.&lt;span class=&#34;property&#34;&gt;&lt;span class=&#34;keyword&#34;&gt;prototype&lt;/span&gt;&lt;/span&gt;.&lt;span class=&#34;property&#34;&gt;myCall&lt;/span&gt; = &lt;span class=&#34;keyword&#34;&gt;function&lt;/span&gt; (&lt;span class=&#34;params&#34;&gt;_this&lt;/span&gt;) &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  _this = _this || &lt;span class=&#34;variable language_&#34;&gt;window&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;keyword&#34;&gt;var&lt;/span&gt; params = []&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;comment&#34;&gt;// 注意，这里的 i 初始值是 1 主要目的是为了去除第一个参数(也就是 _this)&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;keyword&#34;&gt;for&lt;/span&gt; (&lt;span class=&#34;keyword&#34;&gt;var&lt;/span&gt; i = &lt;span class=&#34;number&#34;&gt;1&lt;/span&gt;; i &amp;lt; &lt;span class=&#34;variable language_&#34;&gt;arguments&lt;/span&gt;.&lt;span class=&#34;property&#34;&gt;length&lt;/span&gt;; i++) &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    params.&lt;span class=&#34;title function_&#34;&gt;push&lt;/span&gt;(&lt;span class=&#34;variable language_&#34;&gt;arguments&lt;/span&gt;[i])&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;keyword&#34;&gt;return&lt;/span&gt; &lt;span class=&#34;variable language_&#34;&gt;this&lt;/span&gt;.&lt;span class=&#34;title function_&#34;&gt;myApply&lt;/span&gt;(_this, params)&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&amp;#125;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;

&lt;h2 id=&#34;bind&#34;&gt;&lt;a href=&#34;#bind&#34; class=&#34;headerlink&#34; title=&#34;bind&#34;&gt;&lt;/a&gt;bind&lt;/h2&gt;&lt;p&gt;如上，可以继续复用已经封装好的&lt;/p&gt;
&lt;figure class=&#34;highlight js&#34;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&#34;gutter&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;2&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;3&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;4&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;5&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;6&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;7&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;8&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;9&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;10&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;11&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;12&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;13&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;14&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;15&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;16&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&#34;code&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;title class_&#34;&gt;Function&lt;/span&gt;.&lt;span class=&#34;property&#34;&gt;&lt;span class=&#34;keyword&#34;&gt;prototype&lt;/span&gt;&lt;/span&gt;.&lt;span class=&#34;property&#34;&gt;myBind&lt;/span&gt; = &lt;span class=&#34;keyword&#34;&gt;function&lt;/span&gt; (&lt;span class=&#34;params&#34;&gt;_this&lt;/span&gt;) &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  _this = _this || &lt;span class=&#34;variable language_&#34;&gt;window&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;keyword&#34;&gt;var&lt;/span&gt; self = &lt;span class=&#34;variable language_&#34;&gt;this&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;keyword&#34;&gt;var&lt;/span&gt; params = []&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;comment&#34;&gt;// 注意，这里的 i 初始值是 1 主要目的是为了去除第一个参数(也就是 _this)&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;keyword&#34;&gt;for&lt;/span&gt; (&lt;span class=&#34;keyword&#34;&gt;var&lt;/span&gt; i = &lt;span class=&#34;number&#34;&gt;1&lt;/span&gt;; i &amp;lt; &lt;span class=&#34;variable language_&#34;&gt;arguments&lt;/span&gt;.&lt;span class=&#34;property&#34;&gt;length&lt;/span&gt;; i++) &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    params.&lt;span class=&#34;title function_&#34;&gt;push&lt;/span&gt;(&lt;span class=&#34;variable language_&#34;&gt;arguments&lt;/span&gt;[i])&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;keyword&#34;&gt;return&lt;/span&gt; &lt;span class=&#34;keyword&#34;&gt;function&lt;/span&gt; (&lt;span class=&#34;params&#34;&gt;&lt;/span&gt;) &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    &lt;span class=&#34;comment&#34;&gt;// 注意这里的 i 初始值是 0 ,因为它不需要移除 _this ，可能这有点乱，希望读者多多思考&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    &lt;span class=&#34;keyword&#34;&gt;for&lt;/span&gt; (&lt;span class=&#34;keyword&#34;&gt;var&lt;/span&gt; i = &lt;span class=&#34;number&#34;&gt;0&lt;/span&gt;; i &amp;lt; &lt;span class=&#34;variable language_&#34;&gt;arguments&lt;/span&gt;.&lt;span class=&#34;property&#34;&gt;length&lt;/span&gt;; i++) &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;      params.&lt;span class=&#34;title function_&#34;&gt;push&lt;/span&gt;(&lt;span class=&#34;variable language_&#34;&gt;arguments&lt;/span&gt;[i])&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    &lt;span class=&#34;keyword&#34;&gt;return&lt;/span&gt; self.&lt;span class=&#34;title function_&#34;&gt;myApply&lt;/span&gt;(_this, params)&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&amp;#125;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;

&lt;h2 id=&#34;总结&#34;&gt;&lt;a href=&#34;#总结&#34; class=&#34;headerlink&#34; title=&#34;总结&#34;&gt;&lt;/a&gt;总结&lt;/h2&gt;&lt;p&gt;以上就是本文的全部内容，可能会存在一些小瑕疵，希望各位读者留言评论或优化&lt;/p&gt;
</content>
        <category term="记录" />
        <category term="JavaScript" />
        <updated>2022-11-04T15:24:31.000Z</updated>
    </entry>
    <entry>
        <id>https://blog.imlete.cn/article/webpack-on-demand-loading-principle.html</id>
        <title>webpack 按需加载原理</title>
        <link rel="alternate" href="https://blog.imlete.cn/article/webpack-on-demand-loading-principle.html"/>
        <content type="html">&lt;blockquote&gt;
&lt;p&gt;本文不会带你去阅读 &lt;code&gt;build&lt;/code&gt; 后的源码，而是告诉你它是怎么做到的，原理是什么，怎么实现，如何自己动手做一个按需加载模块，如果不想听本文 BB，可直接一步到页脚，获取完整代码 &lt;a href=&#34;#完整的按需加载代码&#34;&gt;#完整的按需加载代码&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2 id=&#34;准备&#34;&gt;&lt;a href=&#34;#准备&#34; class=&#34;headerlink&#34; title=&#34;准备&#34;&gt;&lt;/a&gt;准备&lt;/h2&gt;&lt;p&gt;如果你想阅读源码，你可以根据下面的结构去创建，然后自己打包阅读源码&lt;/p&gt;
&lt;figure class=&#34;highlight js&#34;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&#34;gutter&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;2&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;3&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;4&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;5&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;6&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;7&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;8&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;9&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;10&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;11&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;12&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;13&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;14&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;15&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;16&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;17&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&#34;code&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;comment&#34;&gt;// webpack.config.js&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;keyword&#34;&gt;const&lt;/span&gt; path = &lt;span class=&#34;built_in&#34;&gt;require&lt;/span&gt;(&lt;span class=&#34;string&#34;&gt;&amp;#x27;path&amp;#x27;&lt;/span&gt;)&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;keyword&#34;&gt;const&lt;/span&gt; mode = &lt;span class=&#34;string&#34;&gt;&amp;#x27;production&amp;#x27;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;variable language_&#34;&gt;module&lt;/span&gt;.&lt;span class=&#34;property&#34;&gt;exports&lt;/span&gt; = &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  mode,&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;attr&#34;&gt;entry&lt;/span&gt;: &lt;span class=&#34;string&#34;&gt;&amp;#x27;./src/index.js&amp;#x27;&lt;/span&gt;,&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;attr&#34;&gt;output&lt;/span&gt;: &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    &lt;span class=&#34;attr&#34;&gt;path&lt;/span&gt;: path.&lt;span class=&#34;title function_&#34;&gt;join&lt;/span&gt;(__dirname, &lt;span class=&#34;string&#34;&gt;&amp;#x27;dist&amp;#x27;&lt;/span&gt;),&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    &lt;span class=&#34;attr&#34;&gt;filename&lt;/span&gt;: &lt;span class=&#34;string&#34;&gt;&amp;#x27;main.js&amp;#x27;&lt;/span&gt;,&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    &lt;span class=&#34;attr&#34;&gt;chunkFilename&lt;/span&gt;: &lt;span class=&#34;string&#34;&gt;&amp;#x27;[name].js&amp;#x27;&lt;/span&gt;,&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    &lt;span class=&#34;attr&#34;&gt;libraryTarget&lt;/span&gt;: &lt;span class=&#34;string&#34;&gt;&amp;#x27;umd&amp;#x27;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &amp;#125;,&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;attr&#34;&gt;optimization&lt;/span&gt;: &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    &lt;span class=&#34;attr&#34;&gt;minimize&lt;/span&gt;: &lt;span class=&#34;literal&#34;&gt;false&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&amp;#125;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;

&lt;figure class=&#34;highlight js&#34;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&#34;gutter&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;2&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&#34;code&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;comment&#34;&gt;// src/test.js&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;variable language_&#34;&gt;module&lt;/span&gt;.&lt;span class=&#34;property&#34;&gt;exports&lt;/span&gt; = &lt;span class=&#34;string&#34;&gt;&amp;#x27;test&amp;#x27;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;

&lt;figure class=&#34;highlight js&#34;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&#34;gutter&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;2&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;3&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;4&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;5&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;6&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;7&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;8&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&#34;code&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;comment&#34;&gt;// src/index.js&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;comment&#34;&gt;// 当调用 window 的 init 方法时触发加载 test.js ，加载完成后输出结果&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;variable language_&#34;&gt;window&lt;/span&gt;.&lt;span class=&#34;property&#34;&gt;init&lt;/span&gt; = &lt;span class=&#34;keyword&#34;&gt;function&lt;/span&gt; (&lt;span class=&#34;params&#34;&gt;&lt;/span&gt;) &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;title function_&#34;&gt;import&lt;/span&gt;(&lt;span class=&#34;comment&#34;&gt;/* webpackChunkName: &amp;quot;test&amp;quot; */&lt;/span&gt; &lt;span class=&#34;string&#34;&gt;&amp;#x27;./test&amp;#x27;&lt;/span&gt;).&lt;span class=&#34;title function_&#34;&gt;then&lt;/span&gt;(&lt;span class=&#34;function&#34;&gt;(&lt;span class=&#34;params&#34;&gt;r&lt;/span&gt;) =&amp;gt;&lt;/span&gt; &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    &lt;span class=&#34;variable language_&#34;&gt;console&lt;/span&gt;.&lt;span class=&#34;title function_&#34;&gt;log&lt;/span&gt;(r)&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &amp;#125;)&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&amp;#125;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;

&lt;h2 id=&#34;import-干了什么&#34;&gt;&lt;a href=&#34;#import-干了什么&#34; class=&#34;headerlink&#34; title=&#34;import() 干了什么&#34;&gt;&lt;/a&gt;import() 干了什么&lt;/h2&gt;&lt;p&gt;其实 webpack 就是把 &lt;code&gt;import()&lt;/code&gt; 动态导入的模块打包成了一个文件，而其中的 &lt;code&gt;webpackChunkName&lt;/code&gt; 注释就是定义打包后这个动态模块的 js 文件，上方指定命名为 &lt;code&gt;test&lt;/code&gt;，则打包结果为 &lt;code&gt;test.js&lt;/code&gt;,如果没有写 &lt;code&gt;webpackChunkName&lt;/code&gt; 那么 webpack 会自动定义随机的文件名(当然这不是随机的，它是根据文件中的内容进行 hash 推算的，只要内容没变，他就一直是这个名字，这段感兴趣的可以自己去阅读源码)&lt;/p&gt;
&lt;h2 id=&#34;如何获取-url&#34;&gt;&lt;a href=&#34;#如何获取-url&#34; class=&#34;headerlink&#34; title=&#34;如何获取 url&#34;&gt;&lt;/a&gt;如何获取 url&lt;/h2&gt;&lt;p&gt;我在没看打包结果的源码时，我是这样想的，既然要加载，那么一定是通过 &lt;code&gt;script&lt;/code&gt; 标签&lt;br&gt;因为引入是多变的，比如通过本地引入，或是 cdn 引入，又或者是其它方式，而 webpack 它是无法判断引入方式的，那么该如何获取 js 文件的 url 地址呢？&lt;/p&gt;
&lt;p&gt;拦截请求：&lt;br&gt;不过 &lt;code&gt;script&lt;/code&gt; 发出的请求是浏览器发送的，并不像 &lt;code&gt;xhr&lt;/code&gt; 一样可以包装一层进行 hook 拦截&lt;br&gt;于是我又想到了 &lt;code&gt;Service Workers&lt;/code&gt; 的 &lt;code&gt;fetch&lt;/code&gt; 事件，不过 webpack 怎么可能干这种事，这就属于入侵式修改了，不合理&lt;/p&gt;
&lt;p&gt;思来想去，我实在是想不到有啥办法了，于是我就去看了源码，万万没想到啊，居然是用 &lt;a href=&#34;https://developer.mozilla.org/zh-CN/docs/Web/API/Document/currentScript&#34;&gt;document.currentScript&lt;/a&gt; 属性，我居然把这给忘了:(&lt;/p&gt;
&lt;figure class=&#34;highlight js&#34;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&#34;gutter&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;2&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&#34;code&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;comment&#34;&gt;// 获取当前 script 标签的 src 属性&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;variable language_&#34;&gt;document&lt;/span&gt;.&lt;span class=&#34;property&#34;&gt;currentScript&lt;/span&gt;.&lt;span class=&#34;property&#34;&gt;src&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;

&lt;p&gt;webpack 源码里还写了一个获取当前 script 标签的代码&lt;/p&gt;
&lt;figure class=&#34;highlight js&#34;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&#34;gutter&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;2&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;3&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;4&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&#34;code&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;comment&#34;&gt;// 获取到所有的 script 标签&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;keyword&#34;&gt;var&lt;/span&gt; scripts = &lt;span class=&#34;variable language_&#34;&gt;document&lt;/span&gt;.&lt;span class=&#34;title function_&#34;&gt;getElementsByTagName&lt;/span&gt;(&lt;span class=&#34;string&#34;&gt;&amp;#x27;script&amp;#x27;&lt;/span&gt;)&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;comment&#34;&gt;// 如果有，这通过下表获取&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;keyword&#34;&gt;if&lt;/span&gt; (scripts.&lt;span class=&#34;property&#34;&gt;length&lt;/span&gt;) scriptUrl = scripts[scripts.&lt;span class=&#34;property&#34;&gt;length&lt;/span&gt; - &lt;span class=&#34;number&#34;&gt;1&lt;/span&gt;].&lt;span class=&#34;property&#34;&gt;src&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;

&lt;p&gt;原理是什么呢？，大家都知道，html 是从上往下解析的，当解析到 script 标签时，浏览器会阻塞页面渲染，等待下载完当前 js 并执行完成后才会继续往下解析，(除非你给当前 script 标签使用了 &lt;code&gt;async&lt;/code&gt; 或 &lt;code&gt;defer&lt;/code&gt; 属性，至于这俩属性的作用，可自行网上搜索)这时使用 &lt;code&gt;document.getElementsByTagName(&amp;#39;script&amp;#39;)&lt;/code&gt; 获取页面上的 script 标签则只会获取到已经解析的 script 标签，所以当前的 script 标签它一定是最后一个 script 标签，就可以通过 &lt;code&gt;length - 1&lt;/code&gt; 获取啦&lt;/p&gt;
&lt;p&gt;既然得到了 url，那么就可以加载 js 了，只需要把当前的 js 文件名改成需要加载的 js 文件名，也就是前面所说的 &lt;code&gt;webpackChunkName&lt;/code&gt;&lt;/p&gt;
&lt;figure class=&#34;highlight js&#34;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&#34;gutter&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;2&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;3&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;4&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;5&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;6&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;7&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;8&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;9&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;10&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;11&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;12&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&#34;code&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;keyword&#34;&gt;let&lt;/span&gt; scriptUrl&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;keyword&#34;&gt;if&lt;/span&gt; (&lt;span class=&#34;variable language_&#34;&gt;document&lt;/span&gt;.&lt;span class=&#34;property&#34;&gt;currentScript&lt;/span&gt;) scriptUrl = &lt;span class=&#34;variable language_&#34;&gt;document&lt;/span&gt;.&lt;span class=&#34;property&#34;&gt;currentScript&lt;/span&gt;.&lt;span class=&#34;property&#34;&gt;src&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;keyword&#34;&gt;if&lt;/span&gt; (!scriptUrl) &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;keyword&#34;&gt;const&lt;/span&gt; scripts = &lt;span class=&#34;variable language_&#34;&gt;document&lt;/span&gt;.&lt;span class=&#34;title function_&#34;&gt;getElementsByTagName&lt;/span&gt;(&lt;span class=&#34;string&#34;&gt;&amp;#x27;script&amp;#x27;&lt;/span&gt;)&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;keyword&#34;&gt;if&lt;/span&gt; (scripts.&lt;span class=&#34;property&#34;&gt;length&lt;/span&gt;) scriptUrl = scripts[scripts.&lt;span class=&#34;property&#34;&gt;length&lt;/span&gt; - &lt;span class=&#34;number&#34;&gt;1&lt;/span&gt;].&lt;span class=&#34;property&#34;&gt;src&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;keyword&#34;&gt;if&lt;/span&gt; (!scriptUrl) &lt;span class=&#34;keyword&#34;&gt;throw&lt;/span&gt; &lt;span class=&#34;keyword&#34;&gt;new&lt;/span&gt; &lt;span class=&#34;title class_&#34;&gt;Error&lt;/span&gt;(&lt;span class=&#34;string&#34;&gt;&amp;#x27;Automatic publicPath is not supported in this browser&amp;#x27;&lt;/span&gt;)&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;comment&#34;&gt;// 结果以下几个 replace() 即可得到 url&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;scriptUrl = scriptUrl&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  .&lt;span class=&#34;title function_&#34;&gt;replace&lt;/span&gt;(&lt;span class=&#34;regexp&#34;&gt;/#.*$/&lt;/span&gt;, &lt;span class=&#34;string&#34;&gt;&amp;#x27;&amp;#x27;&lt;/span&gt;) &lt;span class=&#34;comment&#34;&gt;// 去除锚点&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  .&lt;span class=&#34;title function_&#34;&gt;replace&lt;/span&gt;(&lt;span class=&#34;regexp&#34;&gt;/\?.*$/&lt;/span&gt;, &lt;span class=&#34;string&#34;&gt;&amp;#x27;&amp;#x27;&lt;/span&gt;) &lt;span class=&#34;comment&#34;&gt;// 去除参数&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  .&lt;span class=&#34;title function_&#34;&gt;replace&lt;/span&gt;(&lt;span class=&#34;regexp&#34;&gt;/\/[^/]+$/&lt;/span&gt;, &lt;span class=&#34;string&#34;&gt;&amp;#x27;/&amp;#x27;&lt;/span&gt;) &lt;span class=&#34;comment&#34;&gt;// 去除文件名&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;

&lt;h2 id=&#34;如何加载&#34;&gt;&lt;a href=&#34;#如何加载&#34; class=&#34;headerlink&#34; title=&#34;如何加载&#34;&gt;&lt;/a&gt;如何加载&lt;/h2&gt;&lt;p&gt;因为在上一步我们已经得到 url，此时只需要拼接上 &lt;code&gt;webpackChunkName&lt;/code&gt; 的文件名就可以加载指定的 js 了&lt;/p&gt;
&lt;p&gt;那么&lt;code&gt;webpackChunkName&lt;/code&gt;是怎么来的呢？&lt;br&gt;如果你用的是 webpack，那么它已经帮你做好了，反之则得自己写，其实很简单&lt;/p&gt;
&lt;figure class=&#34;highlight js&#34;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&#34;gutter&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;2&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&#34;code&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;comment&#34;&gt;// 定义一个对象，里面写好动态加载的js文件名即可&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;keyword&#34;&gt;const&lt;/span&gt; map = &amp;#123; &lt;span class=&#34;attr&#34;&gt;admin&lt;/span&gt;: &lt;span class=&#34;string&#34;&gt;&amp;#x27;discuss.admin.js&amp;#x27;&lt;/span&gt; &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;

&lt;p&gt;然后通过 js 动态创建 script 标签加载 js 即可，最后加上一个 &lt;code&gt;onload&lt;/code&gt; 事件，等待加载成功后自行代码即可&lt;/p&gt;
&lt;figure class=&#34;highlight js&#34;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&#34;gutter&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;2&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;3&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;4&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;5&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;6&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;7&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;8&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;9&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;10&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;11&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;12&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;13&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;14&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&#34;code&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;comment&#34;&gt;// chunk: js 文件名&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;comment&#34;&gt;// callback: 回调函数，当js加载完成后执行&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;keyword&#34;&gt;const&lt;/span&gt; &lt;span class=&#34;title function_&#34;&gt;loadScript&lt;/span&gt; = (&lt;span class=&#34;params&#34;&gt;chunk, callback&lt;/span&gt;) =&amp;gt; &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;keyword&#34;&gt;const&lt;/span&gt; script = &lt;span class=&#34;variable language_&#34;&gt;document&lt;/span&gt;.&lt;span class=&#34;title function_&#34;&gt;createElement&lt;/span&gt;(&lt;span class=&#34;string&#34;&gt;&amp;#x27;script&amp;#x27;&lt;/span&gt;)&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  script.&lt;span class=&#34;property&#34;&gt;src&lt;/span&gt; = scriptUrl + map[chunk]&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  script.&lt;span class=&#34;property&#34;&gt;onload&lt;/span&gt; = &lt;span class=&#34;function&#34;&gt;() =&amp;gt;&lt;/span&gt; &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    &lt;span class=&#34;comment&#34;&gt;// 执行完成后及时释放，让系统回收内存，毕竟我们只需要加载一次即可&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    script.&lt;span class=&#34;property&#34;&gt;onload&lt;/span&gt; = &lt;span class=&#34;literal&#34;&gt;null&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    &lt;span class=&#34;title function_&#34;&gt;callback&lt;/span&gt;()&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    &lt;span class=&#34;comment&#34;&gt;// 删掉动态加载的 script 标签 dom 元素(不会对程序照成影响)&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    script.&lt;span class=&#34;property&#34;&gt;parentNode&lt;/span&gt; &amp;amp;&amp;amp; script.&lt;span class=&#34;property&#34;&gt;parentNode&lt;/span&gt;.&lt;span class=&#34;title function_&#34;&gt;removeChild&lt;/span&gt;(script)&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;variable language_&#34;&gt;document&lt;/span&gt;.&lt;span class=&#34;property&#34;&gt;head&lt;/span&gt;.&lt;span class=&#34;title function_&#34;&gt;appendChild&lt;/span&gt;(script)&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&amp;#125;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;

&lt;p&gt;最后还有一个问题需要解决，那就是避免在多次执行&lt;code&gt;window.init()&lt;/code&gt;时触发多次加载，导致多次请求，照成不必要的请求，以及浪费流量带宽&lt;/p&gt;
&lt;p&gt;既然已经加载，那么就留个标记，表示这个 url 已经加载过了，下载执行不要不要继续创建 script 标签即可&lt;/p&gt;
&lt;p&gt;定义一个数组用来储存已经加载过的动态 js，&lt;code&gt;const chunks = []&lt;/code&gt; 在动态创建 script 标签之前将文件名&lt;code&gt;push()&lt;/code&gt;进去数组里即可&lt;/p&gt;
&lt;h2 id=&#34;完整的按需加载代码&#34;&gt;&lt;a href=&#34;#完整的按需加载代码&#34; class=&#34;headerlink&#34; title=&#34;完整的按需加载代码&#34;&gt;&lt;/a&gt;完整的按需加载代码&lt;/h2&gt;&lt;figure class=&#34;highlight js&#34;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&#34;gutter&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;2&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;3&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;4&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;5&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;6&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;7&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;8&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;9&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;10&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;11&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;12&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;13&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;14&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;15&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;16&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;17&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;18&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;19&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;20&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;21&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;22&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;23&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;24&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;25&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;26&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;27&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;28&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;29&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;30&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;31&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;32&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;33&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&#34;code&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;comment&#34;&gt;// source: https://github.com/discussjs/discuss/blob/dc345810e6696f1282fca65df039b2186b1f34d1/src/client/lib/import.js&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;keyword&#34;&gt;let&lt;/span&gt; scriptUrl&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;keyword&#34;&gt;if&lt;/span&gt; (&lt;span class=&#34;variable language_&#34;&gt;document&lt;/span&gt;.&lt;span class=&#34;property&#34;&gt;currentScript&lt;/span&gt;) scriptUrl = &lt;span class=&#34;variable language_&#34;&gt;document&lt;/span&gt;.&lt;span class=&#34;property&#34;&gt;currentScript&lt;/span&gt;.&lt;span class=&#34;property&#34;&gt;src&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;keyword&#34;&gt;if&lt;/span&gt; (!scriptUrl) &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;keyword&#34;&gt;const&lt;/span&gt; scripts = &lt;span class=&#34;variable language_&#34;&gt;document&lt;/span&gt;.&lt;span class=&#34;title function_&#34;&gt;getElementsByTagName&lt;/span&gt;(&lt;span class=&#34;string&#34;&gt;&amp;#x27;script&amp;#x27;&lt;/span&gt;)&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;keyword&#34;&gt;if&lt;/span&gt; (scripts.&lt;span class=&#34;property&#34;&gt;length&lt;/span&gt;) scriptUrl = scripts[scripts.&lt;span class=&#34;property&#34;&gt;length&lt;/span&gt; - &lt;span class=&#34;number&#34;&gt;1&lt;/span&gt;].&lt;span class=&#34;property&#34;&gt;src&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;keyword&#34;&gt;if&lt;/span&gt; (!scriptUrl) &lt;span class=&#34;keyword&#34;&gt;throw&lt;/span&gt; &lt;span class=&#34;keyword&#34;&gt;new&lt;/span&gt; &lt;span class=&#34;title class_&#34;&gt;Error&lt;/span&gt;(&lt;span class=&#34;string&#34;&gt;&amp;#x27;Automatic publicPath is not supported in this browser&amp;#x27;&lt;/span&gt;)&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;scriptUrl = scriptUrl&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  .&lt;span class=&#34;title function_&#34;&gt;replace&lt;/span&gt;(&lt;span class=&#34;regexp&#34;&gt;/#.*$/&lt;/span&gt;, &lt;span class=&#34;string&#34;&gt;&amp;#x27;&amp;#x27;&lt;/span&gt;) &lt;span class=&#34;comment&#34;&gt;// 去除锚点&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  .&lt;span class=&#34;title function_&#34;&gt;replace&lt;/span&gt;(&lt;span class=&#34;regexp&#34;&gt;/\?.*$/&lt;/span&gt;, &lt;span class=&#34;string&#34;&gt;&amp;#x27;&amp;#x27;&lt;/span&gt;) &lt;span class=&#34;comment&#34;&gt;// 去除参数&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  .&lt;span class=&#34;title function_&#34;&gt;replace&lt;/span&gt;(&lt;span class=&#34;regexp&#34;&gt;/\/[^/]+$/&lt;/span&gt;, &lt;span class=&#34;string&#34;&gt;&amp;#x27;/&amp;#x27;&lt;/span&gt;) &lt;span class=&#34;comment&#34;&gt;// 去除文件名&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;comment&#34;&gt;// 未来避免于其它js产生全局变量冲突，你可以定义为一个其它比较复杂的变量名&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;variable language_&#34;&gt;window&lt;/span&gt;.&lt;span class=&#34;property&#34;&gt;chunks&lt;/span&gt; = []&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;keyword&#34;&gt;const&lt;/span&gt; map = &amp;#123; &lt;span class=&#34;attr&#34;&gt;admin&lt;/span&gt;: &lt;span class=&#34;string&#34;&gt;&amp;#x27;discuss.admin.js&amp;#x27;&lt;/span&gt; &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;keyword&#34;&gt;const&lt;/span&gt; &lt;span class=&#34;title function_&#34;&gt;loadScript&lt;/span&gt; = (&lt;span class=&#34;params&#34;&gt;chunk, callback&lt;/span&gt;) =&amp;gt; &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;comment&#34;&gt;// 如果存在，则直接执行回调&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;keyword&#34;&gt;if&lt;/span&gt; (&lt;span class=&#34;variable language_&#34;&gt;window&lt;/span&gt;.&lt;span class=&#34;property&#34;&gt;chunks&lt;/span&gt;.&lt;span class=&#34;title function_&#34;&gt;includes&lt;/span&gt;(chunk)) &lt;span class=&#34;keyword&#34;&gt;return&lt;/span&gt; &lt;span class=&#34;title function_&#34;&gt;callback&lt;/span&gt;()&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;comment&#34;&gt;// 如果上方判断没有成立，则push到数组里，下次执行就会立即执行回调不必再向下执行代码&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;variable language_&#34;&gt;window&lt;/span&gt;.&lt;span class=&#34;property&#34;&gt;chunks&lt;/span&gt;.&lt;span class=&#34;title function_&#34;&gt;push&lt;/span&gt;(chunk)&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;keyword&#34;&gt;const&lt;/span&gt; script = &lt;span class=&#34;variable language_&#34;&gt;document&lt;/span&gt;.&lt;span class=&#34;title function_&#34;&gt;createElement&lt;/span&gt;(&lt;span class=&#34;string&#34;&gt;&amp;#x27;script&amp;#x27;&lt;/span&gt;)&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  script.&lt;span class=&#34;property&#34;&gt;src&lt;/span&gt; = scriptUrl + map[chunk]&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  script.&lt;span class=&#34;property&#34;&gt;onload&lt;/span&gt; = &lt;span class=&#34;function&#34;&gt;() =&amp;gt;&lt;/span&gt; &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    script.&lt;span class=&#34;property&#34;&gt;onload&lt;/span&gt; = &lt;span class=&#34;literal&#34;&gt;null&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    &lt;span class=&#34;title function_&#34;&gt;callback&lt;/span&gt;()&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    script.&lt;span class=&#34;property&#34;&gt;parentNode&lt;/span&gt; &amp;amp;&amp;amp; script.&lt;span class=&#34;property&#34;&gt;parentNode&lt;/span&gt;.&lt;span class=&#34;title function_&#34;&gt;removeChild&lt;/span&gt;(script)&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;variable language_&#34;&gt;document&lt;/span&gt;.&lt;span class=&#34;property&#34;&gt;head&lt;/span&gt;.&lt;span class=&#34;title function_&#34;&gt;appendChild&lt;/span&gt;(script)&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;keyword&#34;&gt;export&lt;/span&gt; &lt;span class=&#34;keyword&#34;&gt;default&lt;/span&gt; loadScript&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
</content>
        <category term="JavaScript" />
        <category term="教程" />
        <updated>2022-10-15T10:45:51.000Z</updated>
    </entry>
    <entry>
        <id>https://blog.imlete.cn/article/CardLink.html</id>
        <title>使用 CardLink 库生产卡片式链接</title>
        <link rel="alternate" href="https://blog.imlete.cn/article/CardLink.html"/>
        <content type="html">&lt;script async src=&#34;/js/cardlink.js&#34; &gt;&lt;/script&gt;

&lt;p&gt;有时候经常看到知乎的文章，或者问题中的链接是卡片式的&lt;/p&gt;
&lt;p&gt;将卡片式链接与普通的链接相比，卡片式链接不仅美观，还展示更多信息，如：标题、图片、网址等&lt;/p&gt;
&lt;p&gt;效果如下 &lt;a href=&#34;https://github.com/Lete114/CardLink&#34;&gt;CardLink&lt;/a&gt;&lt;/p&gt;
&lt;h2 id=&#34;CardLink&#34;&gt;&lt;a href=&#34;#CardLink&#34; class=&#34;headerlink&#34; title=&#34;CardLink&#34;&gt;&lt;/a&gt;CardLink&lt;/h2&gt;&lt;p&gt;一些使用方法请见 &lt;a href=&#34;https://github.com/Lete114/CardLink&#34;&gt;https://github.com/Lete114/CardLink&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;通过 CDN 的方式引入 CardLink&lt;/p&gt;
&lt;figure class=&#34;highlight html&#34;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&#34;gutter&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;2&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;3&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;4&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;5&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;6&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;7&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;8&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&#34;code&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;comment&#34;&gt;&amp;lt;!-- 建议放在head标签里 --&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;tag&#34;&gt;&amp;lt;&lt;span class=&#34;name&#34;&gt;script&lt;/span&gt; &lt;span class=&#34;attr&#34;&gt;src&lt;/span&gt;=&lt;span class=&#34;string&#34;&gt;&amp;quot;https://cdn.jsdelivr.net/npm/cardlink&amp;quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;tag&#34;&gt;&amp;lt;/&lt;span class=&#34;name&#34;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;comment&#34;&gt;&amp;lt;!-- 建议放在 &amp;lt;/body&amp;gt; 之前 --&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;tag&#34;&gt;&amp;lt;&lt;span class=&#34;name&#34;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;language-javascript&#34;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;language-javascript&#34;&gt;  &lt;span class=&#34;comment&#34;&gt;// 为&amp;lt;article&amp;gt;&amp;lt;/article&amp;gt;(文章)标签下所有打开新标签窗口的a标签生成卡片链接&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;language-javascript&#34;&gt;  &lt;span class=&#34;title function_&#34;&gt;cardLink&lt;/span&gt;(&lt;span class=&#34;variable language_&#34;&gt;document&lt;/span&gt;.&lt;span class=&#34;title function_&#34;&gt;querySelectorAll&lt;/span&gt;(&lt;span class=&#34;string&#34;&gt;&amp;#x27;article a[target=_blank]&amp;#x27;&lt;/span&gt;))&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;language-javascript&#34;&gt;&lt;/span&gt;&lt;span class=&#34;tag&#34;&gt;&amp;lt;/&lt;span class=&#34;name&#34;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;

&lt;p&gt;当你想让特定的链接变成卡片式链接时你可以为它添加上 &lt;code&gt;cardlink&lt;/code&gt; 属性&lt;/p&gt;
&lt;figure class=&#34;highlight html&#34;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&#34;gutter&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;2&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;3&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;4&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;5&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&#34;code&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;comment&#34;&gt;&amp;lt;!-- 建议放在 &amp;lt;/body&amp;gt; 之前 --&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;tag&#34;&gt;&amp;lt;&lt;span class=&#34;name&#34;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;language-javascript&#34;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;language-javascript&#34;&gt;  &lt;span class=&#34;comment&#34;&gt;// CardLink 默认会对页面上所有a[cardlink]生成卡片链接&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;language-javascript&#34;&gt;  &lt;span class=&#34;title function_&#34;&gt;cardLink&lt;/span&gt;()&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;language-javascript&#34;&gt;&lt;/span&gt;&lt;span class=&#34;tag&#34;&gt;&amp;lt;/&lt;span class=&#34;name&#34;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;

&lt;p&gt;或者如果你使用 &lt;code&gt;markdown&lt;/code&gt; 写内容的时候，可以直接在内容中写 &lt;code&gt;HTML&lt;/code&gt;&lt;/p&gt;
&lt;figure class=&#34;highlight markdown&#34;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&#34;gutter&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;2&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;3&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;4&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;5&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;6&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;7&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;8&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;9&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;10&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;11&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;12&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;13&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&#34;code&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;section&#34;&gt;## 标题 1&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;其它内容...&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;正常 markdown 语法&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;[&lt;span class=&#34;string&#34;&gt;https://Lete114.github.io/CardLink&lt;/span&gt;](&lt;span class=&#34;link&#34;&gt;https://Lete114.github.io/CardLink&lt;/span&gt;)&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;html 语法&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;language-xml&#34;&gt;&lt;span class=&#34;tag&#34;&gt;&amp;lt;&lt;span class=&#34;name&#34;&gt;a&lt;/span&gt; &lt;span class=&#34;attr&#34;&gt;href&lt;/span&gt;=&lt;span class=&#34;string&#34;&gt;&amp;quot;https://Lete114.github.io/CardLink/&amp;quot;&lt;/span&gt; &lt;span class=&#34;attr&#34;&gt;target&lt;/span&gt;=&lt;span class=&#34;string&#34;&gt;&amp;quot;_blank&amp;quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;language-xml&#34;&gt;&lt;span class=&#34;tag&#34;&gt;&amp;lt;/&lt;span class=&#34;name&#34;&gt;a&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;section&#34;&gt;## 标题 2&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;其它内容...&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;

&lt;figure class=&#34;highlight html&#34;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&#34;gutter&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;2&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;3&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;4&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;5&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&#34;code&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;comment&#34;&gt;&amp;lt;!-- 建议放在 &amp;lt;/body&amp;gt; 之前 --&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;tag&#34;&gt;&amp;lt;&lt;span class=&#34;name&#34;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;language-javascript&#34;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;language-javascript&#34;&gt;  &lt;span class=&#34;comment&#34;&gt;// CardLink 默认会对页面上所有a[cardlink]生成卡片链接&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;language-javascript&#34;&gt;  &lt;span class=&#34;title function_&#34;&gt;cardLink&lt;/span&gt;()&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;language-javascript&#34;&gt;&lt;/span&gt;&lt;span class=&#34;tag&#34;&gt;&amp;lt;/&lt;span class=&#34;name&#34;&gt;script&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;

&lt;h3 id=&#34;跨域请求&#34;&gt;&lt;a href=&#34;#跨域请求&#34; class=&#34;headerlink&#34; title=&#34;跨域请求&#34;&gt;&lt;/a&gt;跨域请求&lt;/h3&gt;&lt;ol&gt;
&lt;li&gt;搭建代理服务器，将目标链接传给代理服务器，让代理服务器去请求 HTML 文本并返回&lt;br&gt;&lt;a href=&#34;https://github.com/Lete114/CardLink/tree/server&#34;&gt;CardLink-Server&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;使用在线免费的跨域代理&lt;br&gt;(前者是博主自己搭建的跨域请求服务，后者是网上找的免费跨域请求服务)&lt;br&gt;&lt;code&gt;https://api.allorigins.win/raw?url=&lt;/code&gt;&lt;/li&gt;
&lt;/ol&gt;
</content>
        <category term="JavaScript" />
        <updated>2022-07-11T09:52:21.000Z</updated>
    </entry>
    <entry>
        <id>https://blog.imlete.cn/article/build-ts-doc.html</id>
        <title>如何为自己的js项目生成API文档</title>
        <link rel="alternate" href="https://blog.imlete.cn/article/build-ts-doc.html"/>
        <content type="html">&lt;p&gt;如题，当自己写完了一个第三方库，准备发布时，总不能直接把一些使用方法以及传参说明写在&lt;code&gt;README.md&lt;/code&gt;里吧&lt;/p&gt;
&lt;p&gt;看到许多第三方库都有一个&lt;code&gt;.d.ts&lt;/code&gt;文件，当我们使用这些第三方库时，在方法上安装&lt;code&gt;ctrl+鼠标左键&lt;/code&gt;时就会跳转到对应&lt;code&gt;.d.ts&lt;/code&gt;说明文档中&lt;/p&gt;
&lt;p&gt;那么这个是咱们做的呢？难道是手动创建并编写的吗？不是吧？如果是手动创建的话，哪些大型项目那么多方法和文件模块，并且还是多人协作开发，不可能同步如此庞大的&lt;code&gt;.d.ts&lt;/code&gt;文件，那么这个是怎么做的呢？&lt;/p&gt;
&lt;p&gt;这个是使用&lt;code&gt;TypeScript&lt;/code&gt;生成的，不是吧？那我用的不是&lt;code&gt;TypeScript&lt;/code&gt;写的库不就不能生成了？&lt;/p&gt;
&lt;p&gt;非也非也，即使不是用&lt;code&gt;TypeScript&lt;/code&gt;写的项目也能生成&lt;code&gt;.d.ts&lt;/code&gt;文件&lt;/p&gt;
&lt;p&gt;只要你写的时候在方法上添加注释即可，注释关键字必须遵循&lt;a href=&#34;https://jsdoc.app/&#34;&gt;JSDoc&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;JSDoc 中有很多关键字，这些关键字想必你多多少少会在其它第三方库的&lt;code&gt;.d.ts&lt;/code&gt;文件中见过，如: &lt;code&gt;@param&lt;/code&gt; &lt;code&gt;@returns&lt;/code&gt; &lt;code&gt;@author&lt;/code&gt;等，更多具体的请自行在&lt;a href=&#34;https://jsdoc.app/&#34;&gt;JSDoc&lt;/a&gt;中查看&lt;/p&gt;
&lt;p&gt;说了那么多，那么到底如何生成&lt;code&gt;.d.ts&lt;/code&gt;文档呢？&lt;/p&gt;
&lt;p&gt;举例我目前有一个&lt;code&gt;/src/main.js&lt;/code&gt;，其中代码如下&lt;/p&gt;
&lt;figure class=&#34;highlight js&#34;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&#34;gutter&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;2&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;3&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;4&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;5&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;6&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;7&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;8&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;9&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&#34;code&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;comment&#34;&gt;/**&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;comment&#34;&gt; * 代码来源于: https://github.com/Lete114/CardLink/blob/f4ab08b78625244d9515743e41c7e04f839e149f/src/main.js#L12&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;comment&#34;&gt; * Determine if it is a [&amp;#x27;https://&amp;#x27;, &amp;#x27;http://&amp;#x27;, &amp;#x27;//&amp;#x27;] protocol&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;comment&#34;&gt; * &lt;span class=&#34;doctag&#34;&gt;@param&lt;/span&gt; &amp;#123;&lt;span class=&#34;type&#34;&gt;String&lt;/span&gt;&amp;#125; url Website url&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;comment&#34;&gt; * &lt;span class=&#34;doctag&#34;&gt;@returns&lt;/span&gt; &amp;#123;&lt;span class=&#34;type&#34;&gt;Boolean&lt;/span&gt;&amp;#125;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;comment&#34;&gt; */&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;keyword&#34;&gt;export&lt;/span&gt; &lt;span class=&#34;keyword&#34;&gt;default&lt;/span&gt; &lt;span class=&#34;keyword&#34;&gt;function&lt;/span&gt; &lt;span class=&#34;title function_&#34;&gt;isHttp&lt;/span&gt;(&lt;span class=&#34;params&#34;&gt;url&lt;/span&gt;) &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;keyword&#34;&gt;return&lt;/span&gt; &lt;span class=&#34;regexp&#34;&gt;/^(https?:)?\/\//g&lt;/span&gt;.&lt;span class=&#34;title function_&#34;&gt;test&lt;/span&gt;(url)&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&amp;#125;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;

&lt;p&gt;只需一行命令即可，使用 npx 临时安装&lt;code&gt;typescript&lt;/code&gt;，并调用&lt;code&gt;typescript&lt;/code&gt;的命令生成&lt;code&gt;.d.ts&lt;/code&gt;文档&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;注意其中&lt;code&gt;-p&lt;/code&gt;是 npx 的命令，原名&lt;code&gt;--package&lt;/code&gt;，具体请看官网&lt;a href=&#34;https://docs.npmjs.com/cli/v8/commands/npx&#34;&gt;https://docs.npmjs.com/cli/v8/commands/npx&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;src/**/*.js&lt;/code&gt;: 对 src 目录下的所有 js 文件生成&lt;code&gt;.d.ts&lt;/code&gt;文件&lt;/li&gt;
&lt;li&gt;&lt;code&gt;--declaration&lt;/code&gt;: 生成相应的&lt;code&gt;.d.ts&lt;/code&gt;文件&lt;/li&gt;
&lt;li&gt;&lt;code&gt;--allowJs&lt;/code&gt;: 允许编译 javascript 文件&lt;/li&gt;
&lt;li&gt;&lt;code&gt;--emitDeclarationOnly&lt;/code&gt;: 只输出 &lt;code&gt;.d.ts&lt;/code&gt; 文件，不输出 JavaScript 文件&lt;/li&gt;
&lt;li&gt;&lt;code&gt;--outDir&lt;/code&gt;: 输出到指定的目录&lt;/li&gt;
&lt;/ul&gt;
&lt;figure class=&#34;highlight bash&#34;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&#34;gutter&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;1&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&#34;code&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;npx -p typescript tsc src/**.js --declaration --allowJs --emitDeclarationOnly --outDir types&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;

&lt;p&gt;执行如上命令后就会先下载&lt;code&gt;typescript&lt;/code&gt;，然后执行 tsc 命令，构建生成&lt;code&gt;.d.ts&lt;/code&gt; 文件到&lt;code&gt;types/main.d.ts&lt;/code&gt;&lt;/p&gt;
&lt;figure class=&#34;highlight ts&#34;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&#34;gutter&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;2&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;3&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;4&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;5&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;6&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;7&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&#34;code&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;comment&#34;&gt;/**&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;comment&#34;&gt; * 代码来源于: https://github.com/Lete114/CardLink/blob/f4ab08b78625244d9515743e41c7e04f839e149f/src/main.js#L12&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;comment&#34;&gt; * Determine if it is a [&amp;#x27;https://&amp;#x27;, &amp;#x27;http://&amp;#x27;, &amp;#x27;//&amp;#x27;] protocol&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;comment&#34;&gt; * &lt;span class=&#34;doctag&#34;&gt;@param&lt;/span&gt; &amp;#123;&lt;span class=&#34;type&#34;&gt;String&lt;/span&gt;&amp;#125; url Website url&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;comment&#34;&gt; * &lt;span class=&#34;doctag&#34;&gt;@returns&lt;/span&gt; &amp;#123;&lt;span class=&#34;type&#34;&gt;Boolean&lt;/span&gt;&amp;#125;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;comment&#34;&gt; */&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;keyword&#34;&gt;export&lt;/span&gt; &lt;span class=&#34;keyword&#34;&gt;default&lt;/span&gt; &lt;span class=&#34;keyword&#34;&gt;function&lt;/span&gt; &lt;span class=&#34;title function_&#34;&gt;isHttp&lt;/span&gt;(&lt;span class=&#34;params&#34;&gt;url: &lt;span class=&#34;built_in&#34;&gt;string&lt;/span&gt;&lt;/span&gt;): &lt;span class=&#34;built_in&#34;&gt;boolean&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
</content>
        <category term="JavaScript" />
        <category term="TypeScript" />
        <updated>2022-06-06T15:52:50.000Z</updated>
    </entry>
    <entry>
        <id>https://blog.imlete.cn/article/Static-resource-cache-control.html</id>
        <title>前端优化之静态资源缓存控制</title>
        <link rel="alternate" href="https://blog.imlete.cn/article/Static-resource-cache-control.html"/>
        <content type="html">&lt;blockquote&gt;
&lt;p&gt;本文转自&lt;a href=&#34;https://www.zhihu.com/question/20790576/answer/32602154&#34;&gt;@张云龙&lt;/a&gt;，于 2014 年 10 月在知乎上的一个问题回答，博主觉得这位大佬写的很好，也很详细，于是就把内容搬到了自己的博客上，便于以后自己查阅&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2 id=&#34;太长不想看&#34;&gt;&lt;a href=&#34;#太长不想看&#34; class=&#34;headerlink&#34; title=&#34;太长不想看&#34;&gt;&lt;/a&gt;太长不想看&lt;/h2&gt;&lt;p&gt;使用强制缓存如何，如何让用户能够及时使用最新修改后的静态资源？&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;修改资源文件名&lt;code&gt;index-v1.css&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;修改资源文件名，并且对文件内容生成 hash 值(内容改变，则 hash 改变反之不改变)(&lt;code&gt;index.v1tg6l.css&lt;/code&gt;)&lt;/li&gt;
&lt;li&gt;为资源添加请求参数(该参数没有任何作用，只是为了修改 url 地址)与第二条一样生成 hash(&lt;code&gt;index.css?v=qb6l0p&lt;/code&gt;)&lt;/li&gt;
&lt;/ol&gt;
&lt;blockquote&gt;
&lt;p&gt;总结: 只要修改了资源请求的 url 地址，那么就会获取最新修改的静态资源，从而主动弃用旧静态资源&lt;br&gt;很多大网站都会使用这种方式，例如 baidu，taobao&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2 id=&#34;什么是-HTTP-缓存&#34;&gt;&lt;a href=&#34;#什么是-HTTP-缓存&#34; class=&#34;headerlink&#34; title=&#34;什么是 HTTP 缓存&#34;&gt;&lt;/a&gt;什么是 HTTP 缓存&lt;/h2&gt;&lt;p&gt;HTTP 缓存分为两种(本文不会深究响应头的众多参数)&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;强制缓存: (状态码始终 200)在规定时间内，不用向服务器发送请求，直接使用本地缓存(超过规定时间后才会重新向服务器发送请求获取资源)&lt;/li&gt;
&lt;li&gt;协商缓存: (状态码过期 200，未过期 304)每次都会向服务器确认，这个本地资源有没有过期，过期: 服务器返回新资源。未过期: 让浏览器使用本地缓存&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id=&#34;正文&#34;&gt;&lt;a href=&#34;#正文&#34; class=&#34;headerlink&#34; title=&#34;正文&#34;&gt;&lt;/a&gt;正文&lt;/h2&gt;&lt;p&gt;使用强制缓存如何，如何让用户能够及时使用最新修改后的静态资源？&lt;/p&gt;
&lt;p&gt;这是一个普通网站的结构&lt;br&gt;&lt;img src=&#34;/img/Static-resource-cache-control/1.png&#34; alt=&#34;&#34;&gt;&lt;/p&gt;
&lt;p&gt;访问这个网站，可以看到网络请求状态，响应状态 200，这是在正常不过的事了&lt;br&gt;那就看看&lt;code&gt;a.css&lt;/code&gt;的请求吧，如果每次用户访问页面都要加载，是不是很影响性能，很浪费带宽啊&lt;br&gt;&lt;img src=&#34;/img/Static-resource-cache-control/2.png&#34; alt=&#34;&#34;&gt;&lt;/p&gt;
&lt;p&gt;我们希望最好这样,利用 304，让浏览器使用本地缓存。但，这样就够了吗？不成！&lt;strong&gt;304 叫协商缓存&lt;/strong&gt;，这玩意儿还是需要向浏览器发送一个请求，问问服务器这个资源有没有更新&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;更新: 返回新资源&lt;br&gt;没更新: 告诉浏览器使用本地缓存&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;&lt;img src=&#34;/img/Static-resource-cache-control/3.png&#34; alt=&#34;&#34;&gt;&lt;/p&gt;
&lt;p&gt;使用&lt;strong&gt;强制缓存（cache-control/expires）&lt;/strong&gt;让浏览器不要向服务器发送请求了&lt;br&gt;所以必须彻底灭掉这个请求，变成这样&lt;br&gt;&lt;img src=&#34;/img/Static-resource-cache-control/4.png&#34; alt=&#34;&#34;&gt;&lt;/p&gt;
&lt;p&gt;那问题来了：这都不让浏览器发资源请求了，这缓存咋更新？&lt;br&gt;可以通过更新页面中引用的资源路径，让浏览器主动放弃缓存，加载新资源&lt;br&gt;&lt;img src=&#34;/img/Static-resource-cache-control/5.png&#34; alt=&#34;&#34;&gt;&lt;/p&gt;
&lt;p&gt;下次上线资源的时候，把链接地址改成新的版本，这就能更新资源了&lt;br&gt;&lt;img src=&#34;/img/Static-resource-cache-control/6.png&#34; alt=&#34;&#34;&gt;&lt;/p&gt;
&lt;p&gt;页面引用了 3 个 css，而某次上线只改了其中的 a.css，如果所有链接都更新版本(当然你如果只改 a 的链接地址就可以了，不过我们还是要继续讨论后续问题)，就会导致 b.css，c.css 的缓存也失效，那岂不是又有浪费了？！&lt;br&gt;要解决这种问题，必须让 url 的修改与文件内容关联，也就是说，只有文件内容变化，才会导致相应 url 的变更，从而实现文件级别的精确缓存控制。&lt;/p&gt;
&lt;p&gt;可以使用&lt;strong&gt;数据摘要算法&lt;/strong&gt;，摘要信息与文件内容一一对应，就有了一种可以精确到单个文件粒度的缓存控制依据了&lt;/p&gt;
&lt;p&gt;这回再有文件修改，就只更新那个文件对应的 url 了，想到这里貌似很完美了&lt;br&gt;&lt;img src=&#34;/img/Static-resource-cache-control/7.png&#34; alt=&#34;&#34;&gt;&lt;/p&gt;
&lt;p&gt;现代互联网企业，为了进一步提升网站性能，会把静态资源和动态网页分集群部署，静态资源会被部署到 CDN 节点上，网页中引用的资源也会变成对应的部署路径&lt;br&gt;&lt;img src=&#34;/img/Static-resource-cache-control/8.png&#34; alt=&#34;&#34;&gt;&lt;/p&gt;
&lt;p&gt;好了，当我要更新静态资源的时候，同时也会更新 html 中的引用吧，就好像这样&lt;br&gt;&lt;img src=&#34;/img/Static-resource-cache-control/9.png&#34; alt=&#34;&#34;&gt;&lt;/p&gt;
&lt;p&gt;但是这会产生一个问题，如何保证页面与资源保持一致呢？&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;先部署页面，再部署资源&lt;ul&gt;
&lt;li&gt;在二者部署的时间间隔内，如果有用户访问页面，就会在新的页面结构中加载旧的资源，并且把这个旧版本的资源当做新版本缓存起来，其结果就是：用户访问到了一个样式错乱的页面，除非手动刷新，否则在资源缓存过期之前，页面会一直执行错误。&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;先部署资源，再部署页面&lt;ul&gt;
&lt;li&gt;在部署时间间隔之内，有旧版本资源本地缓存的用户访问网站，由于请求的页面是旧版本的，资源引用没有改变，浏览器将直接使用本地缓存，这种情况下页面展现正常；但没有本地缓存或者缓存过期的用户访问网站，就会出现旧版本页面加载新版本资源的情况，导致页面执行错误，但当页面完成部署，这部分用户再次访问页面又会恢复正常了。&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;blockquote&gt;
&lt;p&gt;简而言之: 先部署谁都不成！都会导致部署过程中发生页面错乱的问题。&lt;br&gt;所以，访问量不大的项目，可以让研发同学苦逼一把，等到半夜偷偷上线，先上静态资源，再部署页面，看起来问题少一些。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;但是如果你现在正在维护一个用户访问量比较大的网站，改怎么办，你打算不解决了吗？&lt;/p&gt;
&lt;p&gt;可以采用&lt;strong&gt;非覆盖式发布&lt;/strong&gt;，前面我们说了那么多都是&lt;strong&gt;覆盖式发布&lt;/strong&gt;&lt;br&gt;&lt;img src=&#34;/img/Static-resource-cache-control/10.png&#34; alt=&#34;&#34;&gt;&lt;/p&gt;
&lt;p&gt;全套做下来，就是相对比较完整的静态资源缓存控制方案了，而且，还要注意的是，静态资源的缓存控制要求在前端所有静态资源加载的位置都要做这样的处理。是的，所有！什么 js、css 自不必说，还要包括 js、css 文件中引用的资源路径，由于涉及到摘要信息，引用资源的摘要信息也会引起引用文件本身的内容改变，从而形成级联的摘要变化，大概就是如下图&lt;br&gt;&lt;img src=&#34;/img/Static-resource-cache-control/11.png&#34; alt=&#34;&#34;&gt;&lt;/p&gt;
</content>
        <category term="CSS" />
        <category term="JavaScript" />
        <category term="HTML" />
        <category term="Cache" />
        <updated>2022-05-12T11:51:45.000Z</updated>
    </entry>
    <entry>
        <id>https://blog.imlete.cn/article/Use-lint-staged.html</id>
        <title>使用 Lint-staged 校验 Git 暂存区代码是否符合标准</title>
        <link rel="alternate" href="https://blog.imlete.cn/article/Use-lint-staged.html"/>
        <content type="html">&lt;h2 id=&#34;什么是-Lint-staged&#34;&gt;&lt;a href=&#34;#什么是-Lint-staged&#34; class=&#34;headerlink&#34; title=&#34;什么是 Lint-staged&#34;&gt;&lt;/a&gt;什么是 Lint-staged&lt;/h2&gt;&lt;p&gt;在 Git 暂存区执行相关的操作，如对暂存区进行&lt;code&gt;eslint&lt;/code&gt;或是&lt;code&gt;prettier&lt;/code&gt;，也可以自定义一些脚本&lt;/p&gt;
&lt;p&gt;官方写着很有趣的一段话:&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Run linters against staged git files and don’t let 💩 slip into your code base!&lt;br&gt;对暂存区进行代码校验，不要让 💩(便便)溜进你的代码库！&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2 id=&#34;正文&#34;&gt;&lt;a href=&#34;#正文&#34; class=&#34;headerlink&#34; title=&#34;正文&#34;&gt;&lt;/a&gt;正文&lt;/h2&gt;&lt;p&gt;有些人可能会问，我都有&lt;code&gt;eslint&lt;/code&gt;和&lt;code&gt;prettier&lt;/code&gt;为什么还要用&lt;code&gt;lint-staged&lt;/code&gt;?&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;简而言之: &lt;code&gt;lint-staged&lt;/code&gt;只对已修改的或是将要提交到仓库的文件进行校验&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;因为&lt;code&gt;lint-staged&lt;/code&gt;仅对暂存区的文件进行校验，而&lt;code&gt;eslint&lt;/code&gt;和&lt;code&gt;prettier&lt;/code&gt;则是全局或是指定某个目录下的的所有文件进行校验，在执行效率上肯定是&lt;code&gt;lint-staged&lt;/code&gt;更胜一筹&lt;/p&gt;
&lt;h3 id=&#34;安装&#34;&gt;&lt;a href=&#34;#安装&#34; class=&#34;headerlink&#34; title=&#34;安装&#34;&gt;&lt;/a&gt;安装&lt;/h3&gt;&lt;figure class=&#34;highlight bash&#34;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&#34;gutter&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;1&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&#34;code&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;npm install lint-staged -D&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;

&lt;p&gt;编辑&lt;code&gt;package.json&lt;/code&gt;文件&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;如果同时校验&lt;code&gt;.vue&lt;/code&gt;则可以这么写&lt;code&gt;&amp;quot;*.&amp;#123;js,vue&amp;#125;&amp;quot;: &amp;quot;npx eslint --fix&amp;quot;&lt;/code&gt;&lt;br&gt;其内部使用的匹配规则是&lt;a href=&#34;https://github.com/micromatch/micromatch&#34;&gt;micromatch&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;figure class=&#34;highlight json&#34;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&#34;gutter&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;2&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;3&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;4&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;5&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&#34;code&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;punctuation&#34;&gt;&amp;#123;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;attr&#34;&gt;&amp;quot;lint-staged&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;punctuation&#34;&gt;&amp;#123;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    &lt;span class=&#34;attr&#34;&gt;&amp;quot;*.js&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;string&#34;&gt;&amp;quot;npx eslint --fix&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;punctuation&#34;&gt;&amp;#125;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;punctuation&#34;&gt;&amp;#125;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;

&lt;p&gt;完整&lt;code&gt;package.json&lt;/code&gt;文件&lt;/p&gt;
&lt;figure class=&#34;highlight json&#34;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&#34;gutter&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;2&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;3&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;4&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;5&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;6&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;7&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;8&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;9&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;10&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;11&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;12&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;13&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;14&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;15&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;16&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;17&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;18&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;19&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;20&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;21&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;22&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;23&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;24&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;25&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;26&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&#34;code&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;punctuation&#34;&gt;&amp;#123;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;attr&#34;&gt;&amp;quot;name&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;string&#34;&gt;&amp;quot;study-notes&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;,&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;attr&#34;&gt;&amp;quot;version&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;string&#34;&gt;&amp;quot;1.0.0&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;,&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;attr&#34;&gt;&amp;quot;description&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;string&#34;&gt;&amp;quot;&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;,&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;attr&#34;&gt;&amp;quot;main&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;string&#34;&gt;&amp;quot;index.js&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;,&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;attr&#34;&gt;&amp;quot;scripts&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;punctuation&#34;&gt;&amp;#123;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    &lt;span class=&#34;attr&#34;&gt;&amp;quot;test&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;string&#34;&gt;&amp;quot;echo \&amp;quot;Error: no test specified\&amp;quot; &amp;amp;&amp;amp; exit 1&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;,&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    &lt;span class=&#34;attr&#34;&gt;&amp;quot;prepare&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;string&#34;&gt;&amp;quot;npx husky install&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;punctuation&#34;&gt;&amp;#125;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;,&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;attr&#34;&gt;&amp;quot;keywords&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;punctuation&#34;&gt;[&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;]&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;,&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;attr&#34;&gt;&amp;quot;author&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;string&#34;&gt;&amp;quot;&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;,&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;attr&#34;&gt;&amp;quot;license&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;string&#34;&gt;&amp;quot;ISC&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;,&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;attr&#34;&gt;&amp;quot;devDependencies&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;punctuation&#34;&gt;&amp;#123;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    &lt;span class=&#34;attr&#34;&gt;&amp;quot;@commitlint/cli&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;string&#34;&gt;&amp;quot;^16.2.3&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;,&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    &lt;span class=&#34;attr&#34;&gt;&amp;quot;@commitlint/config-conventional&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;string&#34;&gt;&amp;quot;^16.2.1&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;,&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    &lt;span class=&#34;attr&#34;&gt;&amp;quot;eslint&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;string&#34;&gt;&amp;quot;^8.13.0&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;,&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    &lt;span class=&#34;attr&#34;&gt;&amp;quot;husky&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;string&#34;&gt;&amp;quot;^7.0.4&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;,&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    &lt;span class=&#34;attr&#34;&gt;&amp;quot;lint-staged&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;string&#34;&gt;&amp;quot;^12.3.7&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;punctuation&#34;&gt;&amp;#125;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;,&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;attr&#34;&gt;&amp;quot;commitlint&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;punctuation&#34;&gt;&amp;#123;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    &lt;span class=&#34;attr&#34;&gt;&amp;quot;extends&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;string&#34;&gt;&amp;quot;@commitlint/config-conventional&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;punctuation&#34;&gt;&amp;#125;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;,&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;attr&#34;&gt;&amp;quot;lint-staged&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;punctuation&#34;&gt;&amp;#123;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    &lt;span class=&#34;attr&#34;&gt;&amp;quot;*.js&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;string&#34;&gt;&amp;quot;npx eslint --fix&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;punctuation&#34;&gt;&amp;#125;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;punctuation&#34;&gt;&amp;#125;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;

&lt;p&gt;配置好后，当你执行&lt;code&gt;git add .&lt;/code&gt;后就可以使用&lt;code&gt;npx lint-staged&lt;/code&gt;命令来校验暂存区的代码文件了&lt;/p&gt;
&lt;p&gt;有些人可能会说，这么麻烦，那我还不如直接在&lt;code&gt;git add .&lt;/code&gt;之前使用&lt;code&gt;npx eslint --fix .&lt;/code&gt;这也不是更好吗？&lt;/p&gt;
&lt;p&gt;文章开头一句说了，&lt;code&gt;lint-staged&lt;/code&gt;只对暂存区的代码文件进行 lint，执行效率远超&lt;code&gt;npx eslint --fix .&lt;/code&gt;命令，该命令会对全局的文件进行校验，不过有没有问题都要校验一遍(如果项目很大，那么这个差距就显现了)&lt;/p&gt;
&lt;p&gt;如果一个项目有&lt;code&gt;几百&lt;/code&gt;或&lt;code&gt;上千&lt;/code&gt;个文件，而我只是修改了一个文件，比如说一个标点符号或者是其它修改，那么&lt;code&gt;npx eslint --fix .&lt;/code&gt;可能需要校验很久，而使用&lt;code&gt;npx lint-staged&lt;/code&gt;则只需要校验这个文件即可&lt;/p&gt;
&lt;h3 id=&#34;配合-Husky-使用&#34;&gt;&lt;a href=&#34;#配合-Husky-使用&#34; class=&#34;headerlink&#34; title=&#34;配合 Husky 使用&#34;&gt;&lt;/a&gt;配合 Husky 使用&lt;/h3&gt;&lt;p&gt;关于如何使用 husky 可以参考这篇文章: &lt;a href=&#34;/article/Use-husky-manage-git-project.html&#34;&gt;使用 Husky(哈士奇)管理 Git 项目&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;添加 hook 后执行&lt;code&gt;git commit&lt;/code&gt;之前就会对暂存区的文件进行校验了&lt;/p&gt;
&lt;figure class=&#34;highlight bash&#34;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&#34;gutter&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;1&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&#34;code&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;npx husky add .husky/pre-commit &lt;span class=&#34;string&#34;&gt;&amp;#x27;npx lint-staged&amp;#x27;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
</content>
        <category term="JavaScript" />
        <category term="Git" />
        <updated>2022-04-12T16:57:17.000Z</updated>
    </entry>
    <entry>
        <id>https://blog.imlete.cn/article/Commitlint-lint-commit-messages.html</id>
        <title>使用 commitlint 来检查提交的信息是否符合规范</title>
        <link rel="alternate" href="https://blog.imlete.cn/article/Commitlint-lint-commit-messages.html"/>
        <content type="html">&lt;h2 id=&#34;什么是-commitlint&#34;&gt;&lt;a href=&#34;#什么是-commitlint&#34; class=&#34;headerlink&#34; title=&#34;什么是 commitlint&#34;&gt;&lt;/a&gt;什么是 commitlint&lt;/h2&gt;&lt;p&gt;commitlint 用来校验你提交的信息是否符合规范，它和&lt;code&gt;commitizen&lt;/code&gt;很类似，它们都做一件事，那就是让你提交的信息更规范&lt;/p&gt;
&lt;h2 id=&#34;commitlint-和-commitizen-的区别&#34;&gt;&lt;a href=&#34;#commitlint-和-commitizen-的区别&#34; class=&#34;headerlink&#34; title=&#34;commitlint 和 commitizen 的区别&#34;&gt;&lt;/a&gt;commitlint 和 commitizen 的区别&lt;/h2&gt;&lt;blockquote&gt;
&lt;p&gt;commitlint: 校验 git commit 信息是否符合规范(就像 eslint 一样)&lt;/p&gt;
&lt;/blockquote&gt;
&lt;blockquote&gt;
&lt;p&gt;commitizen: 辅助 git commit 信息更加规范(就像代码提示一样)&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;所以你可以把它们两个结合起来使用效果更佳哦~&lt;/p&gt;
&lt;h2 id=&#34;安装&#34;&gt;&lt;a href=&#34;#安装&#34; class=&#34;headerlink&#34; title=&#34;安装&#34;&gt;&lt;/a&gt;安装&lt;/h2&gt;&lt;figure class=&#34;highlight bash&#34;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&#34;gutter&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;1&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&#34;code&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;npm install --save-dev @commitlint/config-conventional @commitlint/cli&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;

&lt;p&gt;创建配置文件，可以手动创建，也可以使用命令创建&lt;/p&gt;
&lt;figure class=&#34;highlight bash&#34;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&#34;gutter&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;1&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&#34;code&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;built_in&#34;&gt;echo&lt;/span&gt; &lt;span class=&#34;string&#34;&gt;&amp;quot;module.exports = &amp;#123;extends: [&amp;#x27;@commitlint/config-conventional&amp;#x27;]&amp;#125;&amp;quot;&lt;/span&gt; &amp;gt; commitlint.config.js&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;

&lt;p&gt;然后就会生成&lt;code&gt;commitlint.config.js&lt;/code&gt;文件，其中包含&lt;code&gt;module.exports = &amp;#123;extends: [&amp;#39;@commitlint/config-conventional&amp;#39;]&amp;#125;&lt;/code&gt;代码&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;这个配置也可以写在&lt;code&gt;package.json&lt;/code&gt;文件中&lt;/p&gt;
&lt;/blockquote&gt;
&lt;figure class=&#34;highlight json&#34;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&#34;gutter&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;2&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;3&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;4&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;5&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;6&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;7&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;8&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;9&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;10&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;11&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;12&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;13&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;14&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;15&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;16&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;17&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;18&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;19&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;20&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;21&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&#34;code&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;punctuation&#34;&gt;&amp;#123;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;attr&#34;&gt;&amp;quot;name&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;string&#34;&gt;&amp;quot;study-notes&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;,&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;attr&#34;&gt;&amp;quot;version&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;string&#34;&gt;&amp;quot;1.0.0&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;,&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;attr&#34;&gt;&amp;quot;description&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;string&#34;&gt;&amp;quot;&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;,&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;attr&#34;&gt;&amp;quot;main&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;string&#34;&gt;&amp;quot;index.js&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;,&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;attr&#34;&gt;&amp;quot;scripts&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;punctuation&#34;&gt;&amp;#123;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    &lt;span class=&#34;attr&#34;&gt;&amp;quot;test&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;string&#34;&gt;&amp;quot;echo \&amp;quot;Error: no test specified\&amp;quot; &amp;amp;&amp;amp; exit 1&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;,&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    &lt;span class=&#34;attr&#34;&gt;&amp;quot;prepare&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;string&#34;&gt;&amp;quot;husky install&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;punctuation&#34;&gt;&amp;#125;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;,&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;attr&#34;&gt;&amp;quot;keywords&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;punctuation&#34;&gt;[&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;]&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;,&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;attr&#34;&gt;&amp;quot;author&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;string&#34;&gt;&amp;quot;&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;,&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;attr&#34;&gt;&amp;quot;license&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;string&#34;&gt;&amp;quot;ISC&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;,&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;attr&#34;&gt;&amp;quot;devDependencies&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;punctuation&#34;&gt;&amp;#123;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    &lt;span class=&#34;attr&#34;&gt;&amp;quot;@commitlint/cli&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;string&#34;&gt;&amp;quot;^16.2.3&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;,&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    &lt;span class=&#34;attr&#34;&gt;&amp;quot;@commitlint/config-conventional&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;string&#34;&gt;&amp;quot;^16.2.1&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;,&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    &lt;span class=&#34;attr&#34;&gt;&amp;quot;husky&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;string&#34;&gt;&amp;quot;^7.0.4&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;punctuation&#34;&gt;&amp;#125;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;,&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;attr&#34;&gt;&amp;quot;commitlint&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;punctuation&#34;&gt;&amp;#123;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    &lt;span class=&#34;attr&#34;&gt;&amp;quot;extends&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;string&#34;&gt;&amp;quot;@commitlint/config-conventional&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;punctuation&#34;&gt;&amp;#125;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;punctuation&#34;&gt;&amp;#125;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;

&lt;h2 id=&#34;配合commitizen使用&#34;&gt;&lt;a href=&#34;#配合commitizen使用&#34; class=&#34;headerlink&#34; title=&#34;配合commitizen使用&#34;&gt;&lt;/a&gt;配合commitizen使用&lt;/h2&gt;&lt;blockquote&gt;
&lt;p&gt;配合 commitizen 可以参考这篇文章: &lt;a href=&#34;/article/Normalizing-git-commit-messages.html&#34;&gt;使用commitizen规范化git提交信息&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2 id=&#34;配合husky使用&#34;&gt;&lt;a href=&#34;#配合husky使用&#34; class=&#34;headerlink&#34; title=&#34;配合husky使用&#34;&gt;&lt;/a&gt;配合husky使用&lt;/h2&gt;&lt;p&gt;关于如何使用husky可以参考这篇文章: &lt;a href=&#34;/article/Use-husky-manage-git-project.html&#34;&gt;使用Husky(哈士奇)管理Git项目&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;添加hook&lt;/p&gt;
&lt;figure class=&#34;highlight bash&#34;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&#34;gutter&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;2&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;3&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;4&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;5&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;6&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&#34;code&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;npx husky add .husky/commit-msg &lt;span class=&#34;string&#34;&gt;&amp;#x27;npx --no -- commitlint --edit &amp;quot;$1&amp;quot;&amp;#x27;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;comment&#34;&gt;# 因为有些命令行不支持上面这条命令&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;comment&#34;&gt;# 如果上面这条对你的项目不管用，可以试试以下其它命令&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;npx husky add .husky/commit-msg \&amp;quot;npx --no -- commitlint --edit &lt;span class=&#34;string&#34;&gt;&amp;#x27;$1&amp;#x27;&lt;/span&gt;\&amp;quot;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;comment&#34;&gt;# 或者&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;npx husky add .husky/commit-msg &lt;span class=&#34;string&#34;&gt;&amp;quot;npx --no -- commitlint --edit &lt;span class=&#34;variable&#34;&gt;$1&lt;/span&gt;&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;

&lt;h2 id=&#34;测试&#34;&gt;&lt;a href=&#34;#测试&#34; class=&#34;headerlink&#34; title=&#34;测试&#34;&gt;&lt;/a&gt;测试&lt;/h2&gt;&lt;p&gt;不符合规范的提交信息&lt;/p&gt;
&lt;figure class=&#34;highlight bash&#34;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&#34;gutter&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;2&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;3&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;4&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;5&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;6&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;7&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;8&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;9&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&#34;code&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;$ git commit -m &lt;span class=&#34;string&#34;&gt;&amp;quot;abc&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;⧗   input: abc&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;✖   subject may not be empty [subject-empty]&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;✖   &lt;span class=&#34;built_in&#34;&gt;type&lt;/span&gt; may not be empty [type-empty]&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;✖   found 2 problems, 0 warnings&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;ⓘ   Get &lt;span class=&#34;built_in&#34;&gt;help&lt;/span&gt;: https://github.com/conventional-changelog/commitlint/&lt;span class=&#34;comment&#34;&gt;#what-is-commitlint&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;husky - commit-msg hook exited with code 1 (error)&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;



</content>
        <category term="Git" />
        <updated>2022-04-12T15:39:56.000Z</updated>
    </entry>
    <entry>
        <id>https://blog.imlete.cn/article/Use-husky-manage-git-project.html</id>
        <title>使用Husky(哈士奇)管理Git项目</title>
        <link rel="alternate" href="https://blog.imlete.cn/article/Use-husky-manage-git-project.html"/>
        <content type="html">&lt;h2 id=&#34;什么是-Husky-哈士奇&#34;&gt;&lt;a href=&#34;#什么是-Husky-哈士奇&#34; class=&#34;headerlink&#34; title=&#34;什么是 Husky(哈士奇)&#34;&gt;&lt;/a&gt;什么是 Husky(哈士奇)&lt;/h2&gt;&lt;p&gt;Husky 就是狗，没错就是拆家的那家伙，也不知道&lt;a href=&#34;https://github.com/typicode&#34;&gt;@typicode&lt;/a&gt;是怎么想的，尽然起了这么&lt;strong&gt;有趣&lt;/strong&gt;的一个项目名字&lt;/p&gt;
&lt;p&gt;Husky 可以方便快速的使用&lt;code&gt;Git hooks&lt;/code&gt;，帮你简单的配置项目，同时 Husky 可以将&lt;code&gt;Git hooks&lt;/code&gt;同步到仓库，让整个团队能使用相同的&lt;code&gt;Git hooks&lt;/code&gt;&lt;/p&gt;
&lt;h2 id=&#34;什么是-Git-Hooks&#34;&gt;&lt;a href=&#34;#什么是-Git-Hooks&#34; class=&#34;headerlink&#34; title=&#34;什么是 Git Hooks&#34;&gt;&lt;/a&gt;什么是 Git Hooks&lt;/h2&gt;&lt;blockquote&gt;
&lt;p&gt;文档说明中文: &lt;a href=&#34;https://git-scm.com/book/zh/v2/%E8%87%AA%E5%AE%9A%E4%B9%89-Git-Git-%E9%92%A9%E5%AD%90&#34;&gt;https://git-scm.com/book/zh/v2/自定义-Git-Git-钩子&lt;/a&gt;&lt;br&gt;文档说明英文: &lt;a href=&#34;https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks&#34;&gt;https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;因为提交到仓库后&lt;code&gt;.git&lt;/code&gt;文件是不存在仓库中的，而&lt;code&gt;Git hooks&lt;/code&gt;却在&lt;code&gt;.git/hooks&lt;/code&gt;目录下&lt;/p&gt;
&lt;p&gt;现在假设你是项目组长，一些项目需要使用的技术和库，需要你来配置，然后让小组成员去使用，那么当你使用了&lt;code&gt;Git hooks&lt;/code&gt;后，只有你本地这台电脑能使用&lt;code&gt;Git hooks&lt;/code&gt;，其它人&lt;strong&gt;Clone(克隆)&lt;/strong&gt;或&lt;strong&gt;Pull(拉取)&lt;/strong&gt;，都不会得到你配置的&lt;code&gt;Git hooks&lt;/code&gt;，这时就可以使用&lt;code&gt;Husky&lt;/code&gt;来同步&lt;code&gt;Git hooks&lt;/code&gt;&lt;/p&gt;
&lt;h2 id=&#34;安装-Husky&#34;&gt;&lt;a href=&#34;#安装-Husky&#34; class=&#34;headerlink&#34; title=&#34;安装 Husky&#34;&gt;&lt;/a&gt;安装 Husky&lt;/h2&gt;&lt;figure class=&#34;highlight bash&#34;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&#34;gutter&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;1&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&#34;code&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;npm install husky -D&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;

&lt;blockquote&gt;
&lt;p&gt;为什么使用&lt;code&gt;prepare&lt;/code&gt;当作 key？&lt;br&gt;因为&lt;code&gt;prepare&lt;/code&gt;是 npm 的生命周期命令，它会在&lt;code&gt;npm install&lt;/code&gt;完成后执行，所以当如果有人克隆了项目并执行了&lt;code&gt;npm install&lt;/code&gt;后就会自动初始化 husky 来管理 hook&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;编辑&lt;code&gt;package.json&lt;/code&gt;的&lt;code&gt;scripts&lt;/code&gt;并并运行&lt;/p&gt;
&lt;figure class=&#34;highlight bash&#34;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&#34;gutter&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;2&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&#34;code&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;npm set-script prepare &lt;span class=&#34;string&#34;&gt;&amp;quot;npx husky install&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;npm run prepare&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;

&lt;p&gt;其中&lt;code&gt;npm set-script&lt;/code&gt;命令仅限 npm 版本是 7.x 版本以上，如果不是则需要手动编辑&lt;/p&gt;
&lt;figure class=&#34;highlight json&#34;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&#34;gutter&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;2&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;3&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;4&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;5&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;6&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;7&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;8&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;9&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;10&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;11&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;12&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;13&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;14&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;15&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;16&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&#34;code&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;punctuation&#34;&gt;&amp;#123;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;attr&#34;&gt;&amp;quot;name&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;string&#34;&gt;&amp;quot;study-notes&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;,&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;attr&#34;&gt;&amp;quot;version&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;string&#34;&gt;&amp;quot;1.0.0&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;,&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;attr&#34;&gt;&amp;quot;description&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;string&#34;&gt;&amp;quot;&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;,&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;attr&#34;&gt;&amp;quot;main&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;string&#34;&gt;&amp;quot;index.js&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;,&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;attr&#34;&gt;&amp;quot;scripts&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;punctuation&#34;&gt;&amp;#123;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    &lt;span class=&#34;attr&#34;&gt;&amp;quot;test&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;string&#34;&gt;&amp;quot;echo \&amp;quot;Error: no test specified\&amp;quot; &amp;amp;&amp;amp; exit 1&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;,&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    &lt;span class=&#34;attr&#34;&gt;&amp;quot;prepare&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;string&#34;&gt;&amp;quot;husky install&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;punctuation&#34;&gt;&amp;#125;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;,&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;attr&#34;&gt;&amp;quot;keywords&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;punctuation&#34;&gt;[&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;]&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;,&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;attr&#34;&gt;&amp;quot;author&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;string&#34;&gt;&amp;quot;&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;,&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;attr&#34;&gt;&amp;quot;license&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;string&#34;&gt;&amp;quot;ISC&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;,&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;attr&#34;&gt;&amp;quot;devDependencies&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;punctuation&#34;&gt;&amp;#123;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;    &lt;span class=&#34;attr&#34;&gt;&amp;quot;husky&amp;quot;&lt;/span&gt;&lt;span class=&#34;punctuation&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;string&#34;&gt;&amp;quot;^7.0.4&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;  &lt;span class=&#34;punctuation&#34;&gt;&amp;#125;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;punctuation&#34;&gt;&amp;#125;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;

&lt;h2 id=&#34;添加-hook&#34;&gt;&lt;a href=&#34;#添加-hook&#34; class=&#34;headerlink&#34; title=&#34;添加 hook&#34;&gt;&lt;/a&gt;添加 hook&lt;/h2&gt;&lt;p&gt;举例：如果在进行 git commit 之前对代码进行&lt;code&gt;eslint&lt;/code&gt;检查，那么可以使用&lt;code&gt;pre-commit&lt;/code&gt;(这仅仅是个例子，你可以灵活的使用 hook 完成一些你想要完成的事情)&lt;/p&gt;
&lt;p&gt;关于&lt;code&gt;pre-commit&lt;/code&gt;的说明可以在官方文档查阅或是直接打开&lt;code&gt;.git\hooks\pre-commit.sample&lt;/code&gt;查看注释说明&lt;/p&gt;
&lt;figure class=&#34;highlight bash&#34;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&#34;gutter&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;1&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&#34;code&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;npx husky add .husky/pre-commit &lt;span class=&#34;string&#34;&gt;&amp;quot;npx eslint --fix&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;

&lt;p&gt;当你执行&lt;code&gt;git commit -m &amp;quot;xxx&amp;quot;&lt;/code&gt;提交代码之前就会自动执行 eslint&lt;/p&gt;
&lt;p&gt;例如添加 hook 让他在提交代码前执行&lt;code&gt;package.json&lt;/code&gt;中的 test 脚本&lt;/p&gt;
&lt;figure class=&#34;highlight bash&#34;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&#34;gutter&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;2&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&#34;code&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;npx husky add .husky/pre-commit &lt;span class=&#34;string&#34;&gt;&amp;quot;npm test&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;git commit -m &lt;span class=&#34;string&#34;&gt;&amp;quot;test husky pre-commit&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;

&lt;p&gt;test 脚本输出一段内容 &lt;strong&gt;“Error: no test specified”&lt;/strong&gt; 后还行了&lt;code&gt;exit 1&lt;/code&gt;结束命令如下，由于执行了&lt;code&gt;exit 1&lt;/code&gt;结束了命令(相当于我们按了ctrl+c一样)所以并未提交&lt;/p&gt;
&lt;figure class=&#34;highlight bash&#34;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&#34;gutter&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;2&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;3&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;4&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;5&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;6&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;7&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&#34;code&#34;&gt;&lt;pre&gt;&lt;span class=&#34;line&#34;&gt;$ git commit -m &lt;span class=&#34;string&#34;&gt;&amp;quot;test husky pre-commit&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&amp;gt; study-notes@1.0.0 &lt;span class=&#34;built_in&#34;&gt;test&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&amp;gt; &lt;span class=&#34;built_in&#34;&gt;echo&lt;/span&gt; &lt;span class=&#34;string&#34;&gt;&amp;quot;Error: no test specified&amp;quot;&lt;/span&gt; &amp;amp;&amp;amp; &lt;span class=&#34;built_in&#34;&gt;exit&lt;/span&gt; 1&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;string&#34;&gt;&amp;quot;Error: no test specified&amp;quot;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&#34;line&#34;&gt;husky - pre-commit hook exited with code 1 (error)&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
</content>
        <category term="Git" />
        <updated>2022-04-12T14:16:02.000Z</updated>
    </entry>
</feed>