chore(projects): 增加jsx支持和构建compress

.env.production

@@ -0,0 +1,5 @@
+# 是否开启压缩资源
+VITE_COMPRESS_OPEN=N
+
+# gzip | brotliCompress | deflate | deflateRaw
+VITE_COMPRESS_TYPE=gzip

build/config/proxy.ts

@@ -23,12 +23,16 @@ const serviceEnv = {
   },
 };
 
-export function createViteProxy(env) {
+/**
+ * @description: 生成vite代理字段
+ * @param {*} viteEnv - 环境变量配置
+ */
+export function createViteProxy(viteEnv) {
   //判断是否需要开启代理
-  const isOpenProxy = env.VITE_HTTP_PROXY === 'Y';
+  const isOpenProxy = viteEnv.VITE_HTTP_PROXY === 'Y';
   if (!isOpenProxy) return undefined;
 
   // 返回对应代理
-  const { VITE_SERVICE_ENV = 'dev' } = env;
+  const { VITE_SERVICE_ENV = 'dev' } = viteEnv;
   return serviceEnv[VITE_SERVICE_ENV];
 }

build/index.ts

@@ -1 +1,3 @@
 export * from './config';
+export * from './plugins';
+// export * from './utils';

build/plugins/compress.ts

@@ -0,0 +1,10 @@
+import viteCompression from 'vite-plugin-compression'; //https://github.com/vbenjs/vite-plugin-compression/blob/main/README.zh_CN.md
+
+export default (viteEnv) => {
+  // 默认使用gzip压缩
+  const { VITE_COMPRESS_TYPE = 'gzip' } = viteEnv;
+
+  return viteCompression({
+    algorithm: VITE_COMPRESS_TYPE, // 压缩算法
+  });
+};

build/plugins/index.ts

@@ -0,0 +1,17 @@
+import vue from './vue';
+import compress from './compress';
+
+/**
+ * @description: 设置vite插件配置
+ * @param {*} viteEnv - 环境变量配置
+ * @return {*}
+ */
+export function setVitePlugins(viteEnv) {
+  const plugins = [...vue];
+
+  if (viteEnv.VITE_COMPRESS_OPEN === 'Y') {
+    plugins.push(compress(viteEnv));
+  }
+
+  return plugins;
+}

build/plugins/vue.ts

@@ -0,0 +1,6 @@
+import vue from '@vitejs/plugin-vue';
+import vueJsx from '@vitejs/plugin-vue-jsx'; // https://github.com/vitejs/vite/tree/main/packages/plugin-vue-jsx
+
+const plugins = [vue(), vueJsx()];
+
+export default plugins;

package.json

@@ -32,6 +32,7 @@
     "@typescript-eslint/eslint-plugin": "^5.32.0",
     "@typescript-eslint/parser": "^5.32.0",
     "@vitejs/plugin-vue": "^3.0.0",
+    "@vitejs/plugin-vue-jsx": "^2.0.0",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^11.0.0",
     "commitizen": "^4.2.5",
@@ -49,6 +50,7 @@
     "prettier": "^2.7.1",
     "typescript": "^4.6.4",
     "vite": "^3.0.0",
+    "vite-plugin-compression": "^0.5.1",
     "vue-tsc": "^0.38.4"
   }
 }

tsconfig.json

@@ -11,7 +11,11 @@
     "isolatedModules": true,
     "esModuleInterop": true,
     "lib": ["ESNext", "DOM"],
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "paths": {
+      "~/*": ["./*"],
+      "@/*": ["./src/*"]
+    }
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
 }

vite.config.ts

@@ -1,6 +1,5 @@
 import { defineConfig, loadEnv, ConfigEnv } from 'vite';
-import { createViteProxy } from './build';
+import { createViteProxy, setVitePlugins } from './build';
-import vue from '@vitejs/plugin-vue';
 import { resolve } from 'path';
 
 // 当前执行node命令时文件夹的地址（工作目录）
@@ -13,10 +12,11 @@ export default defineConfig(({ command, mode }: ConfigEnv) => {
 
   // 根据当前工作目录中的 `mode` 加载 .env 文件
   // 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。
-  const env = loadEnv(mode, process.cwd(), '');
+  const viteEnv = loadEnv(mode, process.cwd(), '');
+
   return {
-    base: env.VITE_BASE_URL,
+    base: viteEnv.VITE_BASE_URL,
-    plugins: [vue()],
+    plugins: setVitePlugins(viteEnv),
     resolve: {
       alias: {
         '~': rootPath,
@@ -27,7 +27,7 @@ export default defineConfig(({ command, mode }: ConfigEnv) => {
       host: '0.0.0.0',
       port: 5200,
       open: false,
-      proxy: createViteProxy(env),
+      proxy: createViteProxy(viteEnv),
     },
     preview: {
       port: 5211,