dev-runner.js 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
  1. 'use strict'
  2. const chalk = require('chalk')
  3. const electron = require('electron')
  4. const path = require('path')
  5. const { say } = require('cfonts')
  6. const { spawn } = require('child_process')
  7. const webpack = require('webpack')
  8. const WebpackDevServer = require('webpack-dev-server')
  9. const webpackHotMiddleware = require('webpack-hot-middleware')
  10. const mainConfig = require('./webpack.main.config')
  11. const rendererConfig = require('./webpack.renderer.config')
  12. let electronProcess = null
  13. let manualRestart = false
  14. let hotMiddleware
  15. function logStats (proc, data) {
  16. let log = ''
  17. log += chalk.yellow.bold(`┏ ${proc} Process ${new Array((19 - proc.length) + 1).join('-')}`)
  18. log += '\n\n'
  19. if (typeof data === 'object') {
  20. data.toString({
  21. colors: true,
  22. chunks: false
  23. }).split(/\r?\n/).forEach(line => {
  24. log += ' ' + line + '\n'
  25. })
  26. } else {
  27. log += ` ${data}\n`
  28. }
  29. log += '\n' + chalk.yellow.bold(`┗ ${new Array(28 + 1).join('-')}`) + '\n'
  30. console.log(log)
  31. }
  32. function startRenderer () {
  33. return new Promise((resolve, reject) => {
  34. rendererConfig.entry.renderer = [path.join(__dirname, 'dev-client')].concat(rendererConfig.entry.renderer)
  35. rendererConfig.mode = 'development'
  36. const compiler = webpack(rendererConfig)
  37. hotMiddleware = webpackHotMiddleware(compiler, {
  38. log: false,
  39. heartbeat: 2500
  40. })
  41. compiler.hooks.compilation.tap('compilation', compilation => {
  42. compilation.hooks.htmlWebpackPluginAfterEmit.tapAsync('html-webpack-plugin-after-emit', (data, cb) => {
  43. hotMiddleware.publish({ action: 'reload' })
  44. cb()
  45. })
  46. })
  47. compiler.hooks.done.tap('done', stats => {
  48. logStats('Renderer', stats)
  49. })
  50. const server = new WebpackDevServer(
  51. compiler,
  52. {
  53. contentBase: path.join(__dirname, '../'),
  54. quiet: true,
  55. before (app, ctx) {
  56. app.use(hotMiddleware)
  57. ctx.middleware.waitUntilValid(() => {
  58. resolve()
  59. })
  60. }
  61. }
  62. )
  63. server.listen(9080)
  64. })
  65. }
  66. function startMain () {
  67. return new Promise((resolve, reject) => {
  68. mainConfig.entry.main = [path.join(__dirname, '../src/main/index.dev.js')].concat(mainConfig.entry.main)
  69. mainConfig.mode = 'development'
  70. const compiler = webpack(mainConfig)
  71. compiler.hooks.watchRun.tapAsync('watch-run', (compilation, done) => {
  72. logStats('Main', chalk.white.bold('compiling...'))
  73. hotMiddleware.publish({ action: 'compiling' })
  74. done()
  75. })
  76. compiler.watch({}, (err, stats) => {
  77. if (err) {
  78. console.log(err)
  79. return
  80. }
  81. logStats('Main', stats)
  82. if (electronProcess && electronProcess.kill) {
  83. manualRestart = true
  84. process.kill(electronProcess.pid)
  85. electronProcess = null
  86. startElectron()
  87. setTimeout(() => {
  88. manualRestart = false
  89. }, 5000)
  90. }
  91. resolve()
  92. })
  93. })
  94. }
  95. function startElectron () {
  96. var args = [
  97. '--inspect=5858',
  98. path.join(__dirname, '../dist/electron/main.js')
  99. ]
  100. // detect yarn or npm and process commandline args accordingly
  101. if (process.env.npm_execpath.endsWith('yarn.js')) {
  102. args = args.concat(process.argv.slice(3))
  103. } else if (process.env.npm_execpath.endsWith('npm-cli.js')) {
  104. args = args.concat(process.argv.slice(2))
  105. }
  106. electronProcess = spawn(electron, args)
  107. electronProcess.stdout.on('data', data => {
  108. electronLog(data, 'blue')
  109. })
  110. electronProcess.stderr.on('data', data => {
  111. electronLog(data, 'red')
  112. })
  113. electronProcess.on('close', () => {
  114. if (!manualRestart) process.exit()
  115. })
  116. }
  117. function electronLog (data, color) {
  118. let log = ''
  119. data = data.toString().split(/\r?\n/)
  120. data.forEach(line => {
  121. log += ` ${line}\n`
  122. })
  123. if (/[0-9A-z]+/.test(log)) {
  124. console.log(
  125. chalk[color].bold('┏ Electron -------------------') +
  126. '\n\n' +
  127. log +
  128. chalk[color].bold('┗ ----------------------------') +
  129. '\n'
  130. )
  131. }
  132. }
  133. function greeting () {
  134. const cols = process.stdout.columns
  135. let text = ''
  136. if (cols > 104) text = 'electron-vue'
  137. else if (cols > 76) text = 'electron-|vue'
  138. else text = false
  139. if (text) {
  140. say(text, {
  141. colors: ['yellow'],
  142. font: 'simple3d',
  143. space: false
  144. })
  145. } else console.log(chalk.yellow.bold('\n electron-vue'))
  146. console.log(chalk.blue(' getting ready...') + '\n')
  147. }
  148. function init () {
  149. greeting()
  150. Promise.all([startRenderer(), startMain()])
  151. .then(() => {
  152. startElectron()
  153. })
  154. .catch(err => {
  155. console.error(err)
  156. })
  157. }
  158. init()