1. 首頁 > 生活百科 > >

從0開始寫一個簡單的vite hmr 插件

生活百科

從0開始寫一個簡單的vite hmr 插件0. 寫在前面嘮叨半天，趕緊開始吧

從0開始寫一個簡單的vite hmr 插件

文章插圖
1. 初始化項目由于是真從0開始，我們這里不選擇vite官方提供的create-vite ， 而是通過依賴安裝的方式一步步搭建起來一個vite-plugin
按照你習慣的方式初始化項目
mkdir vite-plugin-todo// pnpmpnpm init// yarnyarn init// npmnpm initcd vite-plugin-todo安裝vite
// pnpmpnpm add vite// yarnyarn add vite// npmnpm add vite初始化項目目錄
// 用來作為vite的入口 ， 以及頁面展示touch index.html // src文件夾以及main入口mkdir srctouch src/main.ts// plugins文件夾，存放我們的vite插件mkdir plugins// 創建vite配置文件, 以及vite環境配置文件touch vite.config.tstouch src/vite-env.d.ts在index.html 中添加main.ts 入口
【從0開始寫一個簡單的vite hmr 插件】// index.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vite-hmr-plugin-test</title></head><body><!--這里添加main.ts 入口--><script src="https://www.huyubaike.com/src/main.ts" type="module"></script></body></html>修改package.json 的命令
{"name": "vite-plugin-todo","version": "1.0.0","description": "","main": "index.js","scripts": {"dev": "vite dev"},"keywords": [],"author": "","license": "ISC","dependencies": {"@types/node": "^18.8.5","vite": "^3.1.8"}}為了使得typescript能夠解析nodejs模塊
pnpm add @types/nodejsyarn add @types/nodejsnpm install @types/nodejs嘗試一下pnpm dev 沒報錯的話就OK了
項目的結構如下
從0開始寫一個簡單的vite hmr 插件

文章插圖
2. 初識vite plugin2.1 vite 插件是什么2.2 vite 插件的生命周期在說vite插件生命周期之前，我們還是先完善一下vite.config.ts
import { defineConfig } from "vite";export default defineConfig({plugins: [// Plugins],assetsInclude: ["src/**/*.todo"]})
  • 定義并導出一個配置
  • plugins 是用來存放vite插件實例的
  • assetsInclude 是用來指明需要解析的資源路徑的，我們這里以.todo 為資源后綴

從0開始寫一個簡單的vite hmr 插件

文章插圖
插件生命分為3個階段，啟動時，模塊傳入時，服務器關閉時
關于這幾個模塊的具體說明見vite官方文檔 。
這里只說我們用到的transform
從名字可以看出是有關變化的函數，它的作用正是在我們執行導入的時候，提供檢測的函數 。
從0開始寫一個簡單的vite hmr 插件

文章插圖
每當執行寫一個import，vite就會把這個信息傳遞到每一個插件的transform中
插件根據所需轉化自己需要的.
transform接收兩個參數,src為導入的文本內容 ， 另外一個id則是此模塊的絕對路徑（可以通過絕對路徑進行文件類型判斷）
transform(src, id) {return {code: "",// ...}}2.3 vite 插件是怎么提供其他資源導入的功能的？前面提到的transform函數是一個解析函數，當通過import導入的時候，就會觸發，然后經過一定處理之后返回 。
所以你應該想到了 ， 其他的資源應該是以某種符合js語法的方法導入了 ， 而這個處理過程transform實現了這個過程，讓一個原本不符合js語法的資源，變的合法了 。
從0開始寫一個簡單的vite hmr 插件

文章插圖
那么說到底是怎么實現的呢？
答：通過注入的方法 。
從0開始寫一個簡單的vite hmr 插件

文章插圖
在瀏覽器加載之前，vite先幫你把各種import模塊全部轉換好，轉換為如上的形式，那你說這都定義成變量了，瀏覽器肯定認啊，對吧！
那你可能會問我還是不明白，到底怎么轉換的，其實就是通過transform的返回值來解析轉換的 。
transform(src, id) {// 解析這個文件，是不是你要的type// 執行轉換// 把轉換的結果可以通過 `` 插值到code里面return {code: "", // 轉換后的代碼// ...}}2.4 vite插件長什么樣？export default function todoParser() {// 插件創建之初的代碼，可以在這里配置插件所需的資源return {name: "todo-parser", // 插件名// 生命周期函數transform(src, id) {// 解析這個文件，是不是你要的type// 執行轉換// 把轉換的結果可以通過 `` 插值到code里面return {code: "", // 轉換后的代碼// ...}}}}

推薦閱讀