feat: 解决build bug

.electron-builder.config.js

@@ -48,8 +48,11 @@ module.exports = {
   files: [
     'dist/main/**/*',
     'dist/renderer/**/*',
-    'node_modules/NeteaseCloudMusicApi',
-    '!**/node_modules/*/{CHANGELOG.md,README.md,README,readme.md,readme}',
+    {
+      from: 'src/main/migrations',
+      to: 'dist/main/migrations',
+    },
+    '!**/node_modules/*/{*.MD,*.md,README,readme}',
     '!**/node_modules/*/{test,__tests__,tests,powered-test,example,examples}',
     '!**/node_modules/*.d.ts',
     '!**/node_modules/.bin',
@@ -60,6 +63,6 @@ module.exports = {
     '!**/{__pycache__,thumbs.db,.flowconfig,.idea,.vs,.nyc_output}',
     '!**/{appveyor.yml,.travis.yml,circle.yml}',
     '!**/{npm-debug.log,yarn.lock,.yarn-integrity,.yarn-metadata.json,pnpm-lock.yaml}',
-    '!**/node_modules/realm/react-native/**/*',
+    '!**/*.{map,debug.min.js}',
   ],
 }

.npmrc

@@ -0,0 +1,3 @@
+node-linker=hoisted
+public-hoist-pattern=*
+shamefully-hoist=true

.prettierignore

@@ -0,0 +1,4 @@
+tmp
+node_modules
+release
+dist

package.json

@@ -18,38 +18,40 @@
     "typecheck": "tsc --noEmit --project src/renderer/tsconfig.json",
     "debug": "cross-env-shell NODE_ENV=debug \"npm run typecheck && node scripts/build.mjs && vite ./src/renderer\"",
     "eslint": "eslint --ext .ts,.js ./",
-    "prettier": "prettier --write './**/*.{ts,js,tsx,jsx}'"
+    "prettier": "prettier --write './**/*.{ts,js,tsx,jsx}'",
+    "postinstall": "electron-rebuild"
   },
   "engines": {
     "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
   },
   "dependencies": {
-    "@sentry/node": "^6.19.2",
-    "@sentry/tracing": "^6.19.2",
-    "NeteaseCloudMusicApi": "^4.5.8",
-    "better-sqlite3": "^7.5.0",
+    "@sentry/node": "^6.19.3",
+    "@sentry/tracing": "^6.19.3",
+    "NeteaseCloudMusicApi": "^4.5.10",
+    "better-sqlite3": "7.4.6",
     "change-case": "^4.1.2",
     "cookie-parser": "^1.4.6",
     "electron-log": "^4.4.6",
     "electron-store": "^8.0.1",
-    "express": "^4.17.3"
+    "express": "^4.17.3",
+    "fast-folder-size": "^1.6.1"
   },
   "devDependencies": {
-    "@sentry/react": "^6.19.2",
+    "@sentry/react": "^6.19.3",
     "@types/better-sqlite3": "^7.5.0",
     "@types/cookie-parser": "^1.4.2",
     "@types/express": "^4.17.13",
     "@types/express-fileupload": "^1.2.2",
-    "@types/howler": "^2.2.6",
+    "@types/howler": "^2.2.7",
     "@types/js-cookie": "^3.0.1",
     "@types/lodash-es": "^4.17.6",
     "@types/md5": "^2.3.2",
     "@types/qrcode": "^1.4.2",
-    "@types/react": "^17.0.40",
-    "@types/react-dom": "^17.0.13",
-    "@typescript-eslint/eslint-plugin": "^5.15.0",
-    "@typescript-eslint/parser": "^5.15.0",
-    "@vitejs/plugin-react": "^1.2.0",
+    "@types/react": "^17.0.43",
+    "@types/react-dom": "^17.0.14",
+    "@typescript-eslint/eslint-plugin": "^5.17.0",
+    "@typescript-eslint/parser": "^5.17.0",
+    "@vitejs/plugin-react": "^1.3.0",
     "autoprefixer": "^10.4.4",
     "axios": "^0.26.1",
     "classnames": "^2.3.1",
@@ -60,15 +62,15 @@
     "csstype": "^3.0.11",
     "dayjs": "^1.11.0",
     "dotenv": "^16.0.0",
-    "electron": "^17.1.2",
+    "electron": "^17.3.1",
     "electron-builder": "^22.14.13",
     "electron-devtools-installer": "^3.2.0",
-    "esbuild": "^0.14.28",
-    "eslint": "^8.11.0",
+    "electron-rebuild": "^3.2.7",
+    "esbuild": "^0.14.29",
+    "eslint": "^8.12.0",
     "eslint-plugin-react": "^7.29.4",
-    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-react-hooks": "^4.4.0",
     "express-fileupload": "^1.3.1",
-    "fast-folder-size": "^1.6.1",
     "howler": "^2.2.3",
     "js-cookie": "^3.0.1",
     "lodash-es": "^4.17.21",
@@ -84,18 +86,18 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-hot-toast": "^2.2.0",
-    "react-query": "^3.34.16",
-    "react-router-dom": "^6.2.2",
+    "react-query": "^3.34.19",
+    "react-router-dom": "^6.3.0",
     "react-use": "^17.3.2",
     "rollup": "^2.70.1",
     "rollup-plugin-visualizer": "^5.6.0",
-    "sass": "^1.49.9",
+    "sass": "^1.49.10",
     "tailwindcss": "^3.0.23",
-    "typescript": "^4.6.2",
-    "unplugin-auto-import": "^0.6.6",
-    "valtio": "^1.4.0",
+    "typescript": "^4.6.3",
+    "unplugin-auto-import": "^0.6.9",
+    "valtio": "^1.5.0",
     "valtio-persist": "^1.0.2",
-    "vite": "^2.8.6",
+    "vite": "^2.9.1",
     "vite-plugin-resolve": "^1.8.0",
     "vite-plugin-svg-icons": "^2.0.1",
     "wait-on": "^6.0.1"

scripts/build.main.mjs

@@ -5,10 +5,19 @@ import electron from 'electron'
 import { spawn } from 'child_process'
 import path from 'path'
 import waitOn from 'wait-on'
-import 'dotenv/config'
+import dotenv from 'dotenv'
 import pc from 'picocolors'
 import minimist from 'minimist'
 
+const env = dotenv.config({
+  path: path.resolve(process.cwd(), '.env'),
+})
+const envForEsbuild = {}
+Object.entries(env.parsed).forEach(([key, value]) => {
+  envForEsbuild[`process.env.${key}`] = `"${value}"`
+})
+console.log(envForEsbuild)
+
 const argv = minimist(process.argv.slice(2))
 const TAG = '[script/build.main.ts]'
 const spinner = ora(`${TAG} Main Process Building...`)
@@ -19,6 +28,7 @@ const options = {
   platform: 'node',
   format: 'cjs',
   bundle: true,
+  define: envForEsbuild,
   external: [
     ...builtinModules.filter(
       x => !/^_|^(internal|v8|node-inspect)\/|\//.test(x)

src/main/db.ts

@@ -2,6 +2,12 @@ import path from 'path'
 import { app, ipcMain } from 'electron'
 import fs from 'fs'
 import SQLite3 from 'better-sqlite3'
+import logger from './logger'
+import { createFileIfNotExist } from './utils'
+
+const isDev = process.env.NODE_ENV === 'development'
+
+logger.info('[db] Initializing database...')
 
 export enum Tables {
   TRACK = 'track',
@@ -15,9 +21,13 @@ export enum Tables {
   AUDIO = 'audio',
 }
 
-const sqlite = new SQLite3(
-  path.resolve(app.getPath('userData'), './api_cache/db.sqlite')
+const dbFilePath = path.resolve(
+  app.getPath('userData'),
+  './api_cache/db.sqlite'
 )
+createFileIfNotExist(dbFilePath)
+
+const sqlite = new SQLite3(dbFilePath)
 sqlite.pragma('auto_vacuum = FULL')
 
 // Init tables if not exist
@@ -26,7 +36,9 @@ const trackTable = sqlite
   .get()
 if (!trackTable) {
   const migration = fs.readFileSync(
-    path.join(process.cwd(), './src/main/migrations/init.sql'),
+    isDev
+      ? path.join(process.cwd(), './src/main/migrations/init.sql')
+      : path.join(__dirname, './migrations/init.sql'),
     'utf8'
   )
   sqlite.exec(migration)
@@ -122,3 +134,5 @@ if (process.env.NODE_ENV === 'development') {
     })
   })
 }
+
+logger.info('[db] Database initialized')

src/main/index.ts

@@ -1,5 +1,6 @@
 import './preload' // must be first
 import './sentry'
+import './server'
 import {
   BrowserWindow,
   BrowserWindowConstructorOptions,
@@ -10,15 +11,14 @@ import Store from 'electron-store'
 import { release } from 'os'
 import path, { join } from 'path'
 import logger from './logger'
-import './server'
-// import './database'
-import './db'
 
 const isWindows = process.platform === 'win32'
 const isMac = process.platform === 'darwin'
 const isLinux = process.platform === 'linux'
 const isDev = process.env.NODE_ENV === 'development'
 
+logger.info('[index] Main process start')
+
 // Disable GPU Acceleration for Windows 7
 if (release().startsWith('6.1')) app.disableHardwareAcceleration()
 
@@ -56,7 +56,7 @@ async function createWindow() {
   const options: BrowserWindowConstructorOptions = {
     title: 'Main window',
     webPreferences: {
-      preload: join(__dirname, '../main/rendererPreload.js'),
+      preload: join(__dirname, 'rendererPreload.js'),
     },
     width: store.get('window.width'),
     height: store.get('window.height'),
@@ -72,12 +72,11 @@ async function createWindow() {
   win = new BrowserWindow(options)
 
   // Web server
-  if (isDev) {
-    const url = `http://127.0.0.1:${process.env.ELECTRON_WEB_SERVER_PORT}`
+  const url = `http://localhost:${process.env.ELECTRON_WEB_SERVER_PORT}`
   win.loadURL(url)
+
+  if (isDev) {
     win.webContents.openDevTools()
-  } else {
-    win.loadFile(join(__dirname, '../renderer/index.html'))
   }
 
   // Make all links open with the browser, not with the application
@@ -98,7 +97,7 @@ async function createWindow() {
 }
 
 app.whenReady().then(async () => {
-  logger.info('[index] app ready')
+  logger.info('[index] App ready')
   createWindow()
 
   // Install devtool extension

src/main/logger.ts

@@ -2,6 +2,8 @@ import { app } from 'electron'
 import logger from 'electron-log'
 import pc from 'picocolors'
 
+Object.assign(console, logger.functions)
+
 logger.transports.console.format = `${pc.dim('{h}:{i}:{s}{scope}')} › {text}`
 
 logger.transports.file.level = app.isPackaged ? 'info' : 'debug'
@@ -15,3 +17,5 @@ logger.info(
 )
 
 export default logger
+
+logger.info(`[logger] logger initialized`)

src/main/preload.ts

@@ -1,17 +1,13 @@
 import logger from './logger'
 import path from 'path'
 import { app } from 'electron'
-import fs from 'fs'
+import { createDirIfNotExist } from './utils'
 
 const isDev = process.env.NODE_ENV === 'development'
 
 if (isDev) {
   const devUserDataPath = path.resolve(process.cwd(), './tmp/userData')
-  try {
-    fs.statSync(devUserDataPath)
-  } catch (e) {
-    fs.mkdirSync(devUserDataPath)
-  }
+  createDirIfNotExist(devUserDataPath)
   app.setPath('appData', devUserDataPath)
 }
 logger.info(`[index] userData path: ${app.getPath('userData')}`)

src/main/sentry.ts

@@ -3,7 +3,7 @@ import * as Tracing from '@sentry/tracing'
 import pkg from '../../package.json'
 import logger from './logger'
 
-logger.info(`[sentry] init sentry`)
+logger.info(`[sentry] sentry initializing`)
 
 Sentry.init({
   dsn: 'https://2aaaa67f1c3d4d6baefafa5d58fcf340@o436528.ingest.sentry.io/6274637',
@@ -15,3 +15,5 @@ Sentry.init({
   // We recommend adjusting this value in production
   tracesSampleRate: 1.0,
 })
+
+logger.info(`[sentry] sentry initialized`)

src/main/server.ts

@@ -9,6 +9,11 @@ import {
   getAudioCache,
 } from './cache'
 import fileUpload from 'express-fileupload'
+import path from 'path'
+
+logger.info('[server] starting http server')
+
+const isDev = process.env.NODE_ENV === 'development'
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const neteaseApi = require('NeteaseCloudMusicApi') as (params: any) => any[]
@@ -82,7 +87,15 @@ app.post('/yesplaymusic/audio/:id', async (req: Request, res: Response) => {
   }
 })
 
-const port = Number(process.env.ELECTRON_DEV_NETEASE_API_PORT ?? 3000)
+if (!isDev) {
+  app.use(express.static(path.join(__dirname, '../renderer')))
+}
+
+const port = Number(
+  isDev
+    ? process.env.ELECTRON_DEV_NETEASE_API_PORT ?? 3000
+    : process.env.ELECTRON_WEB_SERVER_PORT ?? 42710
+)
 app.listen(port, () => {
   logger.info(`[server] API server listening on port ${port}`)
 })

src/main/utils.ts

@@ -0,0 +1,14 @@
+import fs from 'fs'
+
+export const createDirIfNotExist = (dir: string) => {
+  if (!fs.existsSync(dir)) {
+    fs.mkdirSync(dir, { recursive: true })
+  }
+}
+
+export const createFileIfNotExist = (file: string) => {
+  createDirIfNotExist(file.split('/').slice(0, -1).join('/'))
+  if (!fs.existsSync(file)) {
+    fs.writeFileSync(file, '')
+  }
+}

src/renderer/auto-imports.d.ts

@@ -5,7 +5,9 @@ declare global {
   const toast: typeof import('react-hot-toast')['toast']
   const useCallback: typeof import('react')['useCallback']
   const useContext: typeof import('react')['useContext']
+  const useDebugValue: typeof import('react')['useDebugValue']
   const useEffect: typeof import('react')['useEffect']
+  const useImperativeHandle: typeof import('react')['useImperativeHandle']
   const useInfiniteQuery: typeof import('react-query')['useInfiniteQuery']
   const useMemo: typeof import('react')['useMemo']
   const useMutation: typeof import('react-query')['useMutation']

src/renderer/styles/global.scss

@@ -54,38 +54,38 @@
 @font-face {
   font-family: Barlow;
   font-weight: normal;
-  src: url('/fonts/Barlow-Regular.woff2') format('woff2'),
-    url('/fonts/Barlow-Regular.ttf') format('truetype');
+  src: url('@/assets/fonts/Barlow-Regular.woff2') format('woff2'),
+    url('@/assets/fonts/Barlow-Regular.ttf') format('truetype');
 }
 @font-face {
   font-family: Barlow;
   font-weight: medium;
-  src: url('/fonts/Barlow-Medium.woff2') format('woff2'),
-    url('/fonts/Barlow-Medium.ttf') format('truetype');
+  src: url('@/assets/fonts/Barlow-Medium.woff2') format('woff2'),
+    url('@/assets/fonts/Barlow-Medium.ttf') format('truetype');
 }
 @font-face {
   font-family: Barlow;
   font-weight: 600;
-  src: url('/fonts/Barlow-SemiBold.woff2') format('woff2'),
-    url('/fonts/Barlow-SemiBold.ttf') format('truetype');
+  src: url('@/assets/fonts/Barlow-SemiBold.woff2') format('woff2'),
+    url('@/assets/fonts/Barlow-SemiBold.ttf') format('truetype');
 }
 @font-face {
   font-family: Barlow;
   font-weight: bold;
-  src: url('/fonts/Barlow-Bold.woff2') format('woff2'),
-    url('/fonts/Barlow-Bold.ttf') format('truetype');
+  src: url('@/assets/fonts/Barlow-Bold.woff2') format('woff2'),
+    url('@/assets/fonts/Barlow-Bold.ttf') format('truetype');
 }
 @font-face {
   font-family: Barlow;
   font-weight: 800;
-  src: url('/fonts/Barlow-ExtraBold.woff2') format('woff2'),
-    url('/fonts/Barlow-ExtraBold.ttf') format('truetype');
+  src: url('@/assets/fonts/Barlow-ExtraBold.woff2') format('woff2'),
+    url('@/assets/fonts/Barlow-ExtraBold.ttf') format('truetype');
 }
 @font-face {
   font-family: Barlow;
   font-weight: 900;
-  src: url('/fonts/Barlow-Black.woff2') format('woff2'),
-    url('/fonts/Barlow-Black.ttf') format('truetype');
+  src: url('@/assets/fonts/Barlow-Black.woff2') format('woff2'),
+    url('@/assets/fonts/Barlow-Black.ttf') format('truetype');
 }
 
 body,

vite.config.ts

@@ -43,7 +43,7 @@ export default defineConfig({
   base: './',
   build: {
     sourcemap: process.env.NODE_ENV === 'debug',
-    outDir: './dist/renderer',
+    outDir: '../../dist/renderer',
     emptyOutDir: true,
     rollupOptions: {
       plugins: [