perf: migrate vue-cli to vite

radishes-music · Oct 29, 2023 · e25e3cd · e25e3cd
1 parent 77529d5
commit e25e3cd
Show file tree

Hide file tree

Showing 20 changed files with 3,406 additions and 2,467 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
diff --git a/babel.config.js b/babel.config.js
diff --git a/index.html b/index.html
diff --git a/package.json b/package.json
@@ -30,7 +30,8 @@
     "postuninstall": "electron-builder install-app-deps",
     "log": "conventional-changelog -p eslint -i CHANGELOG.md -s -r 0",
     "electron:generate-icons": "electron-icon-builder --input=./public/icon.png --output=build --flatten",
-    "svgo": "svgo -f ./src/assets/svg"
+    "svgo": "svgo -f ./src/assets/svg",
+    "serve": "vite dev"
   },
   "gitHooks": {
     "pre-commit": "lint-staged"
@@ -54,11 +55,27 @@
     "packages/*"
   ],
   "dependencies": {
-    "@vueuse/core": "^4.9.1",
-    "core-js": "^3.6.5",
-    "vue": "^3.0.5",
-    "vue-router": "^4.0.0-0",
-    "vuex": "^4.0.0-0"
+    "@vueuse/core": "4.9.1",
+    "ant-design-vue": "2.0.1",
+    "axios": "^0.21.1",
+    "dayjs": "^1.9.4",
+    "electron": "12.2.3",
+    "electron-builder": "^23.0.2",
+    "electron-devtools-installer": "^3.1.0",
+    "electron-icon-builder": "^1.0.2",
+    "electron-log": "^4.3.1",
+    "electron-store": "^6.0.1",
+    "electron-updater": "^4.3.5",
+    "js-base64": "^3.7.2",
+    "js-cookie": "^2.2.1",
+    "uuid": "^8.3.2",
+    "v-easy-components": "2.0.0",
+    "vant": "^3.0.6",
+    "vue": "^3.3.7",
+    "vue-i18n": "^9.1.7",
+    "vue-router": "^4.2.5",
+    "vuex": "^4.1.0",
+    "vuex-persistedstate": "^4.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.11.6",
@@ -79,20 +96,14 @@
     "@types/uuid": "^8.3.0",
     "@typescript-eslint/eslint-plugin": "^2.33.0",
     "@typescript-eslint/parser": "^2.33.0",
+    "@vitejs/plugin-vue": "^4.4.0",
+    "@vitejs/plugin-vue-jsx": "^3.0.2",
     "@vue/babel-plugin-jsx": "^1.0.3",
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin-router": "~4.5.0",
-    "@vue/cli-plugin-typescript": "~4.5.0",
-    "@vue/cli-plugin-unit-mocha": "~4.5.0",
-    "@vue/cli-plugin-vuex": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
+    "@vue/cli-plugin-babel": "^5.0.8",
     "@vue/compiler-sfc": "^3.0.5",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-typescript": "^5.0.2",
     "@vue/test-utils": "^2.0.0-0",
-    "ant-design-vue": "2.0.1",
-    "axios": "^0.21.1",
     "babel-loader": "^8.1.0",
     "babel-plugin-import": "^1.13.1",
     "chai": "^4.1.2",
@@ -104,24 +115,19 @@
     "cross-env": "^7.0.2",
     "cross-spawn": "^7.0.3",
     "cypress": "^6.2.0",
-    "dayjs": "^1.9.4",
-    "electron": "12.2.3",
-    "electron-builder": "^23.0.2",
-    "electron-devtools-installer": "^3.1.0",
-    "electron-icon-builder": "^1.0.2",
-    "electron-log": "^4.3.1",
-    "electron-store": "^6.0.1",
-    "electron-updater": "^4.3.5",
-    "eslint": "^6.7.2",
+    "eslint": "^8.52.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-security": "^1.7.1",
     "eslint-plugin-vue": "^7.0.0-0",
     "express": "^4.17.1",
     "file-saver": "^2.0.5",
     "github-markdown-css": "^4.0.0",
     "http-proxy-middleware": "^1.0.6",
     "husky": "^4.3.0",
-    "js-base64": "^3.7.2",
-    "js-cookie": "^2.2.1",
     "lerna": "^3.22.1",
     "less": "^3.0.4",
     "less-loader": "^5.0.0",
@@ -143,15 +149,13 @@
     "stylelint-prettier": "^1.1.2",
     "svgo": "^1.3.2",
     "ts-loader": "^8.0.6",
-    "typescript": "^4.1.3",
+    "typescript": "^5.2.2",
     "url-loader": "^4.1.1",
-    "uuid": "^8.3.2",
-    "v-easy-components": "2.0.0",
-    "vant": "^3.0.6",
+    "vite": "^4.5.0",
+    "vite-plugin-importer": "^0.2.5",
+    "vite-plugin-md2vue": "^1.1.1",
     "vue-cli-plugin-electron-builder": "^2.1.1",
-    "vue-i18n": "^9.1.7",
     "vue-loader": "^16.1.2",
-    "vuex-persistedstate": "^4.0.0-beta.1",
     "webpack-bundle-analyzer": "4.3.0"
   }
-}
+}
diff --git a/src/app/app.tsx b/src/app/app.tsx
@@ -10,6 +10,7 @@ export default defineComponent({
   name: 'APP',
   setup() {
     return () => (
+      // @ts-expect-error
       <ErrorBoundary ref="ErrorBoundary">
         <Container />
       </ErrorBoundary>

diff --git a/src/app/index.ts b/src/app/index.ts
@@ -1,7 +1,7 @@
 import { createApp } from 'vue'
 import App from './app'
-import router from '../router'
 import store from '../store'
+import router from '../router'
 import { Components } from './plugin/v-easy-components'
 import GlobalComponent from '@/components-global/index'
 import { errorHandle } from '@/components/error-boundary/index'
@@ -13,7 +13,8 @@ import '@/iconfont/index'
 const app = createApp(App)
   .use(store)
   .use(router)
-  .use(Components)
+  // @ts-expect-error
+  .use(Components.default)
   .use(GlobalComponent)
 
 errorHandle(app)

diff --git a/src/components/error-boundary/index.tsx b/src/components/error-boundary/index.tsx
@@ -35,14 +35,14 @@ interface RuntimeErrorComponentProps {
 export function errorHandle(app: App): void {
   app.config.errorHandler = (err, vm, info) => {
     nextTick(() => {
-      if (vm && vm.$root) {
-        const ErrorBoundary = (vm.$root.$refs
-          .ErrorBoundary as unknown) as Methods
-        ErrorBoundary.handleError(true, {
-          title: info,
-          message: err
-        })
-      }
+      // if (vm && vm.$root) {
+      //   const ErrorBoundary = (vm.$root.$refs
+      //     .ErrorBoundary as unknown) as Methods
+      //   ErrorBoundary.handleError(true, {
+      //     title: info,
+      //     message: err
+      //   })
+      // }
     })
   }
 }

diff --git a/src/electron/event/ipc-main/index.ts b/src/electron/event/ipc-main/index.ts
@@ -69,9 +69,9 @@ export const onIpcMainEvent = (win: BrowserWindow) => {
           webSecurity: false
         }
       })
-      if (process.env.WEBPACK_DEV_SERVER_URL) {
+      if (import.meta.env.WEBPACK_DEV_SERVER_URL) {
         lyrics.loadURL(
-          normalizeUrl(process.env.WEBPACK_DEV_SERVER_URL + '/lyrics.html')
+          normalizeUrl(import.meta.env.WEBPACK_DEV_SERVER_URL + '/lyrics.html')
         )
       } else {
         lyrics.loadURL('app://./lyrics.html')

diff --git a/src/electron/main.ts b/src/electron/main.ts
@@ -11,7 +11,7 @@ import store from '@/electron/store/index'
 import path from 'path'
 
 // curl -H "Accept: application/json" https://api.github.com/repos/Linkontoask/radishes/contents/package.json
-const isDevelopment = process.env.VUE_APP_NODE_ENV !== 'production'
+const isDevelopment = import.meta.env.VUE_APP_NODE_ENV !== 'production'
 
 let win: BrowserWindow | null,
   loadingWin: BrowserWindow | null,
@@ -34,9 +34,9 @@ async function createLoadingWindow() {
     transparent: true,
     titleBarStyle: 'hidden'
   })
-  if (process.env.WEBPACK_DEV_SERVER_URL) {
+  if (import.meta.env.WEBPACK_DEV_SERVER_URL) {
     await loadingWin.loadURL(
-      (process.env.WEBPACK_DEV_SERVER_URL as string) + '/loading.html'
+      (import.meta.env.WEBPACK_DEV_SERVER_URL as string) + '/loading.html'
     )
   } else {
     loadingWin
@@ -73,14 +73,14 @@ async function createWindow() {
     resizable: true,
     icon: path.join(
       __dirname,
-      process.env.VUE_APP_NODE_ENV === 'development'
+      import.meta.env.VUE_APP_NODE_ENV === 'development'
         ? '../build/icons/1024x1024.png'
         : 'build/icons/1024x1024.png'
     ),
     webPreferences: {
       // Use pluginOptions.nodeIntegration, leave this alone
       // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
-      nodeIntegration: (process.env
+      nodeIntegration: (import.meta.env
         .ELECTRON_NODE_INTEGRATION as unknown) as boolean,
       // https://github.com/electron/electron/issues/23506
       contextIsolation: false,
@@ -93,11 +93,11 @@ async function createWindow() {
     }
   })
 
-  infoMain('Webpack dev server url ', process.env.WEBPACK_DEV_SERVER_URL)
-  if (process.env.WEBPACK_DEV_SERVER_URL) {
+  infoMain('Webpack dev server url ', import.meta.env.WEBPACK_DEV_SERVER_URL)
+  if (import.meta.env.WEBPACK_DEV_SERVER_URL) {
     // Load the url of the dev server if in development mode
-    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL as string)
-    if (!process.env.IS_TEST) win.webContents.openDevTools()
+    await win.loadURL(import.meta.env.WEBPACK_DEV_SERVER_URL as string)
+    if (!import.meta.env.IS_TEST) win.webContents.openDevTools()
   } else {
     try {
       createProtocol('app')
@@ -179,7 +179,7 @@ app.on('activate', () => {
 
 app.on('ready', async () => {
   infoMain('Event ready')
-  if (isDevelopment && !process.env.IS_TEST) {
+  if (isDevelopment && !import.meta.env.IS_TEST) {
     // Install Vue Devtools
     try {
       await installExtension({

diff --git a/src/electron/utils/index.ts b/src/electron/utils/index.ts
@@ -47,7 +47,7 @@ export const isElectron = () => {
 }
 
 export const getAppPath = () => {
-  return __dirname || process.env.PORTABLE_EXECUTABLE_DIR
+  return __dirname || import.meta.env.PORTABLE_EXECUTABLE_DIR
 }
 
 export const getUserOS = () => {

diff --git a/src/electron/utils/log.ts b/src/electron/utils/log.ts
@@ -3,7 +3,7 @@ import path from 'path'
 
 const execPath =
   path.dirname(process.execPath) ||
-  (process.env.PORTABLE_EXECUTABLE_DIR as string)
+  (import.meta.env.PORTABLE_EXECUTABLE_DIR as string)
 
 export enum LogInfoType {
   MAIN = '[Main]',

diff --git a/src/layout/container.tsx b/src/layout/container.tsx
@@ -22,7 +22,7 @@ import store from '@/store/index'
 import classnames from 'classnames'
 import './container.less'
 
-const { VUE_APP_PLATFORM } = process.env
+const { VUE_APP_PLATFORM } = import.meta.env
 
 export const Container = defineComponent({
   name: 'Container',

diff --git a/src/pages/footer/components/lyrics-desktop/index.tsx b/src/pages/footer/components/lyrics-desktop/index.tsx
@@ -6,7 +6,7 @@ import classnames from 'classnames'
 import './index.less'
 import { isBrowser, isElectron } from '@/utils'
 
-const { VUE_APP_PLATFORM } = process.env
+const { VUE_APP_PLATFORM } = import.meta.env
 
 export const LyricsFlash = defineComponent({
   name: 'LyricsFlash',

diff --git a/src/pages/footer/components/volume-history/history.tsx b/src/pages/footer/components/volume-history/history.tsx
@@ -20,7 +20,7 @@ import { playMusic } from '@/shared/music-shared'
 import './history.less'
 
 const prefix = 'history-music'
-const { VUE_APP_PLATFORM } = process.env
+const { VUE_APP_PLATFORM } = import.meta.env
 
 export const MusicHistory = defineComponent({
   name: 'MusicHistory',

diff --git a/src/router/index.ts b/src/router/index.ts
@@ -31,8 +31,8 @@ export const contentRouter = renderRouter(contentBaseRouter)
 
 const router = createRouter({
   history: isBrowser
-    ? createWebHistory(process.env.BASE_URL)
-    : createWebHashHistory(process.env.BASE_URL),
+    ? createWebHistory(import.meta.env.BASE_URL)
+    : createWebHashHistory(import.meta.env.BASE_URL),
   routes: baseRouter.concat(navRouter, contentRouter)
 })