chore: support launch editor in development (#978)

* chore: support launch editor in development

* fix: wxt prepare error

Author: zeevenn

CONTRIBUTING.md

@@ -92,6 +92,15 @@ pnpm web dev
 
 6. 在 GitHub 页面发起 **Pull Request**。
 
+> [!TIP]
+> 开发时可在 `apps/web` 目录下新建 `.env.local` 文件，配置 `VITE_LAUNCH_EDITOR` 为 `code` （默认值）或其他 [支持的编辑器](https://github.com/yyx990803/launch-editor?tab=readme-ov-file#supported-editors)，方便调试。
+>
+> 例如：
+>
+> ```
+> VITE_LAUNCH_EDITOR=cursor
+> ```
+
 ## 代码规范
 
 - 遵循项目自带的 **ESLint**、**Prettier** 与 **Stylelint** 配置。

apps/web/vite.config.ts

@@ -6,101 +6,107 @@ import vue from '@vitejs/plugin-vue'
 import { visualizer } from 'rollup-plugin-visualizer'
 import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import { nodePolyfills } from 'vite-plugin-node-polyfills'
 import { VitePWA } from 'vite-plugin-pwa'
 import { VitePluginRadar } from 'vite-plugin-radar'
 import vueDevTools from 'vite-plugin-vue-devtools'
 
 const base = process.env.SERVER_ENV === `NETLIFY` ? `/` : `/md/`
 
-export default defineConfig({
-  base,
-  define: { process },
-  envPrefix: [`VITE_`, `CF_`],
-  plugins: [
-    vue(),
-    tailwindcss(),
-    vueDevTools(),
-    VitePWA({
-      registerType: `autoUpdate`,
-      includeAssets: [`favicon.ico`],
-      manifest: {
-        name: `@doocs-md`,
-        short_name: `@doocs-md`,
-        theme_color: `#ffffff`,
-        icons: [
-          {
-            src: `${base}pwa-192x192.png`,
-            sizes: `192x192`,
-            type: `image/png`,
-          },
-          {
-            src: `${base}pwa-512x512.png`,
-            sizes: `512x512`,
-            type: `image/png`,
-          },
-          {
-            src: `${base}pwa-512x512.png`,
-            sizes: `512x512`,
-            type: `image/png`,
-            purpose: `any maskable`,
-          },
-        ],
-      },
-      workbox: {
-        maximumFileSizeToCacheInBytes: 6 * 1024 * 1024,
-      },
-      devOptions: {
-        enabled: true,
-      },
-    }),
-    nodePolyfills({
-      include: [`path`, `util`, `timers`, `stream`, `fs`],
-      overrides: {
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd())
+
+  return {
+    base,
+    define: { process },
+    envPrefix: [`VITE_`, `CF_`],
+    plugins: [
+      vue(),
+      tailwindcss(),
+      vueDevTools({
+        launchEditor: env.VITE_LAUNCH_EDITOR ?? `code`,
+      }),
+      VitePWA({
+        registerType: `autoUpdate`,
+        includeAssets: [`favicon.ico`],
+        manifest: {
+          name: `@doocs-md`,
+          short_name: `@doocs-md`,
+          theme_color: `#ffffff`,
+          icons: [
+            {
+              src: `${base}pwa-192x192.png`,
+              sizes: `192x192`,
+              type: `image/png`,
+            },
+            {
+              src: `${base}pwa-512x512.png`,
+              sizes: `512x512`,
+              type: `image/png`,
+            },
+            {
+              src: `${base}pwa-512x512.png`,
+              sizes: `512x512`,
+              type: `image/png`,
+              purpose: `any maskable`,
+            },
+          ],
+        },
+        workbox: {
+          maximumFileSizeToCacheInBytes: 6 * 1024 * 1024,
+        },
+        devOptions: {
+          enabled: true,
+        },
+      }),
+      nodePolyfills({
+        include: [`path`, `util`, `timers`, `stream`, `fs`],
+        overrides: {
         // Since `fs` is not supported in browsers, we can use the `memfs` package to polyfill it.
         // fs: 'memfs',
-      },
-    }),
-    VitePluginRadar({
-      analytics: { id: `G-7NZL3PZ0NK` },
-    }),
-    process.env.ANALYZE === `true`
-    && visualizer({ emitFile: true, filename: `stats.html` }),
-    AutoImport({
-      imports: [`vue`, `pinia`, `@vueuse/core`],
-      dirs: [`./src/stores`, `./src/utils/toast`, `./src/composables`],
-    }),
-    Components({
-      resolvers: [],
-    }),
-  ],
-  resolve: {
-    alias: { '@': path.resolve(__dirname, `./src`) },
-  },
-  css: { devSourcemap: true },
-  build: {
-    rollupOptions: {
-      output: {
-        chunkFileNames: `static/js/md-[name]-[hash].js`,
-        entryFileNames: `static/js/md-[name]-[hash].js`,
-        assetFileNames: `static/[ext]/md-[name]-[hash].[ext]`,
-        manualChunks(id) {
-          if (id.includes(`node_modules`)) {
-            if (id.includes(`katex`))
-              return `katex`
-            if (id.includes(`mermaid`))
-              return `mermaid`
-            if (id.includes(`highlight.js`))
-              return `hljs`
-            const pkg = id
-              .split(`node_modules/`)[1]
-              .split(`/`)[0]
-              .replace(`@`, `npm_`)
-            return `vendor_${pkg}`
-          }
+        },
+      }),
+      VitePluginRadar({
+        analytics: { id: `G-7NZL3PZ0NK` },
+      }),
+      process.env.ANALYZE === `true`
+      && visualizer({ emitFile: true, filename: `stats.html` }),
+      AutoImport({
+        imports: [`vue`, `pinia`, `@vueuse/core`],
+        dirs: [`./src/stores`, `./src/utils/toast`, `./src/composables`],
+      }),
+      Components({
+        resolvers: [],
+      }),
+    ],
+    resolve: {
+      alias: { '@': path.resolve(__dirname, `./src`) },
+    },
+    css: { devSourcemap: true },
+    build: {
+      rollupOptions: {
+        output: {
+          chunkFileNames: `static/js/md-[name]-[hash].js`,
+          entryFileNames: `static/js/md-[name]-[hash].js`,
+          assetFileNames: `static/[ext]/md-[name]-[hash].[ext]`,
+          manualChunks(id) {
+            if (id.includes(`node_modules`)) {
+              if (id.includes(`katex`))
+                return `katex`
+              if (id.includes(`mermaid`))
+                return `mermaid`
+              if (id.includes(`highlight.js`))
+                return `hljs`
+              const pkg = id
+                .split(`node_modules/`)[1]
+                .split(`/`)[0]
+                .replace(`@`, `npm_`)
+              return `vendor_${pkg}`
+            }
+          },
         },
       },
     },
-  },
+  }
 })

apps/web/wxt.config.ts

@@ -1,3 +1,4 @@
+import type { ConfigEnv } from 'vite'
 import { defineConfig } from 'wxt'
 import ViteConfig from './vite.config'
 
@@ -62,15 +63,19 @@ export default defineConfig({
   analysis: {
     open: true,
   },
-  vite: () => ({
-    ...ViteConfig,
-    plugins: ViteConfig.plugins!.filter(plugin =>
-      typeof plugin === `object`
-      && plugin !== null
-      && !(`name` in plugin && plugin.name === `vite-plugin-Radar`),
-    ),
-    define: undefined,
-    build: undefined,
-    base: `/`,
-  }),
+  vite: ({ mode }) => {
+    const config = ViteConfig({ mode } as ConfigEnv)
+
+    return {
+      ...config,
+      plugins: config.plugins!.filter(plugin =>
+        typeof plugin === `object`
+        && plugin !== null
+        && !(`name` in plugin && plugin.name === `vite-plugin-Radar`),
+      ),
+      define: undefined,
+      build: undefined,
+      base: `/`,
+    }
+  },
 })