vite.config.ts

import { defineConfig, loadEnv } from "vite"
import vue from "@vitejs/plugin-vue"
import livereload from "rollup-plugin-livereload"
import minimist from "minimist"
import fg from "fast-glob"
import { createHtmlPlugin } from "vite-plugin-html"
import path from "path"
import AutoImport from "unplugin-auto-import/vite"
import Components from "unplugin-vue-components/vite"
import { ElementPlusResolver } from "unplugin-vue-components/resolvers"
import { nodePolyfills } from "vite-plugin-node-polyfills"
import Icons from "unplugin-icons/vite"

// methods start
const getAppBase = (isSiyuanBuild: boolean, isWidgetBuild: boolean, isNginxBuild): string => {
  if (isSiyuanBuild) {
    return "/plugins/siyuan-plugin-publisher/"
  } else if (isWidgetBuild) {
    return "/widgets/sy-post-publisher/"
  } else if (isNginxBuild) {
    return "/"
  } else {
    return "/"
  }
}

const getDefineEnv = (isDevMode: boolean) => {
  const mode = process.env.NODE_ENV
  const isTest = mode === "test"
  console.log("isServe=>", isServe)
  console.log("mode=>", mode)

  const defaultEnv = {
    DEV_MODE: `${isDevMode || isTest}`,
    APP_BASE: `${appBase}`,
    NODE_ENV: "development",
    VITE_DEFAULT_TYPE: `siyuan`,
  }
  const env = loadEnv(mode, process.cwd())
  const processEnvValues = {
    "process.env": Object.entries(env).reduce((prev, [key, val]) => {
      return {
        ...prev,
        [key]: val,
      }
    }, defaultEnv),
  }
  const defineEnv = {
    ...processEnvValues,
    ...{},
  }
  console.log("defineEnv=>", defineEnv)

  return defineEnv
}
// methods end

// config
const args = minimist(process.argv.slice(2))
// &#24320;&#21551;&#20043;&#21518;&#21487;&#20197;&#21516;eruda&#25509;&#31649;&#26085;&#24535;
const isServe = process.env.IS_SERVE
const isWatch = args.watch || args.w || false
const isDev = isServe || isWatch
const outDir = args.o || args.outDir

const buildType = process.env.BUILD_TYPE
const isSiyuanBuild = process.env.BUILD_TYPE === "siyuan"
const isWidgetBuild = process.env.BUILD_TYPE === "widget"
const isNginxBuild = process.env.BUILD_TYPE === "nginx"
const distDir = outDir || (isWidgetBuild ? "widget" : "./dist")
const appBase = getAppBase(isSiyuanBuild, isWidgetBuild, isNginxBuild)

console.log("isWatch=>", isWatch)
console.log("isDev=>", isDev)
console.log("distDir=>", distDir)
console.log("buildType=>", buildType)

// https://github.com/vuejs/vue-cli/issues/1198
// https://vitejs.dev/config/
// https://github.com/intlify/vue-i18n-next/issues/543
export default defineConfig(() => ({
  plugins: [
    vue(),

    Icons({
      autoInstall: true,
    }),

    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),

    createHtmlPlugin({
      minify: !isDev,
      inject: {
        // &#22312; body &#26631;&#31614;&#24213;&#37096;&#25554;&#20837;&#25351;&#23450;&#30340; JavaScript &#25991;&#20214;
        tags: isDev
          ? [
              // {
              //   tag: "script",
              //   attrs: {
              //     src: "./libs/eruda/eruda.js",
              //   },
              //   injectTo: "head-prepend",
              // },
              {
                tag: "script",
                attrs: {
                  async: true,
                  src: "./libs/lute/lute-1.7.5-20230410.min.js",
                },
                injectTo: "head",
              },
              {
                tag: "script",
                attrs: {
                  async: true,
                  src: "./libs/alioss/aliyun-oss-sdk-6.16.0.min.js",
                },
                injectTo: "head",
              },
            ]
          : [
              {
                tag: "script",
                attrs: {
                  async: true,
                  src: "./libs/lute/lute-1.7.5-20230410.min.js",
                },
                injectTo: "head",
              },
              {
                tag: "script",
                attrs: {
                  async: true,
                  src: "./libs/alioss/aliyun-oss-sdk-6.16.0.min.js",
                },
                injectTo: "head",
              },
            ],
        // data: {
        //   title: "eruda",
        //   injectScript: isDev ? `<script>eruda.init();</script>` : "",
        // },
      },
    }),

    {
      name: "add-query-param",
      transformIndexHtml(html) {
        const timestamp = Date.now()
        html = html.replace(/(<script.+src=")([^"]+\.js)"/g, `$1$2?v=${timestamp}"`)
        html = html.replace(/(<link[^>]+href=")([^"]+(\.css|\.js))"/g, (match, p1, p2) => `${p1}${p2}?v=${timestamp}"`)
        // html = html.replace(/(<link rel=")modulepreload(" crossorigin href=")([^"]+\.js)"/g, `$1preload$2$3?v=${timestamp}"`);
        html = html.replace(
          /(<link rel=")modulepreload(" crossorigin href=")([^"]+\.js)"/g,
          `$1preload$2$3?v=${timestamp}" as="script"`
        )
        html = html.replace(/(<link[^>]+href=")([^"]+(\.css))"/g, (match, p1, p2) => `${p1}${p2}?v=${timestamp}"`)
        html = html.replace(/(<link[^>]+href=")([^"]+\.svg)"/g, `$1$2?v=${timestamp}"`)
        html = html.replace(/(<img[^>]+src=")([^"]+\.(jpe?g|gif|webp|bmp|png))"/g, `$1$2?v=${timestamp}"`)
        return html
      },
    },

    // &#22312;&#27983;&#35272;&#22120;&#20013;polyfill node
    // https://github.com/davidmyersdev/vite-plugin-node-polyfills/blob/main/test/src/main.ts
    nodePolyfills({
      exclude: [],
      globals: {
        // can also be 'build', 'dev', or false
        Buffer: true,
        global: true,
        process: true,
      },
      protocolImports: true,
    }),
  ],

  base: "",

  // https://github.com/vitejs/vite/issues/1930
  // https://vitejs.dev/guide/env-and-mode.html#env-files
  // https://github.com/vitejs/vite/discussions/3058#discussioncomment-2115319
  // &#22312;&#36825;&#37324;&#33258;&#23450;&#20041;&#21464;&#37327;
  define: getDefineEnv(isDev),

  resolve: {
    alias: {
      "~": path.resolve(__dirname, "./"),
    },
  },

  build: {
    // &#36755;&#20986;&#36335;&#24452;
    outDir: distDir,
    emptyOutDir: false,

    // &#26500;&#24314;&#21518;&#26159;&#21542;&#29983;&#25104; source map &#25991;&#20214;
    sourcemap: false,

    // &#35774;&#32622;&#20026; false &#21487;&#20197;&#31105;&#29992;&#26368;&#23567;&#21270;&#28151;&#28102;
    // &#25110;&#26159;&#29992;&#26469;&#25351;&#23450;&#26159;&#24212;&#29992;&#21738;&#31181;&#28151;&#28102;&#22120;
    // boolean | 'terser' | 'esbuild'
    // &#19981;&#21387;&#32553;&#65292;&#29992;&#20110;&#35843;&#35797;
    minify: !isDev,

    rollupOptions: {
      plugins: [
        ...(isWatch
          ? [
              livereload(distDir),
              {
                //&#30417;&#21548;&#38745;&#24577;&#36164;&#28304;&#25991;&#20214;
                name: "watch-external",
                async buildStart() {
                  const files = await fg(["src/assets/*", "./README*.md", "./widget.json"])
                  for (const file of files) {
                    this.addWatchFile(file)
                  }
                },
              },
            ]
          : []),
      ],

      // make sure to externalize deps that shouldn't be bundled into your library
      external: [],

      output: {
        // add a query parameter to all JS and CSS file URLs
        chunkFileNames: "chunks/chunk.[name].js",
        entryFileNames: "entry.[name].js",
        assetFileNames: "assets/[name].[ext]",
        manualChunks(id) {
          if (id.includes("node_modules")) {
            let arr = id.toString().split("node_modules/")[1].split("/")
            // pnpm&#21333;&#29420;&#22788;&#29702;
            if (id.includes(".pnpm")) {
              arr = id.toString().split(".pnpm/")[1].split("/")
            }
            const dep = arr[0].split("@")[0].replace(/\./g, "-")
            // console.log("id=>", id)
            // console.log("dep=>", dep)
            if (dep !== "") {
              return "vendor_" + dep
            }
            return "vendor"
          }
        },
      },
    },
  },

  test: {
    globals: true,
    environment: "jsdom",
    // environment: "node",
    // environment: "happy-dom",
    setupFiles: ["./src/setup.ts"],
    include: [
      "src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}",
      "common/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}",
    ],
    server: {
      deps: {
        inline: ["element-plus"],
      },
    },
  },
}))