从webpack迁移到vite

2023-08-07 18:49:14 +08:00
parent 31e16a7ed7
commit 028bf5919d
166 changed files with 3071 additions and 11869 deletions
@@ -0,0 +1,77 @@
+import path from 'node:path'
+import type { UserConfig } from 'vite'
+import { builtinModules } from 'node:module'
+
+const isProd = process.env.NODE_ENV == 'production'
+
+const rootPath = path.join(__dirname, '../../../')
+
+
+const config: UserConfig = {
+  mode: process.env.NODE_ENV == 'production' ? 'production' : 'development',
+  root: path.join(rootPath, 'src/main'),
+  base: './',
+  publicDir: false,
+  logLevel: 'warn',
+  resolve: {
+    alias: {
+      '@root': path.join(rootPath, 'src'),
+      '@common': path.join(rootPath, 'src/common'),
+      '@static': path.join(__dirname, 'src/static'),
+      '@main': path.join(rootPath, 'src/main'),
+    },
+    browserField: false,
+  },
+  build: {
+    lib: {
+      entry: `${isProd ? 'index.ts' : 'index-dev.ts'}`,
+      formats: ['cjs'],
+      fileName: 'main',
+    },
+    outDir: path.join(rootPath, 'dist/main'),
+    emptyOutDir: true,
+    reportCompressedSize: false,
+    modulePreload: false,
+    // assetsDir: 'chunks',
+    minify: false,
+    watch: {
+      buildDelay: 500,
+    },
+    commonjsOptions: {
+      dynamicRequireTargets: ['*.js'],
+      ignoreDynamicRequires: true,
+    },
+    rollupOptions: {
+      external: [
+        'electron',
+        'better-sqlite3',
+        'font-list',
+        'electron-font-manager',
+        ...builtinModules.flatMap(m => [m, `node:${m}`]),
+      ],
+      input: {
+        main: `src/main/${isProd ? 'index.ts' : 'index-dev.ts'}`,
+        'dbService.worker': 'src/main/worker/dbService/index.ts',
+      },
+      output: {
+        entryFileNames: '[name].js',
+        chunkFileNames: '[name].js',
+        format: 'cjs',
+        // manualChunks(id, info) {
+        // //   return 'main'
+        // },
+        experimentalMinChunkSize: 50_000,
+      },
+      logLevel: 'warn',
+    },
+  },
+  define: {
+    'process.env.NODE_ENV': `"${process.env.NODE_ENV as string}"`,
+    __STATIC_PATH__: `"${path.join(rootPath, 'src/static').replace(/\\/g, '\\\\')}"`,
+    __USER_API_PATH__: `"${path.join(rootPath, 'src/main/modules/userApi').replace(/\\/g, '\\\\')}"`,
+    __QRC_DECODE_NODE_PATH__: `"${(isProd ? '../../build/Release' : path.join(rootPath, 'build/Release')).replace(/\\/g, '\\\\')}"`,
+  },
+  cacheDir: path.join(rootPath, 'node_modules/.vite/main'),
+}
+
+export default config
@@ -0,0 +1,28 @@
+// const autoprefixer = require('autoprefixer')
+const pxtorem = require('postcss-pxtorem')
+
+module.exports = {
+  plugins: [
+    pxtorem({
+      rootValue: 16,
+      unitPrecision: 5,
+      propList: [
+        'font', 'font-size',
+        'letter-spacing',
+        'padding', 'margin',
+        'padding-*', 'margin-*',
+        'height', 'width',
+        '*-height', '*-width',
+        'flex', '::-webkit-scrollbar',
+        'top', 'left', 'bottom', 'right',
+        'border-radius', 'gap',
+      ],
+      selectorBlackList: ['html', 'ignore-to-rem'],
+      replace: true,
+      mediaQuery: false,
+      minPixelValue: 0,
+      exclude: [/node_modules/i],
+    }),
+    // autoprefixer(),
+  ],
+}
@@ -0,0 +1,74 @@
+import path from 'node:path'
+import type { UserConfig } from 'vite'
+import { builtinModules } from 'node:module'
+import vue from '@vitejs/plugin-vue'
+import renderer from 'vite-plugin-electron-renderer'
+import postcssConfig from './postcss.config'
+
+// const isProd = process.env.NODE_ENV == 'production'
+const rootPath = path.join(__dirname, '../../../')
+
+const external = ['electron', ...builtinModules.flatMap(m => [m, `node:${m}`])]
+
+const config: UserConfig = {
+  mode: process.env.NODE_ENV == 'production' ? 'production' : 'development',
+  root: path.join(rootPath, 'src/renderer-lyric'),
+  base: './',
+  publicDir: false,
+  logLevel: 'warn',
+  resolve: {
+    alias: {
+      '@root': path.join(rootPath, 'src'),
+      '@common': path.join(rootPath, 'src/common'),
+      '@static': path.join(__dirname, 'src/static'),
+      '@lyric': path.join(rootPath, 'src/renderer-lyric'),
+    },
+    browserField: true,
+  },
+  plugins: [vue(), renderer()],
+  build: {
+    target: 'esnext',
+    outDir: path.join(rootPath, 'dist/renderer-lyric'),
+    modulePreload: false,
+    emptyOutDir: true,
+    reportCompressedSize: false,
+    assetsDir: './',
+    // assetsDir: 'chunks',
+    minify: false,
+    watch: {
+      buildDelay: 500,
+    },
+    rollupOptions: {
+      external,
+      input: {
+        'renderer-lyric': 'src/renderer-lyric/index.html',
+      },
+      output: {
+        entryFileNames: '[name].js',
+        format: 'cjs',
+        // manualChunks(id, info) {
+        //   return 'renderer'
+        // },
+        experimentalMinChunkSize: 50_000,
+      },
+      logLevel: 'warn',
+    },
+  },
+  css: {
+    postcss: postcssConfig,
+  },
+  optimizeDeps: {
+    include: [],
+  },
+  define: {
+    'process.env.NODE_ENV': `"${process.env.NODE_ENV as string}"`,
+    'process.env.ELECTRON_DISABLE_SECURITY_WARNINGS': 'true',
+    __STATIC_PATH__: `"${path.join(rootPath, 'src/static').replace(/\\/g, '\\\\')}"`,
+  },
+  server: {
+    port: 9081,
+  },
+  cacheDir: path.join(rootPath, 'node_modules/.vite/renderer-lyric'),
+}
+
+export default config
@@ -0,0 +1,61 @@
+import path from 'node:path'
+import type { UserConfig } from 'vite'
+import { builtinModules } from 'node:module'
+
+// const isProd = process.env.NODE_ENV == 'production'
+const rootPath = path.join(__dirname, '../../../')
+
+const config: UserConfig = {
+  mode: process.env.NODE_ENV,
+  root: path.join(rootPath, 'src/main'),
+  base: './',
+  publicDir: false,
+  logLevel: 'warn',
+  resolve: {
+    alias: {
+      '@root': path.join(rootPath, 'src'),
+      '@common': path.join(rootPath, 'src/common'),
+      '@static': path.join(__dirname, 'src/static'),
+    },
+    browserField: true,
+  },
+  build: {
+    lib: {
+      entry: 'modules/userApi/renderer/preload.js',
+      formats: ['cjs'],
+      fileName: 'user-api-preload',
+    },
+    outDir: path.join(rootPath, 'dist/preload'),
+    modulePreload: {
+      polyfill: false,
+    },
+    emptyOutDir: true,
+    reportCompressedSize: false,
+    // assetsDir: 'chunks',
+    minify: false,
+    watch: {
+      buildDelay: 500,
+    },
+    rollupOptions: {
+      external: ['electron', ...builtinModules.flatMap(m => [m, `node:${m}`])],
+      input: {
+        'user-api-preload': 'src/main/modules/userApi/renderer/preload.js',
+      },
+      output: {
+        entryFileNames: '[name].js',
+        // manualChunks(id, info) {
+        // //   return 'main'
+        // },
+        experimentalMinChunkSize: 50_000,
+      },
+      logLevel: 'warn',
+    },
+  },
+  define: {
+    'process.env.NODE_ENV': `"${process.env.NODE_ENV as string}"`,
+    __STATIC_PATH__: `"${path.join(rootPath, 'src/static').replace(/\\/g, '\\\\')}"`,
+  },
+  cacheDir: path.join(rootPath, 'node_modules/.vite/scripts'),
+}
+
+export default config
@@ -0,0 +1,105 @@
+import path from 'node:path'
+import type { UserConfig } from 'vite'
+import { builtinModules } from 'node:module'
+import vue from '@vitejs/plugin-vue'
+import renderer from 'vite-plugin-electron-renderer'
+import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
+import postcssConfig from './postcss.config'
+
+const isProd = process.env.NODE_ENV == 'production'
+const rootPath = path.join(__dirname, '../../../')
+
+const external = ['electron', ...builtinModules.flatMap(m => [m, `node:${m}`])]
+
+const config: UserConfig = {
+  mode: process.env.NODE_ENV == 'production' ? 'production' : 'development',
+  root: path.join(rootPath, 'src/renderer'),
+  base: './',
+  publicDir: isProd ? false : path.join(rootPath, 'src/common/theme'),
+  logLevel: 'warn',
+  resolve: {
+    alias: {
+      '@root': path.join(rootPath, 'src'),
+      '@common': path.join(rootPath, 'src/common'),
+      '@static': path.join(__dirname, 'src/static'),
+      '@renderer': path.join(rootPath, 'src/renderer'),
+    },
+    browserField: true,
+  },
+  plugins: [
+    vue(),
+    renderer(),
+    createSvgIconsPlugin({
+      iconDirs: [path.join(rootPath, 'src/renderer/assets/svgs')],
+    }),
+  ],
+  build: {
+    target: 'esnext',
+    outDir: path.join(rootPath, 'dist/renderer'),
+    modulePreload: false,
+    emptyOutDir: true,
+    reportCompressedSize: false,
+    // assetsDir: 'chunks',
+    assetsDir: './',
+    minify: false,
+    watch: {
+      buildDelay: 500,
+    },
+    rollupOptions: {
+      external,
+      input: {
+        renderer: 'src/renderer/index.html',
+      },
+      output: {
+        entryFileNames: '[name].js',
+        format: 'cjs',
+        experimentalMinChunkSize: 50_000,
+        // manualChunks: {
+        //   'iconv-lite': ['iconv-lite'],
+        // },
+      },
+      logLevel: 'warn',
+    },
+    commonjsOptions: {
+      include: [
+        /vendors/,
+        /node_modules/,
+        /utils\/musicMeta/,
+      ],
+    },
+  },
+  css: {
+    postcss: postcssConfig,
+  },
+  optimizeDeps: {
+  //   // exclude: [],
+    include: [
+      '@common/utils/musicMeta',
+      '@renderer/utils/musicSdk/kg/vendors/infSign.min',
+    ],
+  },
+  define: {
+    'process.env.NODE_ENV': `"${process.env.NODE_ENV as string}"`,
+    'process.env.ELECTRON_DISABLE_SECURITY_WARNINGS': 'true',
+    __STATIC_PATH__: `"${path.join(rootPath, 'src/static').replace(/\\/g, '\\\\')}"`,
+  },
+  server: {
+    port: 9080,
+  },
+  worker: {
+    plugins: [renderer()],
+    rollupOptions: {
+      output: {
+        // entryFileNames: '[name].js',
+        inlineDynamicImports: true,
+        format: 'iife',
+        experimentalMinChunkSize: 50_000,
+      },
+      logLevel: 'warn',
+    },
+    // format: 'es',
+  },
+  cacheDir: path.join(rootPath, 'node_modules/.vite/renderer'),
+}
+
+export default config
@@ -0,0 +1,27 @@
+import fs from 'node:fs'
+import path from 'node:path'
+
+const rootPath = path.join(__dirname, '../../')
+
+const assets = [
+  [
+    path.join(rootPath, './src/main/modules/userApi/renderer/user-api.html'),
+    path.join(rootPath, './dist/main/user-api.html'),
+  ],
+  [
+    path.join(rootPath, './src/static'),
+    path.join(rootPath, './dist/static'),
+  ],
+  [
+    path.join(rootPath, './src/common/theme/theme_images'),
+    path.join(rootPath, './dist/renderer/theme_images'),
+  ],
+] as const
+
+export default async() => {
+  for (const [from, to] of assets) {
+    await fs.promises.cp(from, to, {
+      recursive: true,
+    })
+  }
+}
@@ -0,0 +1,62 @@
+
+import del from 'del'
+import Spinnies from 'spinnies'
+import { createLogger } from 'vite'
+import colors from 'picocolors'
+import { runBuildWorker, type TaksName } from './utils'
+// import rendererConfig from './configs/renderer'
+import copyAssets from './copyAssets'
+
+const logger = createLogger('info')
+
+const runMainThread = async() => {
+  console.time('Build time')
+  del.sync(['dist/**', 'build/**', 'node_modules/.vite/**'])
+
+  const noop = () => {}
+
+
+  const spinners = new Spinnies({ color: 'blue' })
+  spinners.add('renderer', { text: 'renderer compiling' })
+  spinners.add('renderer-lyric', { text: 'renderer-lyric compiling' })
+  spinners.add('renderer-scripts', { text: 'renderer-scripts compiling' })
+  spinners.add('main', { text: 'main compiling' })
+  const handleResult = (name: TaksName) => {
+    return (success: boolean) => {
+      if (success) {
+        spinners.succeed(name, { text: name + ' compile success!' })
+      } else {
+        spinners.fail(name, { text: name + ' compile fail!' })
+      }
+      return success
+    }
+  }
+
+  const buildTasks = [
+    runBuildWorker('renderer', noop).then(handleResult('renderer')),
+    runBuildWorker('renderer-lyric', noop).then(handleResult('renderer-lyric')),
+    runBuildWorker('renderer-scripts', noop).then(handleResult('renderer-scripts')),
+    runBuildWorker('main', noop).then(handleResult('main')),
+    // build(rendererConfig, noop).then(handleResult('renderer')),
+  ]
+
+  if (!await Promise.all(buildTasks).then((result) => result.every(s => s))) {
+    console.timeEnd('Build time')
+    throw new Error('Build failed')
+  }
+
+  await copyAssets()
+
+  // listr.run().then(() => {
+
+  logger.info(colors.green('\nAll task build successfully'))
+  // })
+  console.timeEnd('Build time')
+}
+
+void runMainThread().then(() => {
+  process.exit(0)
+}).catch(err => {
+  console.log(err)
+  throw err
+})
@@ -0,0 +1,119 @@
+import { type ChildProcessWithoutNullStreams, spawn } from 'node:child_process'
+import path from 'node:path'
+import colors from 'picocolors'
+import del from 'del'
+import electron from 'electron'
+import { createLogger } from 'vite'
+import { type TaksName, build, runBuildWorker } from './utils'
+import Spinnies from 'spinnies'
+import replaceLib from '../build-before-pack'
+import { Arch } from 'electron-builder'
+import mainConfig from './configs/main'
+
+const logger = createLogger('info')
+
+del.sync(['dist/**', 'node_modules/.vite/**'])
+
+const logs = [
+  'Manifest version 2 is deprecated, and support will be removed in 2023',
+  '"Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled',
+
+  // https://github.com/electron/electron/issues/32133
+  '"Electron sandbox_bundle.js script failed to run"',
+  '"TypeError: object null is not iterable (cannot read property Symbol(Symbol.iterator))",',
+]
+function electronLog(data: Buffer, color: 'red' | 'blue') {
+  let log = data.toString()
+  if (/[0-9A-z]+/.test(log)) {
+    // 抑制某些无关的报错日志
+    if (color == 'red' && typeof log === 'string' && logs.some(l => log.includes(l))) return
+
+    logger.info(colors[color](log))
+  }
+}
+export const runElectron = () => {
+  let args = [
+    '--inspect=5858',
+    // 'NODE_ENV=development',
+    path.join(__dirname, '../../dist/main/main.js'),
+  ]
+
+  // detect yarn or npm and process commandline args accordingly
+  if (process.env.npm_execpath?.endsWith('yarn.js')) {
+    args = args.concat(process.argv.slice(3))
+  } else if (process.env.npm_execpath?.endsWith('npm-cli.js')) {
+    args = args.concat(process.argv.slice(2))
+  }
+
+  const electronProcess = spawn(electron as unknown as string, args)
+
+  electronProcess.stdout.on('data', data => {
+    electronLog(data, 'blue')
+  })
+  electronProcess.stderr.on('data', data => {
+    electronLog(data, 'red')
+  })
+
+  electronProcess.on('close', () => {
+    process.exit()
+  })
+
+  return electronProcess
+}
+
+const runMainThread = async() => {
+  console.time('init')
+
+  // let server: ViteDevServer | undefined
+  let electronProcess: ChildProcessWithoutNullStreams | undefined
+
+  const noop = () => {}
+  const handleUpdate = () => {
+    logger.info(colors.green('\nrebuild the electron main process successfully'))
+
+    if (electronProcess) {
+      electronProcess.removeAllListeners()
+      electronProcess.kill()
+    }
+
+    electronProcess = runElectron()
+    logger.info(colors.green('\nrestart electron app...'))
+  }
+
+  const spinners = new Spinnies({ color: 'blue' })
+  spinners.add('renderer', { text: 'renderer compiling' })
+  spinners.add('renderer-lyric', { text: 'renderer-lyric compiling' })
+  spinners.add('renderer-scripts', { text: 'renderer-scripts compiling' })
+  spinners.add('main', { text: 'main compiling' })
+  const handleResult = (name: TaksName) => {
+    return (success: boolean) => {
+      if (success) {
+        spinners.succeed(name, { text: name + ' compile success!' })
+      } else {
+        spinners.fail(name, { text: name + ' compile fail!' })
+      }
+      return success
+    }
+  }
+
+  const buildTasks = [
+    runBuildWorker('renderer', noop).then(handleResult('renderer')),
+    runBuildWorker('renderer-lyric', noop).then(handleResult('renderer-lyric')),
+    runBuildWorker('renderer-scripts', handleUpdate).then(handleResult('renderer-scripts')),
+    replaceLib({ electronPlatformName: process.platform, arch: Arch[process.arch as any] }).then(async() => {
+      return build(mainConfig, handleUpdate).then(handleResult('main'))
+    }),
+  ]
+
+  if (!await Promise.all(buildTasks).then((result) => result.every(s => s))) return
+  // listr.run().then(() => {
+  electronProcess = runElectron()
+
+  logger.info(colors.green('\nAll task build successfully'))
+  // })
+  console.timeEnd('init')
+}
+
+void runMainThread()
+
+
@@ -0,0 +1,140 @@
+import path from 'node:path'
+import { Worker, MessageChannel } from 'worker_threads'
+import {
+  type UserConfig,
+  mergeConfig,
+  build as viteBuild,
+  createServer,
+} from 'vite'
+
+export type BuildSuatus = 'success' | 'error' | 'updated'
+export type TaksName = 'main' | 'renderer' | 'renderer-lyric' | 'renderer-scripts'
+
+/**
+ * build code
+ * @param config vite config
+ * @param onUpdated new build event
+ * @returns is success
+ */
+export const build = async(config: UserConfig, onUpdated: () => void): Promise<boolean> => {
+  if (config.mode == 'production') {
+    if (config.build) config.build.watch = null
+    return viteBuild(config).then((output) => {
+      // output
+      // console.log(output)
+      return true
+    })
+  }
+
+  return config.server
+    ? createBuildServer(config, onUpdated)
+    : buildDev(config, onUpdated)
+}
+
+
+/**
+ * build code in dev
+ * @param config vite config
+ * @param onUpdated new build event
+ * @returns is success
+ */
+const buildDev = async(config: UserConfig, onUpdated: () => void) => {
+  return new Promise<boolean>(resolve => {
+    let firstBundle = true
+    let isError = false
+    config = mergeConfig(config, {
+      plugins: [
+        {
+          name: 'vite:file-watcher',
+          buildEnd(err?: Error) {
+            // console.log('buildEnd', err !== undefined, err)
+            isError = err !== undefined
+          },
+          closeBundle() {
+            // console.log('closeBundle')
+            if (firstBundle) {
+              firstBundle = false
+              resolve(!isError)
+            } else {
+              if (isError) return
+              onUpdated()
+            }
+          },
+        },
+      ],
+    })
+
+    void viteBuild(config)
+  })
+}
+
+export const createBuildServer = async(config: UserConfig, onUpdated: () => void) => {
+  return new Promise<boolean>(resolve => {
+    let firstBundle = true
+    let isError = false
+    void createServer({
+      ...mergeConfig(config, {
+        plugins: [
+          {
+            name: 'vite:file-watcher',
+            buildEnd(err?: Error) {
+              // console.log('buildEnd', err !== undefined, err)
+              isError = err !== undefined
+            },
+            closeBundle() {
+              // console.log('closeBundle')
+              if (firstBundle) {
+                firstBundle = false
+                // resolve(!isError)
+              } else {
+                if (isError) return
+                onUpdated()
+              }
+            },
+          },
+        ],
+      }),
+      configFile: false,
+    }).then(async server => {
+      return server.listen().then(() => {
+        resolve(true)
+      })
+    }).catch((error) => {
+      console.log(error)
+      resolve(false)
+    })
+
+    // return build(config, () => {
+    // // server.ws.send({ type: 'full-reload' })
+    //   onUpdated()
+    // })
+  })
+}
+
+/**
+ * build code in worker
+ * @param config vite config
+ * @param onUpdated new build event
+ * @returns is success
+ */
+export const runBuildWorker = async(taskName: TaksName, onUpdated: () => void) => new Promise<boolean>((resolve) => {
+  const worker = new Worker(path.resolve(__dirname, './worker.ts'), {
+    execArgv: ['--require', 'ts-node/register'],
+  })
+  const subChannel = new MessageChannel()
+  worker.postMessage({ port: subChannel.port1, taskName }, [subChannel.port1])
+  subChannel.port2.on('message', ({ status }: { status: BuildSuatus }) => {
+    // console.log(status)
+    switch (status) {
+      case 'updated':
+        onUpdated()
+        break
+      case 'success':
+        resolve(true)
+        break
+      case 'error':
+        resolve(false)
+        break
+    }
+  })
+})
@@ -0,0 +1,33 @@
+import { parentPort, type MessagePort } from 'node:worker_threads'
+import { type TaksName, build } from './utils'
+
+import mainConfig from './configs/main'
+import rendererConfig from './configs/renderer'
+import rendererLyricConfig from './configs/renderer-lyric'
+import rendererScriptConfig from './configs/renderer-scripts'
+
+const configs = {
+  main: mainConfig,
+  renderer: rendererConfig,
+  'renderer-lyric': rendererLyricConfig,
+  'renderer-scripts': rendererScriptConfig,
+}
+
+if (!parentPort) throw new Error('Require run in worker')
+
+parentPort.once('message', ({ port, taskName }: {
+  port: MessagePort
+  taskName: TaksName
+}) => {
+  // assert(port instanceof MessagePort)
+  const sendStatus = () => {
+    port.postMessage({
+      status: 'updated',
+    })
+  }
+  void build(configs[taskName], sendStatus).then((status) => {
+    port.postMessage({
+      status: status ? 'success' : 'error',
+    })
+  })
+})