feat: refactor env

kirklin · Aug 31, 2023 · bf8cdc7 · bf8cdc7 · vercel · Aug 31, 2023
1 parent 687f6bb
commit bf8cdc7
Show file tree

Hide file tree

Showing 8 changed files with 112 additions and 126 deletions.
diff --git a/playground/.env.development b/playground/.env.development
@@ -9,7 +9,7 @@ VITE_USE_PWA=true
 VITE_PUBLIC_PATH=/
 
 # Proxy settings for your development server (array of [string, string] pairs)
-VITE_PROXY=[["/api","http://localhost:8899"]]
+VITE_PROXY=[["/api","http://localhost:3000"]]
 
 # Basic interface address SPA
 VITE_GLOB_API_URL=/api

diff --git a/playground/src/utils/configureViteProxy.ts → playground/configureViteProxy.ts b/playground/src/utils/configureViteProxy.ts → playground/configureViteProxy.ts
diff --git a/playground/package.json b/playground/package.json
@@ -10,7 +10,7 @@
     "dev": "run-p dev:playground dev:mock",
     "dev:playground": "vite",
     "dev:mock": "pnpm --filter npm-name-explorer-api dev",
-    "build": "vite build",
+    "build": "pnpm cross-env NODE_ENV=production vite build",
     "typecheck": "vue-tsc --noEmit",
     "preview": "vite preview",
     "lint": "eslint .",
@@ -47,6 +47,7 @@
     "@vitest/coverage-c8": "^0.33.0",
     "@vue/compiler-dom": "^3.3.4",
     "@vue/test-utils": "^2.4.1",
+    "cross-env": "^7.0.3",
     "eslint": "^8.48.0",
     "husky": "^8.0.3",
     "jsdom": "^22.1.0",

diff --git a/playground/src/apis/check-npm-name.ts b/playground/src/apis/check-npm-name.ts
@@ -6,6 +6,6 @@ enum API {
 
 // Define functions to call the APIs
 export async function checkNpmName(packageName: string): Promise<boolean> {
-  const response = await axios.get(`/api${API.checkNpmName}/${packageName}`);
+  const response = await axios.get(`${API.checkNpmName}/${packageName}`);
   return response.data.exists;
 }
diff --git a/playground/src/utils/updateEnvVariables.ts → playground/updateEnvVariables.ts b/playground/src/utils/updateEnvVariables.ts → playground/updateEnvVariables.ts
@@ -1,5 +1,7 @@
 import process from "node:process";
 
+type Recordable<T = any> = Record<string, T>;
+
 export interface GlobEnvConfig extends ImportMetaEnv {
   BASE_URL: string;
   MODE: string;

diff --git a/playground/vite.config.ts b/playground/vite.config.ts
@@ -1,6 +1,6 @@
 import { resolve } from "node:path";
-import type { ProxyOptions } from "vite";
-import { defineConfig } from "vite";
+import process from "node:process";
+import { defineConfig, loadEnv } from "vite";
 import Vue from "@vitejs/plugin-vue";
 import Components from "unplugin-vue-components/vite";
 import AutoImport from "unplugin-auto-import/vite";
@@ -12,127 +12,110 @@ import VueDevTools from "vite-plugin-vue-devtools";
 // vite.config.ts
 import VueI18nPlugin from "@intlify/unplugin-vue-i18n/vite";
 import UnoCss from "unocss/vite";
-
-function configureProxy(proxyList: [string, string][] = []) {
-  // 创建一个空的代理对象
-  // Create an empty proxy object
-  const proxyConfig: Record<string, ProxyOptions> = {};
-  // 遍历代理列表中的每一对前缀和目标地址
-  // Iterate over each pair of prefix and target address in the proxy list
-  for (const [prefix, target] of proxyList) {
-    // 判断目标地址是否是https协议
-    // Determine if the target address is https protocol
-    const isHttps = /^https:\/\//.test(target);
-    // 根据前缀和目标地址设置代理选项，参考https://github.com/http-party/node-http-proxy#options
-    // Set proxy options according to prefix and target address, refer to https://github.com/http-party/node-http-proxy#options
-    proxyConfig[prefix] = {
-      target,
-      changeOrigin: true,
-      ws: true,
-      // 使用正则表达式替换路径中的前缀为空字符串，实现重写路径的功能
-      // Use regular expression to replace the prefix in the path with an empty string, to achieve the function of rewriting the path
-      rewrite: (path: string) => path.replace(new RegExp(`^${prefix}`), ""),
-      // 如果目标地址是https协议，需要设置secure为false，否则不需要设置该选项
-      // If the target address is https protocol, need to set secure to false, otherwise do not need to set this option
-      ...(isHttps ? { secure: false } : {}),
-    };
-  }
-  // 返回代理对象
-  // Return the proxy object
-  return proxyConfig;
-}
+import { updateEnvVariables } from "./updateEnvVariables";
+import { configureProxy } from "./configureViteProxy";
 
 // https://vitejs.dev/config/
-export default defineConfig({
-  server: {
-    host: "localhost",
-    port: 8888,
-    open: true,
-    https: false,
-    proxy: configureProxy([["/api", "https://npm-name-explorer-api.vercel.app/"]]),
-  },
-  plugins: [
-    Vue(
-      {
-        script: {
-          propsDestructure: true,
-          defineModel: true,
+export default defineConfig(async ({ mode }) => {
+  const root = process.cwd();
+  const env = loadEnv(mode, root);
+  const viteEnv = updateEnvVariables(env);
+  const {
+    VITE_PROXY,
+  } = viteEnv;
+  const pathResolve = (pathname: string) => resolve(root, ".", pathname);
+
+  return {
+    server: {
+      host: "localhost",
+      port: 8888,
+      open: true,
+      https: false,
+      proxy: configureProxy(VITE_PROXY),
+    },
+    plugins: [
+      Vue(
+        {
+          script: {
+            propsDestructure: true,
+            defineModel: true,
+          },
         },
-      },
-    ),
-    Icons({
-      scale: 1.5, // Scale of icons against 1em
-      defaultStyle: "", // Style apply to icons
-      defaultClass: "inline-block h-5 w-5 stroke-current md:h-6 md:w-6", // Class names apply to icons
-      compiler: "vue3", // "vue2", "vue3", "jsx"
-      jsx: "react", // "react" or "preact"
-      autoInstall: true,
-    }),
-    // https://github.com/antfu/unplugin-auto-import
-    AutoImport({
-      imports: [
-        "vue",
-        "vue-router",
-        "vue-i18n",
-        "vue/macros",
-        "@vueuse/head",
-        "@vueuse/core",
-      ],
-      dts: "types/auto-imports.d.ts",
-      dirs: [
-        "src/composables",
-        "src/store",
-      ],
-      vueTemplate: true,
-    }),
+      ),
+      Icons({
+        scale: 1.5, // Scale of icons against 1em
+        defaultStyle: "", // Style apply to icons
+        defaultClass: "inline-block h-5 w-5 stroke-current md:h-6 md:w-6", // Class names apply to icons
+        compiler: "vue3", // "vue2", "vue3", "jsx"
+        jsx: "react", // "react" or "preact"
+        autoInstall: true,
+      }),
+      // https://github.com/antfu/unplugin-auto-import
+      AutoImport({
+        imports: [
+          "vue",
+          "vue-router",
+          "vue-i18n",
+          "vue/macros",
+          "@vueuse/head",
+          "@vueuse/core",
+        ],
+        dts: "types/auto-imports.d.ts",
+        dirs: [
+          "src/composables",
+          "src/store",
+        ],
+        vueTemplate: true,
+      }),
 
-    // https://github.com/antfu/unplugin-vue-components
-    Components({
-      extensions: ["vue"],
-      include: [/\.vue$/, /\.vue\?vue/],
-      dts: "types/components.d.ts",
-      exclude: [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]\.nuxt[\\/]/],
-      resolvers: [
-        IconsResolver(),
-      ],
-    }),
+      // https://github.com/antfu/unplugin-vue-components
+      Components({
+        extensions: ["vue"],
+        include: [/\.vue$/, /\.vue\?vue/],
+        dts: "types/components.d.ts",
+        exclude: [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]\.nuxt[\\/]/],
+        resolvers: [
+          IconsResolver(),
+        ],
+      }),
 
-    // https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n
-    VueI18nPlugin({
-      runtimeOnly: true,
-      compositionOnly: true,
-      fullInstall: true,
-      include: [resolve(__dirname, "src/locales/**")],
-    }),
+      // https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n
+      VueI18nPlugin({
+        runtimeOnly: true,
+        compositionOnly: true,
+        fullInstall: true,
+        include: [resolve(__dirname, "src/locales/**")],
+      }),
 
-    // https://github.com/antfu/vite-plugin-inspect
-    // Visit http://localhost:3333/__inspect/ to see the inspector
-    Inspect(),
+      // https://github.com/antfu/vite-plugin-inspect
+      // Visit http://localhost:3333/__inspect/ to see the inspector
+      Inspect(),
 
-    // https://github.com/webfansplz/vite-plugin-vue-devtools
-    VueDevTools(),
+      // https://github.com/webfansplz/vite-plugin-vue-devtools
+      VueDevTools(),
 
-    // https://github.com/unocss/unocss
-    // see unocss.config.ts for config
-    UnoCss(),
-  ],
-  resolve: {
-    alias: {
-      "~/": `${resolve(__dirname, "src")}/`,
+      // https://github.com/unocss/unocss
+      // see unocss.config.ts for config
+      UnoCss(),
+    ],
+    resolve: {
+      alias: {
+        "~/": `${pathResolve("src")}/`,
+      },
     },
-  },
-  css: {
-    preprocessorOptions: {
-      scss: {
-        additionalData: `
+    css: {
+      preprocessorOptions: {
+        scss: {
+          additionalData: `
       @import "~/styles/variables.scss";
     `,
-        javascriptEnabled: true,
+          javascriptEnabled: true,
+        },
       },
     },
-  },
-  // https://github.com/vitest-dev/vitest
-  test: {
-    environment: "jsdom",
-  },
+    // https://github.com/vitest-dev/vitest
+    test: {
+      environment: "jsdom",
+    },
+  };
 });
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/services/package.json b/services/package.json
@@ -3,7 +3,7 @@
   "type": "module",
   "version": "0.0.1",
   "scripts": {
-    "dev": "cross-env PORT=8899 nitro dev",
+    "dev": "cross-env PORT=3000 nitro dev",
     "build": "nitro build",
     "preview": "node .output/server/index.mjs"
   },