从webpack迁移到vite

src/renderer-lyric/.eslintrc.cjs

@@ -0,0 +1,16 @@
+/* eslint-env node */
+const { base, typescript, vue } = require('../../.eslintrc.base.cjs')
+
+module.exports = {
+  root: true,
+  ...base,
+  overrides: [
+    vue,
+    {
+      ...typescript,
+      parserOptions: {
+        project: './tsconfig.json',
+      },
+    },
+  ],
+}

src/renderer-lyric/components/index.js

@@ -1,25 +1,22 @@
 import upperFirst from 'lodash/upperFirst'
 import camelCase from 'lodash/camelCase'
 
-const requireComponent = require.context('./', true, /\.vue$/)
-
+const requireComponent = import.meta.glob(['./**/*.vue', '!./**/components/**/*.vue'], { eager: true })
 const vueFileRxp = /\.vue$/
+const vueIndexFileRxp = /\/index\.vue$/
+
 
 export default app => {
-  requireComponent.keys().forEach(fileName => {
-    const filePath = fileName.replace(/^\.\//, '')
+  Object.entries(requireComponent).forEach(([path, module]) => {
+    path = path.replace(/^\.\//, '')
+    let fileName = vueIndexFileRxp.test(path)
+      ? path.replace(vueIndexFileRxp, '')
+      : path.replace(vueFileRxp, '')
 
-    if (!filePath.split('/').every((path, index, arr) => {
-      const char = path.charAt(0)
-      return vueFileRxp.test(path) || char.toUpperCase() !== char || arr[index + 1] == 'index.vue'
-    })) return
+    let componentName = upperFirst(camelCase(fileName))
 
-    const componentConfig = requireComponent(fileName)
+    // console.log(componentName)
 
-    let componentName = upperFirst(camelCase(filePath.replace(/\.\w+$/, '')))
-
-    if (componentName.endsWith('Index')) componentName = componentName.replace(/Index$/, '')
-
-    app.component(componentName, componentConfig.default || componentConfig)
+    app.component(componentName, module.default)
   })
 }

src/renderer-lyric/components/layout/ControlBar.vue

@@ -58,7 +58,7 @@
 
 <script>
 import { ref } from '@common/utils/vueTools'
-import { setting, themeList } from '@lyric/store/state'
+import { setting } from '@lyric/store/state'
 import { updateSetting } from '@lyric/store/action'
 
 export default {
@@ -105,7 +105,6 @@ export default {
     }
     return {
       setting,
-      themeList,
       isShowThemeList,
 
       handleClose,

src/renderer-lyric/components/layout/LyricHorizontal/index.vue

@@ -198,7 +198,7 @@ export default {
 //   // -webkit-text-fill-color: #fff;
 //   // -webkit-text-stroke: thin #124628;
 // }
-.lyric-space {
+.lyricSpace {
   height: 80%;
 }
 // .lyric-text {
@@ -224,7 +224,7 @@ export default {
     }
   }
 }
-.lrc-active-zoom {
+.lrcActiveZoom {
   :global {
     .line-content {
       &.active {
@@ -246,21 +246,21 @@ export default {
     }
   }
 }
-.font-weight-font {
+.fontWeightFont {
   :global {
     .font-mode > .line {
       font-weight: bold;
     }
   }
 }
-.font-weight-line {
+.fontWeightLine {
   :global {
     .line-mode > .line {
       font-weight: bold;
     }
   }
 }
-.font-weight-extended {
+.fontWeightExtended {
   :global {
     .extended {
       font-weight: bold;

src/renderer-lyric/components/layout/LyricVertical/index.vue

@@ -196,7 +196,7 @@ export default {
 //   // -webkit-text-fill-color: #fff;
 //   // -webkit-text-stroke: thin #124628;
 // }
-.lyric-space {
+.lyricSpace {
   width: 80%;
   height: 100%;
 }
@@ -223,7 +223,7 @@ export default {
     }
   }
 }
-.lrc-active-zoom {
+.lrcActiveZoom {
   :global {
     .line-content {
       &.active {
@@ -245,21 +245,21 @@ export default {
     }
   }
 }
-.font-weight-font {
+.fontWeightFont {
   :global {
     .font-mode > .line {
       font-weight: bold;
     }
   }
 }
-.font-weight-line {
+.fontWeightLine {
   :global {
     .line-mode > .line {
       font-weight: bold;
     }
   }
 }
-.font-weight-extended {
+.fontWeightExtended {
   :global {
     .extended {
       font-weight: bold;

src/renderer-lyric/index.html

@@ -27,5 +27,6 @@
       }
       if (/theme=(.+)(#|$)/.test(window.location.search)) applyThemeColor(RegExp.$1)
     </script>
+    <script type="module" src="/main.ts"></script>
   </body>
 </html>

src/renderer-lyric/main.ts

@@ -6,7 +6,7 @@ import mountComponents from './components'
 
 import App from './App.vue'
 
-import '@/common/error'
+import '@root/common/error'
 import { getSetting, onMainWindowInited, onSettingChanged, sendConnectMainWindowEvent } from './utils/ipc'
 import { initSetting, mergeSetting } from './store/action'
 import { init as initMainWindowChannel } from './core/mainWindowChannel'

src/renderer-lyric/plugins/i18n.ts

@@ -1,5 +1,5 @@
-import type { I18n } from '@/lang'
-import { createI18n, i18nPlugin, useI18n } from '@/lang'
+import type { I18n } from '@root/lang'
+import { createI18n, i18nPlugin, useI18n } from '@root/lang'
 
 window.i18n = createI18n()
 

src/renderer-lyric/tsconfig.json

@@ -2,12 +2,13 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "isolatedModules": true,
+    "moduleResolution": "nodenext",
     "paths": {                                           /* Specify a set of entries that re-map imports to additional lookup locations. */
       "@common/*": ["common/*"],
       // "@renderer/*": ["renderer/*"],
       "@lyric/*": ["renderer-lyric/*"],
       "@static/*": ["static/*"],
-      "@/*": ["./*"],
+      "@root/*": ["./*"],
     },
     "typeRoots": [                                       /* Specify multiple folders that act like './node_modules/@types'. */
       "./types"