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

meetqy發表於2021-07-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結合到一起尼，下次再見。

最後再來推廣一波

相關文章