【記錄】如何造一個vite外掛(2)

meetqy 發表於 2021-07-21

上一篇已經把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是有提示的。

【記錄】如何造一個vite外掛(2)

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

所以來改造一下命令

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

執行一下發下會多一個index.d.ts的檔案,測試一下,隨便新建一個js檔案

【記錄】如何造一個vite外掛(2)

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

建立一個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分別寫在examplevue-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,寫點錯誤程式碼

【記錄】如何造一個vite外掛(2)

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

npx eslint packages/vue-docs/lib

看下是否報錯

【記錄】如何造一個vite外掛(2)

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

配置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結合到一起尼,下次再見。

最後再來推廣一波