如何从零编写一个vite插件 创建 vite 插件通用模板

1. 初始化

mkdir vite-progress && cd vite-progress && pnpm init
1.2 安装 typescript

pnpm i typescript @types/node -D
1.3 配置 tsconfig.json

{
"compilerOptions": {
"module": "ESNext",
"target": "esnext",
"moduleResolution": "node",
"strict": true,
"declaration": true,
"noUnusedLocals": true,
"esModuleInterop": true,
"outDir": "dist",
"lib": ["ESNext"],
"sourceMap": false,
"noEmitOnError": true,
"noImplicitAny": false
},
"include": [
"src/",
".d.ts"
],
"exclude": [
"node_modules",
"examples",
"dist"
]
}
1.4 安装 vite

pnpm intsall vite --save-dev

1. 配置 eslint 和 prettier（可选）
   安装 eslint

pnpm i eslint @typescript-eslint / parser @typescript-eslint / eslint - plugin--save - dev
配置.eslintrc：

{
"root": true,
"env": {
"browser": true,
"es2021": true,
"es6": true,
"node": true
},
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": ["@typescript-eslint"],
"rules": {
"no-console": 1,
"@typescript-eslint/no-non-null-assertion": "off",
"@typescript-eslint/ban-ts-comment": "off",
"@typescript-eslint/no-explicit-any": "off"
}
}
配置格式化文件
安装 prettier （可选）

pnpm i prettier eslint - config - prettier eslint - plugin - prettier--save - dev
配置.prettierrc ：

{
"printWidth": 80,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": true,
"quoteProps": "as-needed",
"trailingComma": "all",
"bracketSpacing": true,
"arrowParens": "always",
"requirePragma": false,
"insertPragma": false,
"proseWrap": "preserve",
"endOfLine": "auto"
}
3. 新增 src / index.ts 入口

import type { PluginOption } from 'vite';

export default function vitePluginTemplate (): PluginOption {
return {
// 插件名称
name: 'vite-plugin',
// pre 会较于 post 先执行
enforce: 'pre', // post
// 指明它们仅在 'build' 或 'serve' 模式时调用
apply: 'build', // apply 亦可以是一个函数
config (config, { command }) {
console.log('这里是config钩子');
},

    configResolved (resolvedConfig) {
        console.log('这里是configResolved钩子');
    },

    configureServer (server) {
        console.log('这里是configureServer钩子');
    },

    transformIndexHtml (html) {
        console.log('这里是transformIndexHtml钩子');
    },
}

}
到这里，那么我们的基本模版就建好了，怎么运行呢？

在当前目录下执行

pnpm create vite my-vue-app --template vue

cd my-vue-app

pnpm i

修改 my-vue-app/package.json

{
"name": "my-vue-app",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.2.37"
},
"devDependencies": {
"@vitejs/plugin-vue": "^3.1.0",
"vite": "link:../node_modules/vite"
}
}

主要是加入 "devDependencies": { "vite": "link:../node_modules/vite" }

这里是让 里面和外面的 vite一个版本

然后修改 my-vue-app/vite.config.ts 文件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import acnBuildPlugin from '../dist/index.mjs'

export default defineConfig({
plugins: [vue(), acnBuildPlugin()]
})

好了，在外面（vite-progress 目录下）我们再下载个tsup ，tsup 是一个轻小且无需配置的，由 esbuild 支持的构建工具；

修改一下 vite-progress/package.json 的打包命令，及路径

"main": "./dist/index.mjs", "scripts": { "test": "echo "Error: no test specified" && exit 1", "dev": "pnpm run build -- --watch --ignore-watch my-vue-app", "build": "tsup src/index.ts --dts --format cjs,esm", "build:vite": "pnpm run build && cd my-vue-app && pnpm run build", "prepublish": "pnpm run build", "release": "npx bumpp --push --tag --commit && pnpm publish" },

开发环境运行
开发环境运行：实时监听文件修改后重新打包（热更新） pnpm run build:vite

到这里你就可以 边开发边运行了