Vite

  • Published on
    在一个腾讯技术群里看到这个比赛，就顺手点开看了下，本以为会是算法比赛或者安全比赛。我尝试了一下之后，发现我也可以搞搞，因为是前端相关。我并不是专业搞安全的，也未能拿到很好的名次（69/927），不过在做题的过程中，我能突破自我，能想办法解决这些问题，还是很有成就感的。
  • Published on
    这个`src/client/client.ts`是HMR的客户端，我们之前提到过，HMR是通过WebSockets来做的，那它肯定是需要一个客户端和一个服务端的，通常就是客户端来连接服务端，然后服务端在特定条件下发送消息，客户端接收并处理消息，我们来看下代码主结构：
  • Published on
    这个`serverPluginCss`是用来处理CSS文件的，因为在vite里面CSS（包括SCSS这种预处理器）和JSON都被处理成JS module，然后再由HTML里面注入的`src/client/client.ts`来更新页面。
  • Published on
    这个`serverPluginClient`是HMR的一部分，它是负责在注入客户端WSS代码的时候，替换里面的协议域名和端口号，这些数据是从配置里面读取的。
  • Published on
    通常我们开发的网站，第一次加载的就是HTML页面，vite会改写这个HTML，这是通过`src/node/server/index.ts`里面的`htmlRewritePlugin`来实现的。
  • Published on
    首先入口文件是`bin/vite.js`，那`bin/vite.js`又是调用的`../dist/node/cli`，这个脚本是在我们编译之后才会有的。具体的编译方法，我们可以参考`package.json`里面的`scripts`。
  • Published on
    解读准备主要是要能够修改源代码，然后用我们修改后的代码来运行一个test程序，知道具体运行过程中的一些数据，验证我们的推想。
  • Published on
    vite是通过使用[ES Module](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)来实现开发环境秒开，快速HMR的。这个ES Module说白了我们前端开发者应该每天都在用，因为我们都在用import，export来导入导出模块。不过如果你还是用的CommonJS的require，那就不是ES Module。