refactor: build script

script/build-main.ts

@@ -1,34 +1,26 @@
-/**
+import path from 'path'
- * Electron main process package script
+import { watch, rollup, OutputOptions } from 'rollup'
- */
-import { join } from 'path'
 import { spawn, ChildProcess } from 'child_process'
-import { watch, rollup, RollupOptions, OutputOptions } from 'rollup'
+import electron from 'electron'
-import nodeResolve from '@rollup/plugin-node-resolve'
-import commonjs from '@rollup/plugin-commonjs'
-import typescript from '@rollup/plugin-typescript'
-import alias from '@rollup/plugin-alias'
-import json from '@rollup/plugin-json'
-import { builtins } from './utils'
 import minimist from 'minimist'
 import chalk from 'chalk'
 import ora from 'ora'
-import electron from 'electron'
+import { waitOn, getEnv } from './utils'
-import dotenv from 'dotenv'
+import options from './rollup.config'
-import { waitOn } from './utils'
 import { main } from '../package.json'
 
-// Inject some environment variables from ".env"
+const env = getEnv()
-dotenv.config({ path: join(__dirname, '../.env') })
-
 const argv = minimist(process.argv.slice(2))
-const opts = configFactory(argv.env)
+const opt = options({ proc: 'main', env: argv.env })
 const TAG = '[build-main.ts]'
-const spinner = ora(`${TAG} Electron build...`)
+const spinner = ora(`${TAG} Electron main build...`)
 
+; (async () => {
   if (argv.watch) {
-  waitOn({ port: process.env.PORT as string }).then(msg => {
+    // Wait on vite server launched
-    const watcher = watch(opts)
+    await waitOn({ port: env.PORT as string })
+
+    const watcher = watch(opt)
     let child: ChildProcess
     watcher.on('change', filename => {
       const log = chalk.green(`change -- ${filename}`)
@@ -38,59 +30,26 @@ if (argv.watch) {
       if (ev.code === 'END') {
         if (child) child.kill()
         child = spawn(
-          electron as any,
+          electron as unknown as string,
-          [join(__dirname, `../${main}`)],
+          [path.join(__dirname, `../${main}`)],
-          {
+          { stdio: 'inherit' },
-            stdio: 'inherit',
+        )
-            env: Object.assign(process.env, { NODE_ENV: argv.env }),
-          })
       } else if (ev.code === 'ERROR') {
         console.log(ev.error)
       }
     })
-  })
   } else {
     spinner.start()
-  rollup(opts)
+    try {
-    .then(build => {
+      const build = await rollup(opt)
-      spinner.stop()
+      await build.write(opt.output as OutputOptions)
-      console.log(TAG, chalk.green('Electron build successed.'))
+      spinner.succeed()
-      build.write(opts.output as OutputOptions)
+      process.exit()
-    })
+    } catch (error) {
-    .catch(error => {
-      spinner.stop()
       console.log(`\n${TAG} ${chalk.red('构建报错')}\n`, error, '\n')
-    })
+      spinner.fail()
+      process.exit(1)
     }
+  }
+})();
 
-function configFactory(env = 'production') {
-  const options: RollupOptions = {
-    input: join(__dirname, '../src/main/index.ts'),
-    output: {
-      file: join(__dirname, '../dist/main/index.js'),
-      format: 'cjs',
-      name: 'ElectronMainBundle',
-      sourcemap: true,
-    },
-    plugins: [
-      nodeResolve(),
-      commonjs(),
-      json(),
-      typescript(),
-      alias({
-        entries: [
-          { find: '@render', replacement: join(__dirname, '../src/render') },
-          { find: '@main', replacement: join(__dirname, '../src/main') },
-          { find: '@src', replacement: join(__dirname, '../src') },
-          { find: '@root', replacement: join(__dirname, '..') },
-        ]
-      }),
-    ],
-    external: [
-      ...builtins(),
-      'electron',
-    ],
-  }
-
-  return options
-}

script/build-preload.ts

@@ -1,46 +1,36 @@
-/**
+import { watch, rollup, OutputOptions } from 'rollup'
- * Electron main preload package script
- */
-import { join } from 'path'
-import { watch, rollup, RollupOptions, OutputOptions } from 'rollup'
-import { builtins } from './utils'
 import minimist from 'minimist'
 import chalk from 'chalk'
+import ora from 'ora'
+import options from './rollup.config'
 
 const argv = minimist(process.argv.slice(2))
-const opts = configFactory(argv.env)
+const opt = options({ proc: 'preload', env: argv.env })
 const TAG = '[build-preload.ts]'
+const spinner = ora(`${TAG} Electron preload build...`)
 
+; (async () => {
   if (argv.watch) {
-  const watcher = watch(opts)
+    const watcher = watch(opt)
     watcher.on('change', filename => {
       const log = chalk.yellow(`change -- ${filename}`)
       console.log(TAG, log)
+
+      /**
+       * @todo Hot reload render process !!!
+       */
     })
   } else {
-  rollup(opts)
+    spinner.start()
-    .then(build => {
+    try {
-      console.log(TAG, chalk.yellow('"preload/index.js" built.'))
+      const build = await rollup(opt)
-      build.write(opts.output as OutputOptions)
+      await build.write(opt.output as OutputOptions)
-    })
+      spinner.succeed()
-    .catch(error => {
+      process.exit()
+    } catch (error) {
       console.log(`\n${TAG} ${chalk.red('构建报错')}\n`, error, '\n')
-    })
+      spinner.fail()
+      process.exit(1)
     }
-
-function configFactory(env = 'production') {
-  const options: RollupOptions = {
-    input: join(__dirname, '../src/preload/index.js'),
-    output: {
-      file: join(__dirname, '../dist/preload/index.js'),
-      format: 'iife',
-    },
-    plugins: [],
-    external: [
-      ...builtins(),
-      'electron',
-    ],
-  }
-
-  return options
   }
+})();

script/rollup.config.ts

@@ -0,0 +1,64 @@
+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, getEnv } 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({ ...getEnv(), 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
+}

script/utils.ts

@@ -1,10 +1,14 @@
+import fs from 'fs'
+import path from 'path'
 import { builtinModules } from 'module'
 import { get } from 'http'
 import { green } from 'chalk'
+import { Plugin } from 'rollup'
+import { parse as parseEnv } from 'dotenv'
 
 /** 轮询监听 vite 启动 */
 export function waitOn(arg0: { port: string | number; interval?: number; }) {
-  return new Promise(resolve => {
+  return new Promise<number | undefined>(resolve => {
     const { port, interval = 149 } = arg0
     const url = `http://localhost:${port}`
     let counter = 0
@@ -22,3 +26,26 @@ export function waitOn(arg0: { port: string | number; interval?: number; }) {
 
 /** node.js builtins module */
 export const builtins = () => builtinModules.filter(x => !/^_|^(internal|v8|node-inspect)\/|\//.test(x))
+
+/**
+ * @todo
+ * typescript with esbuild
+ */
+export function typescript(): Plugin {
+  return {
+    name: 'cxmh:rollup-typescript-esbuild',
+  }
+}
+
+export function getEnv(): Record<string, string> {
+  try {
+    if (getEnv.env) {
+      return getEnv.env
+    }
+    const env = parseEnv(fs.readFileSync(path.join(process.cwd(), '.env')))
+    return getEnv.env = env
+  } catch (error) {
+    return {}
+  }
+}
+getEnv.env = undefined as (Record<string, string> | undefined) // Just fix ts check