refactor: use vite alternative rollup

scripts/build-main.ts

@@ -1,55 +0,0 @@
-import path from 'path'
-import { watch, rollup, OutputOptions } from 'rollup'
-import { spawn, ChildProcess } from 'child_process'
-import electron from 'electron'
-import minimist from 'minimist'
-import chalk from 'chalk'
-import ora from 'ora'
-import { waitOn } from './utils'
-import options from './rollup.config'
-import { main, env } from '../package.json'
-
-const argv = minimist(process.argv.slice(2))
-const opt = options({ proc: 'main', env: argv.env })
-const TAG = '[build-main.ts]'
-const spinner = ora(`${TAG} Electron main build...`)
-
-; (async () => {
-  if (argv.watch) {
-    // Wait on vite server launched
-    const waitOnState = waitOn({ port: env.PORT })
-
-    const watcher = watch(opt)
-    let child: ChildProcess
-    watcher.on('change', filename => {
-      const log = chalk.green(`change -- ${filename}`)
-      console.log(TAG, log)
-    })
-    watcher.on('event', async ev => {
-      await waitOnState
-
-      if (ev.code === 'END') {
-        if (child) child.kill()
-        child = spawn(
-          electron as unknown as string,
-          [path.join(__dirname, `../${main}`)],
-          { env: Object.assign(process.env, env), stdio: 'inherit' },
-        )
-      } else if (ev.code === 'ERROR') {
-        console.log(ev.error)
-      }
-    })
-  } else {
-    spinner.start()
-    try {
-      const build = await rollup(opt)
-      await build.write(opt.output as OutputOptions)
-      spinner.succeed()
-      process.exit()
-    } catch (error) {
-      console.log(`\n${TAG} ${chalk.red('构建报错')}\n`, error, '\n')
-      spinner.fail()
-      process.exit(1)
-    }
-  }
-})();

scripts/build-preload.ts

@@ -1,49 +0,0 @@
-import { watch, rollup, OutputOptions, Plugin } from 'rollup'
-import minimist from 'minimist'
-import chalk from 'chalk'
-import ora from 'ora'
-import WebSocket from 'ws'
-import options from './rollup.config'
-import { createWsServer, formatWsSendData, WssServer } from './ws'
-
-const argv = minimist(process.argv.slice(2))
-const opts = options({ proc: 'preload', env: argv.env })
-const TAG = '[build-preload.ts]'
-const spinner = ora(`${TAG} Electron preload build...`)
-
-function hotReloadPreload(wssServer: WssServer): Plugin {
-  return {
-    name: 'hot-reload-preload',
-    writeBundle() {
-      // Hot reload preload script !!!
-      if (wssServer.instance?.readyState === WebSocket.OPEN) {
-        console.log(TAG, 'Hot reload preload script')
-        wssServer.instance.send(formatWsSendData({ cmd: 'reload', data: Date.now() }))
-      }
-    },
-  }
-}
-
-; (async () => {
-  if (argv.watch) {
-    const wssServer = createWsServer()
-    opts.plugins = opts.plugins?.concat(hotReloadPreload(wssServer))
-    const watcher = watch(opts)
-
-    watcher.on('change', filename => {
-      console.log(TAG, chalk.yellow(`change -- ${filename}`))
-    })
-  } else {
-    spinner.start()
-    try {
-      const build = await rollup(opts)
-      await build.write(opts.output as OutputOptions)
-      spinner.succeed()
-      process.exit()
-    } catch (error) {
-      console.log(`\n${TAG} ${chalk.red('构建报错')}\n`, error, '\n')
-      spinner.fail()
-      process.exit(1)
-    }
-  }
-})();

scripts/build.mjs

@@ -0,0 +1,39 @@
+process.env.NODE_ENV = 'production'
+
+import { build as viteBuild } from 'vite'
+import { build as electronBuild2 } from 'electron-builder'
+import { config as builderConfig } from '../configs/electron-builder.cinfig.mjs'
+import chalk from 'chalk'
+
+const TAG = chalk.bgBlue(' build.mjs ')
+
+const viteConfigs = {
+  main: 'configs/vite-main.config.ts',
+  preload: 'configs/vite-preload.config.ts',
+  reactTs: 'configs/vite-renderer.config.ts',
+}
+
+async function buildElectron() {
+  for (const [name, configPath] of Object.entries(viteConfigs)) {
+    console.group(TAG, name)
+    await viteBuild({ configFile: configPath, mode: process.env.NODE_ENV })
+    console.groupEnd()
+    console.log() // for beautiful log.
+  }
+}
+
+async function packElectron() {
+  return electronBuild2({ config: builderConfig })
+    .then(result => {
+      console.log(TAG, chalk.green(`electron-builder.build result - ${result}`))
+    })
+}
+
+// bootstrap
+try {
+  await buildElectron()
+  await packElectron()
+} catch (error) {
+  console.error(error)
+  process.exit(1)
+}

scripts/rollup.config.ts

@@ -1,64 +0,0 @@
-import path from 'path'
-import { RollupOptions } from 'rollup'
-import nodeResolve from '@rollup/plugin-node-resolve'
-import typescript from '@rollup/plugin-typescript'
-import commonjs from '@rollup/plugin-commonjs'
-import replace from '@rollup/plugin-replace'
-import alias from '@rollup/plugin-alias'
-import json from '@rollup/plugin-json'
-import { builtins } from './utils'
-
-export interface ConfigOptions {
-  env?: typeof process.env.NODE_ENV
-  proc: 'main' | 'render' | 'preload'
-}
-
-export default function (opts: ConfigOptions) {
-  const sourcemap = opts.proc === 'render'
-  const options: RollupOptions = {
-    input: path.join(__dirname, `../src/${opts.proc}/index.ts`),
-    output: {
-      dir: path.join(__dirname, `../dist/${opts.proc}`),
-      format: 'cjs',
-      sourcemap,
-    },
-    plugins: [
-      nodeResolve({
-        extensions: ['.ts', '.js', 'json'],
-      }),
-      commonjs(),
-      json(),
-      typescript({
-        sourceMap: sourcemap,
-        noEmitOnError: true,
-      }),
-      alias({
-        entries: {
-          '@root': path.join(__dirname, '..'),
-          '@': path.join(__dirname, '../src'),
-        },
-      }),
-      replace({
-        ...Object
-          .entries({ NODE_ENV: opts.env })
-          .reduce(
-            (acc, [k, v]) => Object.assign(acc, { [`process.env.${k}`]: JSON.stringify(v) }),
-            {},
-          ),
-        preventAssignment: true,
-      }),
-    ],
-    external: [
-      ...builtins(),
-      'electron',
-    ],
-    onwarn: warning => {
-      // https://github.com/rollup/rollup/issues/1089#issuecomment-365395213
-      if (warning.code !== 'CIRCULAR_DEPENDENCY') {
-        console.error(`(!) ${warning.message}`)
-      }
-    },
-  }
-
-  return options
-}

scripts/utils.ts

@@ -1,26 +0,0 @@
-import { builtinModules } from 'module'
-import { get } from 'http'
-import chalk from 'chalk'
-
-const TAG = '[waitOn]'
-
-/** Listen http server startup */
-export function waitOn(arg0: { port: string | number; interval?: number; }) {
-  return new Promise<number | undefined>(resolve => {
-    const { port, interval = 149 } = arg0
-    const url = `http://localhost:${port}`
-    let counter = 0
-    const timer: NodeJS.Timer = setInterval(() => {
-      get(url, res => {
-        clearInterval(timer)
-        console.log(TAG, chalk.green(`"${url}" are already responsive.`), `(${res.statusCode}: ${res.statusMessage})`)
-        resolve(res.statusCode)
-      }).on('error', err => {
-        console.log(TAG, `counter: ${counter++}`)
-      })
-    }, interval)
-  })
-}
-
-/** node.js builtins module */
-export const builtins = () => builtinModules.filter(x => !/^_|^(internal|v8|node-inspect)\/|\//.test(x))

scripts/watch.mjs

@@ -0,0 +1,79 @@
+process.env.NODE_ENV = 'production'
+
+import { readFileSync } from 'fs'
+import { join } from 'path'
+import electron from 'electron'
+import { spawn } from 'child_process'
+import { createServer, build as viteBuild } from 'vite'
+import chalk from 'chalk'
+
+const TAG = chalk.bgGreen(' dev.mjs ')
+const pkg = JSON.parse(readFileSync(join(process.cwd(), 'package.json'), 'utf8'))
+
+/**
+ * @param {{ name: string; configFile: string; writeBundle: import('rollup').OutputPlugin['writeBundle'] }} param0
+ * @returns {import('rollup').RollupWatcher}
+ */
+function getWatcher({ name, configFile, writeBundle }) {
+  return viteBuild({
+    mode: 'development',
+    // Options here precedence over configFile
+    build: {
+      watch: {},
+    },
+    configFile,
+    plugins: [
+      { name, writeBundle },
+    ],
+  })
+}
+
+/**
+ * @returns {Promise<import('rollup').RollupWatcher>}
+ */
+async function watchMain() {
+  /**
+   * @type {import('child_process').ChildProcessWithoutNullStreams | null}
+   */
+  let electronProcess = null
+
+  /**
+   * @type {import('rollup').RollupWatcher}
+   */
+  const watcher = await getWatcher({
+    name: 'electron-main-watcher',
+    configFile: 'configs/vite-main.config.ts',
+    writeBundle() {
+      electronProcess && electronProcess.kill()
+      electronProcess = spawn(electron, ['.'], {
+        stdio: 'inherit',
+        env: Object.assign(process.env, pkg.env), // Why don't work?
+      })
+    },
+  })
+
+  return watcher
+}
+
+/**
+ * @param {import('vite').ViteDevServer} viteDevServer
+ * @returns {Promise<import('rollup').RollupWatcher>}
+ */
+async function watchPreload(viteDevServer) {
+  return getWatcher({
+    name: 'electron-preload-watcher',
+    configFile: 'configs/vite-preload.config.ts',
+    writeBundle() {
+      viteDevServer.ws.send({
+        type: 'full-reload',
+      })
+    },
+  })
+}
+
+// bootstrap
+const viteDevServer = await createServer({ configFile: 'configs/vite-renderer.config.ts' })
+
+await viteDevServer.listen()
+await watchPreload(viteDevServer)
+await watchMain()

scripts/ws.ts

@@ -1,49 +0,0 @@
-/**
- * Ws server side
- * Hot reload from preload script during development
- */
-import WebSocket from 'ws'
-import chalk from 'chalk'
-import pkg from '../package.json'
-
-
-export interface CreateWsServerOptions { }
-
-export interface WssServer {
-  wss: WebSocket.Server
-  instance: WebSocket | null
-}
-
-const TAG = '[ws.ts]'
-
-export function createWsServer(options: CreateWsServerOptions = {}): WssServer {
-  const port = pkg.env.PORT_WS
-  const host = pkg.env.HOST // '127.0.0.1'
-  const wss = new WebSocket.Server({ host, port })
-  const wssInstance: WssServer = { wss, instance: null }
-
-  console.log(TAG, 'Wss run at - ' + chalk.yellow(`ws://${host}:${port}`))
-
-  wss.on('connection', ws => {
-    console.log(TAG, chalk.yellow(`wss.on('connection')`))
-
-    wssInstance.instance = ws
-    ws.on('message', message => {
-      console.log(TAG, `ws.on('message'):`, message.toString())
-    })
-
-    ws.send(formatWsSendData({ cmd: 'message', data: 'connected.' }))
-  })
-
-  wss.on('close', () => {
-    console.log(TAG, chalk.gray(`wss.on('close')`))
-
-    wssInstance.instance = null
-  })
-
-  return wssInstance
-}
-
-export function formatWsSendData(json: { cmd: string, data?: any }) {
-  return JSON.stringify(json)
-}