【記錄】如何造一個vite插件(2)

2021 年 7 月 21 日
筆記
vite插件開發記錄

上一篇已經把vite插件的基礎結構搭建起來了，這一次就來聊聊繼續完善開發環境。

完善開發環境

生成d.ts文件

先來修改一下lib/index.ts這個文件

export interface userOptions {
  name: string;
  age: number;
  base?: string;
}

export function handleOptions(options?: userOptions): string {
  return `${options.name || "小明"}今年${options.age},主頁${
    options?.base || "/"
  }`;
}

在執行 yarn build,不出所料是打包成功了，然後新建一個文件a.js導入dist/index.js這個文件，也能夠正常使用，但是又發現一個問題，貌似沒有隻能提示，完全不知道options可以傳入哪些參數，這就有點不滿意了，對標一下@vitejs/plugin-vue是有提示的。

原因尼也能簡單，就是tsup打包的時候沒有生成.d.ts的類文件。翻了下文檔tsup自帶了生成類文件的功能。有個參數是--dts

所以來改造一下命令

{
	"build": "tsup ./lib/index.ts --dts"
}

運行一下發下會多一個index.d.ts的文件，測試一下，隨便新建一個js文件

發現也有提示了，完美🤩🤩🤩

創建一個git倉庫

到這裡也配置了有點東西了，後面的東西還需要git倉庫的支援，所以先搞一個git倉庫把程式碼提上去。

好像還沒有配置.gitignore,把example當中的.gitignore移動到根目錄來

node_modules
.DS_Store
dist
dist-ssr
*.local

配置開發規範

雖然啥都還沒有，但是逼格不能少，萬一用的人多了，給你提個pr什麼的，沒有一個嚴格的規範就很難受。並且只靠文檔去規範是不現實的，所以必須在提交前程式碼去驗證，不合格直接不讓提交。

commit規範

先從簡單的commit規範開始吧，細緻了解可以瞅瞅這篇文章如何規範你的Git commit？

這裡就要用到commitlint這個插件了，不啰嗦直接安裝沒啥難度

yarn add @commitlint/config-conventional @commitlint/cli husky -D -W
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

注意這個是安裝在外層的monorepo這個庫裡面，因為無論改任何文件，只要提交我們都要校驗commit msg

在scipts中在添加一條命令

{
	"prepare": "husky install"
}

yarn prepare
# 把commitlint添加到git鉤子中
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit $1'

最後提交一下 git commit -m ‘xxx’ 只要不按照規範，就會拋出異常

列舉一下插件的作用

commitlint 檢測commit msg是否規範
husky git hooks，有了才能完善後面的，提交之前自動格式化程式碼，檢測程式碼是否規範

又完成了一個小目標，完美 😆😆😆

程式碼規範

程式碼規範有兩部分，一個是eslint檢查程式碼異常，另外一個是prettier程式碼格式的檢查。

在配置之前先來避個坑，現在項目的packages有2個，最開始我是把eslint和prettier分別寫在example，vue-docs裡面的，想的是一個vue的文件多，一個純ts，這樣就可以不同的項目用不同的方案。完了之後發現我就是個憨憨，寫在最外層，做程式碼檢查的時候直接就一起做了，並且是可以支援：針對不同的文件類型執行不同的檢查方案。

先來配置eslint

yarn add -D typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint -W

配置.eslintrc

{
    "parser": "@typescript-eslint/parser",
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {},
    "extends": [
        "plugin:@typescript-eslint/recommended"
    ]
}

因為核心程式碼是ts所以要用到s的插件這兩部很簡單在@typescript-eslint/eslint-plugin的官網上抄下來就行了。@typescript-eslint/eslint-plugin

來驗證一下，在vue-docs/lib/index.ts，寫點錯誤程式碼

編輯器報錯了，不要激動，還沒完。這裡有個坑，如果你的編輯器不是用的項目中的.eslintrc配置，這個測試是沒用的，所以還需要執行下一步

npx eslint packages/vue-docs/lib

看下是否報錯

如果看到的是這樣的才能代表成功，又一個功能點完成了🤙🤙🤙

配置prettier

這個也很簡單從官網抄就行了eslint-plugin-prettier

yarn add eslint-plugin-prettier prettier -D -W

修改.eslintrc,新增如下

{
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

在來安裝一個推薦配置

yarn add eslint-config-prettier -D -W

完整的.eslintrc配置

{
    "parser": "@typescript-eslint/parser",
    "plugins": [
        "@typescript-eslint",
        "prettier"
    ],
    "rules": {
        "prettier/prettier": "error"
    },
    "extends": [
        "plugin:@typescript-eslint/recommended",
        "plugin:prettier/recommended"
    ]
}

最後來測一測，這個測試就很簡單了隨便用記事本改一下格式，然後執行

npx prettier --write packages/vue-docs/lib

格式是不是有回到熟悉的樣子了。

最後把2條命令加入到scripts中

{
  "lint": "eslint packages/vue-docs/lib",
  "fix": "prettier --write packages/vue-docs/lib "
}

到這裡尼，基本的程式碼規範就有了。那麼如何把程式碼規範和git結合到一起尼，下次再見。

最後再來推廣一波

倉庫鏈接: vite-plugin-vue-docs
在線體驗: 解析.vue 文件，自動生成文檔

Tags: vite插件開發記錄