【记录】如何造一个vite插件(2)
上一篇已经把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 文件，自动生成文档
