乐趣区

关于前端:记录如何造一个vite插件2

jiezi

上一篇曾经把 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 文件，主动生成文档
退出移动版