feat(build): use modern mode for builds

nklayman · nklayman · commit 4bed938d0890 · 2018-06-26T12:48:51.000-07:00
diff --git a/generator/index.js b/generator/index.js
@@ -1,5 +1,22 @@
+const fs = require('fs')
+
 module.exports = api => {
   api.render('./template')
+  //   Read existing index.html and .gitignore
+  let index = fs.readFileSync(api.resolve('./public/index.html'), 'utf8')
+  let gitignore = fs.readFileSync(api.resolve('./.gitignore'), 'utf8')
+  //   Add base element inside <head> tag
+  index = index.replace(
+    /^\s*?<head.*?>\s*?$/m,
+    `<head>\n    <% if (BASE_URL === './') { %><base href="app://./" /><% } %>`
+  )
+  //   Add /dist_electron to gitignore
+  gitignore = gitignore + '\n#Electron-builder output\n/dist_electron'
+  api.onCreateComplete(() => {
+    //   Write updated files
+    fs.writeFileSync(api.resolve('./public/index.html'), index)
+    fs.writeFileSync(api.resolve('./.gitignore'), gitignore)
+  })
   api.extendPackage({
     scripts: {
       'build:electron': 'vue-cli-service build:electron',
diff --git a/generator/template/_gitignore b/generator/template/_gitignore
diff --git a/generator/template/src/background.js b/generator/template/src/background.js
@@ -1,14 +1,17 @@
 'use strict'
 
-import { app, BrowserWindow } from 'electron'
+import { app, protocol, BrowserWindow } from 'electron'
 import * as path from 'path'
 import { format as formatUrl } from 'url'
+import createProtocol from 'vue-cli-plugin-electron-builder/lib/createProtocol'
 
 const isDevelopment = process.env.NODE_ENV !== 'production'
 
 // global reference to mainWindow (necessary to prevent window from being garbage collected)
 let mainWindow
 
+// Standard scheme must be registered before the app is ready
+protocol.registerStandardSchemes(['app'], { secure: true })
 function createMainWindow () {
   const window = new BrowserWindow()
 
@@ -17,6 +20,7 @@ function createMainWindow () {
     // Load the url of the dev server if in development mode
     window.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
   } else {
+    createProtocol('app')
     //   Load the index.html when not in development
     window.loadURL(
       formatUrl({
diff --git a/index.js b/index.js
@@ -71,7 +71,9 @@ module.exports = (api, options) => {
         // For the cli-ui webpack dashboard
         dashboard: args.dashboard,
         // Make sure files are outputted to proper directory
-        dest: outputDir + '/bundled'
+        dest: outputDir + '/bundled',
+        // Enable modern mode
+        modern: true
       }
       const mainConfig = new Config()
       //   Configure main process webpack config
@@ -105,7 +107,8 @@ module.exports = (api, options) => {
           .loader('ts-loader')
           .options({ transpileOnly: !mainProcessTypeChecking })
       }
-
+      //   Set the base url so that the app protocol is used
+      options.baseUrl = './'
       console.log('Bundling render process:')
       //   Build the render process with the custom args and config
       await buildRenderer(vueArgs, api, options, rendererConfig)
@@ -253,7 +256,6 @@ module.exports = (api, options) => {
             colors: true
           })
         )
-
         console.log('\nStarting development server:\n')
         // Run the serve command with custom webpack config
         serve(
diff --git a/lib/createProtocol.js b/lib/createProtocol.js
@@ -0,0 +1,41 @@
+import { protocol } from 'electron'
+import * as path from 'path'
+import { readFile } from 'fs'
+import { URL } from 'url'
+
+export default scheme => {
+  protocol.registerBufferProtocol(
+    scheme,
+    (request, respond) => {
+      let pathName = new URL(request.url).pathname
+      pathName = decodeURI(pathName) // Needed in case URL contains spaces
+
+      readFile(path.join(__dirname, pathName), (error, data) => {
+        if (error) {
+          console.error(`Failed to register ${scheme} protocol`, error)
+        }
+        let extension = path.extname(pathName).toLowerCase()
+        let mimeType = ''
+
+        if (extension === '.js') {
+          mimeType = 'text/javascript'
+        } else if (extension === '.html') {
+          mimeType = 'text/html'
+        } else if (extension === '.css') {
+          mimeType = 'text/css'
+        } else if (extension === '.svg' || extension === '.svgz') {
+          mimeType = 'image/svg+xml'
+        } else if (extension === '.json') {
+          mimeType = 'application/json'
+        }
+
+        respond({ mimeType, data })
+      })
+    },
+    error => {
+      if (error) {
+        console.error(`Failed to register ${scheme} protocol`, error)
+      }
+    }
+  )
+}
