https://www.calvinhappy.com//blog 这是一个技术博客，用Next.js，Markdown还有Tailwind.css来构建的 en-us sunkehappy@gmail.com (祝你好运) sunkehappy@gmail.com (祝你好运) Thu, 24 Sep 2020 00:00:00 GMT https://www.calvinhappy.com//blog/2020-09-24-webpack-tapable-usage https://www.calvinhappy.com//blog/2020-09-24-webpack-tapable-usage 最近打算看一下WebPack的源代码，遇到的第一个我觉得需要详细看下的不太复杂的点(相比于整个WebPack的代码)就是[Tapable](https://github.com/webpack/tapable)。因为稍微看下WebPack的代码的话就会发现到处都是hooks，这些hooks就是用的这个Tapable。 Thu, 24 Sep 2020 00:00:00 GMT sunkehappy@gmail.com (祝你好运) WebPack源代码 https://www.calvinhappy.com//blog/2021-03-05-vite-1.0-source-code-explanation https://www.calvinhappy.com//blog/2021-03-05-vite-1.0-source-code-explanation 最近在看vite的源代码，入手的是1.0.0-rc13，目前vite的版本是2.0，先写下这个解读过程，然后再分析2.0的。 Fri, 05 Mar 2021 00:00:00 GMT sunkehappy@gmail.com (祝你好运) vite源代码置顶 https://www.calvinhappy.com//blog/2021-03-06-vite-1.0-preparation https://www.calvinhappy.com//blog/2021-03-06-vite-1.0-preparation 解读准备主要是要能够修改源代码，然后用我们修改后的代码来运行一个test程序，知道具体运行过程中的一些数据，验证我们的推想。 Sat, 06 Mar 2021 00:00:00 GMT sunkehappy@gmail.com (祝你好运) vite源代码 https://www.calvinhappy.com//blog/2021-03-06-vite-1.0-simple-introduction https://www.calvinhappy.com//blog/2021-03-06-vite-1.0-simple-introduction vite是通过使用[ES Module](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)来实现开发环境秒开，快速HMR的。这个ES Module说白了我们前端开发者应该每天都在用，因为我们都在用import，export来导入导出模块。不过如果你还是用的CommonJS的require，那就不是ES Module。 Sat, 06 Mar 2021 00:00:00 GMT sunkehappy@gmail.com (祝你好运) vite源代码 https://www.calvinhappy.com//blog/2021-03-07-vite-1.0-boot-code-analyze https://www.calvinhappy.com//blog/2021-03-07-vite-1.0-boot-code-analyze 首先入口文件是`bin/vite.js`，那`bin/vite.js`又是调用的`../dist/node/cli`，这个脚本是在我们编译之后才会有的。具体的编译方法，我们可以参考`package.json`里面的`scripts`。 Sun, 07 Mar 2021 00:00:00 GMT sunkehappy@gmail.com (祝你好运) vite源代码 https://www.calvinhappy.com//blog/2021-03-08-vite-1.0-HTML-plugin https://www.calvinhappy.com//blog/2021-03-08-vite-1.0-HTML-plugin 通常我们开发的网站，第一次加载的就是HTML页面，vite会改写这个HTML，这是通过`src/node/server/index.ts`里面的`htmlRewritePlugin`来实现的。 Mon, 08 Mar 2021 00:00:00 GMT sunkehappy@gmail.com (祝你好运) vite源代码 https://www.calvinhappy.com//blog/2021-03-09-vite-1.0-module-rewrite-plugin https://www.calvinhappy.com//blog/2021-03-09-vite-1.0-module-rewrite-plugin 这个`serverPluginModuleRewrite`文件是vite 1.0里面非常重要的一个文件，我们需要仔细分析一下，整体结构如下： Tue, 09 Mar 2021 00:00:00 GMT sunkehappy@gmail.com (祝你好运) vite源代码 https://www.calvinhappy.com//blog/2021-03-09-vite-1.0-serve-static https://www.calvinhappy.com//blog/2021-03-09-vite-1.0-serve-static 这个`serverPluginServeStatic`文件的作用就是读取硬盘上的文件并返回。我们可以看下代码： Tue, 09 Mar 2021 00:00:00 GMT sunkehappy@gmail.com (祝你好运) vite源代码 https://www.calvinhappy.com//blog/2021-03-15-vite-1.0-module-reresolve-plugin https://www.calvinhappy.com//blog/2021-03-15-vite-1.0-module-reresolve-plugin 这个`serverPluginModuleResolve`文件也是vite 1.0里面非常重要的一个文件，我们需要仔细分析一下，整体结构如下： Mon, 15 Mar 2021 00:00:00 GMT sunkehappy@gmail.com (祝你好运) vite源代码 https://www.calvinhappy.com//blog/2021-03-16-vite-1.0-CSS-plugin https://www.calvinhappy.com//blog/2021-03-16-vite-1.0-CSS-plugin 这个`serverPluginCss`是用来处理CSS文件的，因为在vite里面CSS（包括SCSS这种预处理器）和JSON都被处理成JS module，然后再由HTML里面注入的`src/client/client.ts`来更新页面。 Tue, 16 Mar 2021 00:00:00 GMT sunkehappy@gmail.com (祝你好运) vite源代码 https://www.calvinhappy.com//blog/2021-03-16-vite-1.0-client-plugin https://www.calvinhappy.com//blog/2021-03-16-vite-1.0-client-plugin 这个`serverPluginClient`是HMR的一部分，它是负责在注入客户端WSS代码的时候，替换里面的协议域名和端口号，这些数据是从配置里面读取的。 Tue, 16 Mar 2021 00:00:00 GMT sunkehappy@gmail.com (祝你好运) vite源代码 https://www.calvinhappy.com//blog/2021-03-17-vite-1.0-HMR-client https://www.calvinhappy.com//blog/2021-03-17-vite-1.0-HMR-client 这个`src/client/client.ts`是HMR的客户端，我们之前提到过，HMR是通过WebSockets来做的，那它肯定是需要一个客户端和一个服务端的，通常就是客户端来连接服务端，然后服务端在特定条件下发送消息，客户端接收并处理消息，我们来看下代码主结构： Wed, 17 Mar 2021 00:00:00 GMT sunkehappy@gmail.com (祝你好运) vite源代码 https://www.calvinhappy.com//blog/2021-03-22-vite-1.0-HMR-plugin https://www.calvinhappy.com//blog/2021-03-22-vite-1.0-HMR-plugin 超快的HMR也是Vite的卖点之一，HMR的功能是通过[客户端](/posts/2021-03-17-vite-1.0-HMR-client)和这个服务端的插件来共同完成的。 Mon, 22 Mar 2021 00:00:00 GMT sunkehappy@gmail.com (祝你好运) vite源代码 https://www.calvinhappy.com//blog/2021-03-23-tencent-geeks-chanllenge-match https://www.calvinhappy.com//blog/2021-03-23-tencent-geeks-chanllenge-match 在一个腾讯技术群里看到这个比赛，就顺手点开看了下，本以为会是算法比赛或者安全比赛。我尝试了一下之后，发现我也可以搞搞，因为是前端相关。我并不是专业搞安全的，也未能拿到很好的名次（69/927），不过在做题的过程中，我能突破自我，能想办法解决这些问题，还是很有成就感的。 Tue, 23 Mar 2021 00:00:00 GMT sunkehappy@gmail.com (祝你好运) vite源代码 https://www.calvinhappy.com//blog/2021-08-19-alibaba-hooks-source-code-analysis-useToggle https://www.calvinhappy.com//blog/2021-08-19-alibaba-hooks-source-code-analysis-useToggle 说来惭愧，在上家公司里面hooks用的不多，现在的新公司新项目，全是函数式组件，没有类组件了。我也开始大量使用各种hooks，然后找到了这个第三方库[hooks](https://github.com/alibaba/hooks)，自定义的hooks。这篇文章就是来分析一下各个hooks的源代码。 Thu, 19 Aug 2021 00:00:00 GMT sunkehappy@gmail.com (祝你好运) ReactReact Hooks源代码 https://www.calvinhappy.com//blog/2021-09-05-alibaba-hooks-source-code-analysis-useClickAway https://www.calvinhappy.com//blog/2021-09-05-alibaba-hooks-source-code-analysis-useClickAway useClickAway是用来管理点击的，但是这些点击是在目标元素之外，不在之内。啥时候会用到它呢？比如我做了一个弹窗，当点击弹窗外的地方的时候，我想要收起弹窗，这个时候就可以用useClickAway。 Sun, 05 Sep 2021 00:00:00 GMT sunkehappy@gmail.com (祝你好运) ReactReact Hooks源代码 https://www.calvinhappy.com//blog/2021-09-26-alibaba-hooks-source-code-analysis-useCookieState https://www.calvinhappy.com//blog/2021-09-26-alibaba-hooks-source-code-analysis-useCookieState useCookieState是用来管理Cookie的，可以用hook的方式十分方便的来访问Cookie。 Sun, 26 Sep 2021 00:00:00 GMT sunkehappy@gmail.com (祝你好运) ReactReact Hooks源代码