attiya/ebike-plus-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 新增vite-plugin-eslint插件以及抽象出vite.config.js的插件配置项

Browse Source
This commit is contained in:
WANGFAN\wangf 2024-12-04 16:56:38 +08:00
parent 23349a063f
commit 7098b0e59d
7 changed files with 137 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.prettierrc.cjs
View File

@ -37,5 +37,5 @@ module.exports = {
endOfLine: "auto",
// 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码 (rangeStart：开始，rangeEnd：结束)
rangeStart: 0,
rangeEnd: Infinity,
rangeEnd: Infinity
};

80
build/vite-plugin.ts Normal file
View File

@ -0,0 +1,80 @@
import vue from "@vitejs/plugin-vue";
import path from "path";
import { PluginOption } from "vite";
import eslintPlugin from "vite-plugin-eslint";
import { vitePluginForArco } from "@arco-plugins/vite-vue";
import { createHtmlPlugin } from "vite-plugin-html";
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
import AutoImport from "unplugin-auto-import/vite";
import { ArcoResolver } from "unplugin-vue-components/resolvers";
import Components from "unplugin-vue-components/vite";
import { viteMockServe } from "vite-plugin-mock";
/**
* 创建 vite 插件
* @param viteEnv
*/
export const createVitePlugins = (viteEnv: ViteEnv): (PluginOption | PluginOption[])[] => {
const env = viteEnv;
return [
vue(),
// esLint 报错信息显示在浏览器界面上
eslintPlugin(),
vitePluginForArco({
style: "css"
}),
// 提供ejs模板能力，用于index.html的标题显示
createHtmlPlugin({
inject: {
data: {
title: env.VITE_GLOB_APP_TITLE
}
}
}),
createSvgIconsPlugin({
// 配置src下存放svg的路径，这里表示在src/assets/svgs文件夹下
iconDirs: [path.resolve(process.cwd(), "src/assets/svgs")],
symbolId: "icon-[dir]-[name]"
}),
AutoImport({
// 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
imports: ["vue", "vue-router"],
// arco组件的按需加载
resolvers: [ArcoResolver()],
// 解决eslint报错问题
eslintrc: {
// 这里先设置成true然后npm run dev 运行之后会生成 .eslintrc-auto-import.json 文件之后，在改为false
enabled: false,
filepath: "./.eslintrc-auto-import.json", // 生成的文件路径
globalsPropValue: true
},
// 配置文件生成位置
dts: "src/auto-import.d.ts"
}),
Components({
resolvers: [
// arco组件的按需加载
ArcoResolver({
sideEffect: true
})
],
// 自动加载组件的目录配置,默认的为 'src/components'
dirs: ["src/components"],
// 组件的有效文件扩展名
extensions: ["vue"],
// 配置文件生成位置
dts: "src/components.d.ts"
}),
viteMockServe({
mockPath: "./src/mock/", // 目录位置
logger: true, // 是否在控制台显示请求日志
supportTs: true, // 是否读取ts文件模块
localEnabled: env.VITE_APP_OPEN_MOCK === "true", // 设置是否启用本地mock文件
prodEnabled: env.VITE_APP_OPEN_MOCK === "true", // 设置打包是否启用mock功能
// 这样可以控制关闭mock的时候不让mock打包到最终代码内
injectCode: `
import { setupProdMockServer } from '../src/mock/index';
setupProdMockServer();
`
})
];
};

1
package.json
View File

@ -80,6 +80,7 @@
"unplugin-auto-import": "^0.17.5",
"unplugin-vue-components": "^0.26.0",
"vite": "^5.2.0",
"vite-plugin-eslint": "^1.8.1",
"vite-plugin-html": "^3.2.2",
"vite-plugin-mock": "^2.9.6",
"vite-plugin-svg-icons": "^2.0.1",

39
pnpm-lock.yaml generated
View File

@ -119,7 +119,7 @@ importers:
version: 9.1.0(eslint@8.57.0)
eslint-plugin-prettier:
specifier: ^5.1.3
version: 5.1.3(eslint-config-prettier@9.1.0(eslint@8.57.0))(eslint@8.57.0)(prettier@3.2.5)
version: 5.1.3(@types/eslint@8.56.12)(eslint-config-prettier@9.1.0(eslint@8.57.0))(eslint@8.57.0)(prettier@3.2.5)
eslint-plugin-vue:
specifier: ^9.23.0
version: 9.23.0(eslint@8.57.0)
@ -168,6 +168,9 @@ importers:
vite:
specifier: ^5.2.0
version: 5.2.2(@types/node@20.11.30)(sass@1.72.0)(terser@5.29.2)
vite-plugin-eslint:
specifier: ^1.8.1
version: 1.8.1(eslint@8.57.0)(vite@5.2.2(@types/node@20.11.30)(sass@1.72.0)(terser@5.29.2))
vite-plugin-html:
specifier: ^3.2.2
version: 3.2.2(vite@5.2.2(@types/node@20.11.30)(sass@1.72.0)(terser@5.29.2))
@ -1058,6 +1061,9 @@ packages:
'@types/conventional-commits-parser@5.0.0':
resolution: {integrity: sha512-loB369iXNmAZglwWATL+WRe+CRMmmBPtpolYzIebFaX4YA3x+BEfLqhUAV9WanycKI3TG1IMr5bMJDajDKLlUQ==}
'@types/eslint@8.56.12':
resolution: {integrity: sha512-03ruubjWyOHlmljCVoxSuNDdmfZDzsrrz0P2LeJsOXr+ZwFQ+0yQIwNCwt/GYhV7Z31fgtXJTAEs+FYlEL851g==}
'@types/estree@0.0.39':
resolution: {integrity: sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==}
@ -3357,6 +3363,11 @@ packages:
resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
hasBin: true
rollup@2.79.2:
resolution: {integrity: sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ==}
engines: {node: '>=10.0.0'}
hasBin: true
rollup@4.13.0:
resolution: {integrity: sha512-3YegKemjoQnYKmsBlOHfMLVPPA5xLkQ8MHLLSw/fBrFaVkEayL51DilPpNNLq1exr98F2B1TzrV0FUlN3gWRPg==}
engines: {node: '>=18.0.0', npm: '>=8.0.0'}
@ -3781,6 +3792,12 @@ packages:
resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
engines: {node: '>= 0.8'}
vite-plugin-eslint@1.8.1:
resolution: {integrity: sha512-PqdMf3Y2fLO9FsNPmMX+//2BF5SF8nEWspZdgl4kSt7UvHDRHVVfHvxsD7ULYzZrJDGRxR81Nq7TOFgwMnUang==}
peerDependencies:
eslint: '>=7'
vite: '>=2'
vite-plugin-html@3.2.2:
resolution: {integrity: sha512-vb9C9kcdzcIo/Oc3CLZVS03dL5pDlOFuhGlZYDCJ840BhWl/0nGeZWf3Qy7NlOayscY4Cm/QRgULCQkEZige5Q==}
peerDependencies:
@ -4871,6 +4888,11 @@ snapshots:
dependencies:
'@types/node': 20.11.30
'@types/eslint@8.56.12':
dependencies:
'@types/estree': 1.0.5
'@types/json-schema': 7.0.15
'@types/estree@0.0.39': {}
'@types/estree@1.0.5': {}
@ -6053,13 +6075,14 @@ snapshots:
dependencies:
eslint: 8.57.0
eslint-plugin-prettier@5.1.3(eslint-config-prettier@9.1.0(eslint@8.57.0))(eslint@8.57.0)(prettier@3.2.5):
eslint-plugin-prettier@5.1.3(@types/eslint@8.56.12)(eslint-config-prettier@9.1.0(eslint@8.57.0))(eslint@8.57.0)(prettier@3.2.5):
dependencies:
eslint: 8.57.0
prettier: 3.2.5
prettier-linter-helpers: 1.0.0
synckit: 0.8.8
optionalDependencies:
'@types/eslint': 8.56.12
eslint-config-prettier: 9.1.0(eslint@8.57.0)
eslint-plugin-vue@9.23.0(eslint@8.57.0):
@ -7440,6 +7463,10 @@ snapshots:
dependencies:
glob: 7.2.3
rollup@2.79.2:
optionalDependencies:
fsevents: 2.3.3
rollup@4.13.0:
dependencies:
'@types/estree': 1.0.5
@ -7896,6 +7923,14 @@ snapshots:
vary@1.1.2: {}
vite-plugin-eslint@1.8.1(eslint@8.57.0)(vite@5.2.2(@types/node@20.11.30)(sass@1.72.0)(terser@5.29.2)):
dependencies:
'@rollup/pluginutils': 4.2.1
'@types/eslint': 8.56.12
eslint: 8.57.0
rollup: 2.79.2
vite: 5.2.2(@types/node@20.11.30)(sass@1.72.0)(terser@5.29.2)
vite-plugin-html@3.2.2(vite@5.2.2(@types/node@20.11.30)(sass@1.72.0)(terser@5.29.2)):
dependencies:
'@rollup/pluginutils': 4.2.1

10
src/typings/global.d.ts vendored
View File

@ -34,3 +34,13 @@ declare namespace TabsMenu {
title: string;
}
}
/* viteEnv */
interface ViteEnv {
VITE_GLOB_APP_TITLE: string;
VITE_IMG_BASE_URL: string;
VITE_APP_OPEN_MOCK: boolean | string;
VITE_USER_NODE_ENV: "development" | "production" | "test";
VITE_PUBLIC_PATH: string;
VITE_APP_BASE_URL: string;
}

6
tsconfig.json
View File

@ -35,9 +35,11 @@
"src/**/*.tsx",
"src/**/*.vue",
"src/auto-import.d.ts", // 与vite.config.ts-AutoImport-dts路径一致
"build/**/*.ts",
"build/**/*.d.ts",
"vite.config.ts"
], // 指定被编译文件所在的目录
// exclude表示要排除的、不编译的文件，它也可以指定一个列表，规则和include一样，可以是文件或文件夹，可以是相对路径或绝对路径，可以使用通配符
"exclude": ["node_modules", "dist", "**/*.js"], // 指定不需要被编译的目录
"references": [{ "path": "./tsconfig.node.json" }]
"exclude": ["node_modules", "dist", "**/*.js"] // 指定不需要被编译的目录
// "references": [{ "path": "./tsconfig.node.json" }]
}

72
vite.config.ts
View File

@ -1,15 +1,8 @@
import { defineConfig, normalizePath, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
import { resolve } from "path";
import postcssPresetEnv from "postcss-preset-env";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ArcoResolver } from "unplugin-vue-components/resolvers";
import { vitePluginForArco } from "@arco-plugins/vite-vue";
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
import { createHtmlPlugin } from "vite-plugin-html";
import { viteMockServe } from "vite-plugin-mock";
import { createVitePlugins } from "./build/vite-plugin";
const themePath = normalizePath(path.normalize("./src/style/global-theme.scss"));
// https://vitejs.dev/config/
@ -17,7 +10,7 @@ export default defineConfig(({ mode }) => {
// 根路径
const root = process.cwd();
// 获取跟路径对应的文件
const env = loadEnv(mode, root);
const env: any = loadEnv(mode, root);
return {
// 生产环境服务的公共基础路径-用于生出环境的代理的路径
base: env.VITE_PUBLIC_PATH,
@ -33,65 +26,8 @@ export default defineConfig(({ mode }) => {
}
}
},
plugins: [
vue(),
vitePluginForArco({
style: "css"
}),
createHtmlPlugin({
inject: {
data: {
title: env.VITE_GLOB_APP_TITLE
}
}
}),
createSvgIconsPlugin({
// 配置src下存放svg的路径，这里表示在src/assets/svgs文件夹下
iconDirs: [path.resolve(process.cwd(), "src/assets/svgs")],
symbolId: "icon-[dir]-[name]"
}),
AutoImport({
// 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
imports: ["vue", "vue-router"],
// arco组件的按需加载
resolvers: [ArcoResolver()],
// 解决eslint报错问题
eslintrc: {
// 这里先设置成true然后npm run dev 运行之后会生成 .eslintrc-auto-import.json 文件之后，在改为false
enabled: false,
filepath: "./.eslintrc-auto-import.json", // 生成的文件路径
globalsPropValue: true
},
// 配置文件生成位置
dts: "src/auto-import.d.ts"
}),
Components({
resolvers: [
// arco组件的按需加载
ArcoResolver({
sideEffect: true
})
],
// 自动加载组件的目录配置,默认的为 'src/components'
dirs: ["src/components"],
// 组件的有效文件扩展名
extensions: ["vue"],
// 配置文件生成位置
dts: "src/components.d.ts"
}),
viteMockServe({
mockPath: "./src/mock/", // 目录位置
logger: true, // 是否在控制台显示请求日志
supportTs: true, // 是否读取ts文件模块
localEnabled: env.VITE_APP_OPEN_MOCK === "true", // 设置是否启用本地mock文件
prodEnabled: env.VITE_APP_OPEN_MOCK === "true", // 设置打包是否启用mock功能
// 这样可以控制关闭mock的时候不让mock打包到最终代码内
injectCode: `
import { setupProdMockServer } from '../src/mock/index';
setupProdMockServer();
`
})
],
// 插件：路径build/vite-plugin
plugins: createVitePlugins(env),
resolve: {
// 配置别名-绝对路径
alias: {