[skip ci] feat(build): add support for custom output dir (--dest)

Author: nklayman

__tests__/checkLogs.helper.js

@@ -4,9 +4,7 @@ module.exports = async ({ client, projectPath, projectName, mode }) => {
   const isWin = process.platform === 'win32'
   const isBuild = mode === 'build'
   const outputPath = projectPath(
-    `dist_electron/${
-      isWin ? 'win' : 'linux'
-    }-unpacked/resources/app.asar/dist_electron/bundled`
+    `dist_electron/${isWin ? 'win' : 'linux'}-unpacked/resources/app.asar`
   )
 
   await client.getRenderProcessLogs().then(logs => {

__tests__/commands.spec.js

@@ -121,7 +121,7 @@ describe('build:electron', () => {
     )
   })
 
-  test('custom output dir is used if provided', async () => {
+  test('custom output dir is used if set in vue.config.js', async () => {
     await runCommand('build:electron', {
       pluginOptions: {
         electronBuilder: {
@@ -141,6 +141,20 @@ describe('build:electron', () => {
     )
   })
 
+  test('custom output dir is used if dest arg is passed', async () => {
+    await runCommand('build:electron', {}, { dest: 'output' })
+
+    const mainConfig = webpack.mock.calls[0][0]
+    //   Main config output is correct
+    expect(mainConfig.output.path).toBe('projectPath/output/bundled')
+    // cli-service build output is correct
+    expect(serviceRun.mock.calls[0][1].dest).toBe('output/bundled')
+    //   Electron-builder output is correct
+    expect(builder.build.mock.calls[0][0].config.directories.output).toBe(
+      'output'
+    )
+  })
+
   test('Custom main process webpack config is used if provided', async () => {
     await runCommand('build:electron', {
       pluginOptions: {
@@ -181,14 +195,14 @@ describe('build:electron', () => {
     fs.existsSync.mockReturnValueOnce(true)
     await runCommand('build:electron')
     // css/fonts folder was created
-    expect(fs.ensureDirSync.mock.calls[0][0]).toBe(
+    expect(fs.ensureDirSync.mock.calls[1][0]).toBe(
       'projectPath/dist_electron/bundled/css/fonts'
     )
     // fonts was copied to css/fonts
-    expect(fs.copySync.mock.calls[0][0]).toBe(
+    expect(fs.copySync.mock.calls[1][0]).toBe(
       'projectPath/dist_electron/bundled/fonts'
     )
-    expect(fs.copySync.mock.calls[0][1]).toBe(
+    expect(fs.copySync.mock.calls[1][1]).toBe(
       'projectPath/dist_electron/bundled/css/fonts'
     )
   })
@@ -201,38 +215,36 @@ describe('build:electron', () => {
     expect(mainConfig.resolve.extensions).toEqual(['.js', '.ts'])
   })
 
-  test.each([['--mode', 'someMode'], ['--legacy'], ['--skipBundle']])(
-    '%s argument is removed from electron-builder args',
-    async (...args) => {
-      await runCommand('build:electron', {}, {}, [
-        '--keep1',
-        ...args,
-        '--keep2'
-      ])
-      // Custom args should have been removed, and other args kept
-      expect(mockYargsParse).toBeCalledWith(['--keep1', '--keep2'])
-      mockYargsParse.mockClear()
-
-      await runCommand('build:electron', {}, {}, [...args, '--keep2'])
-      // Custom args should have been removed, and other args kept
-      expect(mockYargsParse).toBeCalledWith(['--keep2'])
-      mockYargsParse.mockClear()
-
-      await runCommand('build:electron', {}, {}, ['--keep1', ...args])
-      // Custom args should have been removed, and other args kept
-      expect(mockYargsParse).toBeCalledWith(['--keep1'])
-      mockYargsParse.mockClear()
-
-      await runCommand('build:electron', {}, {}, args)
-      // Custom args should have been removed
-      expect(mockYargsParse).toBeCalledWith([])
-      mockYargsParse.mockClear()
-
-      await runCommand('build:electron', {}, {}, ['--keep1', '--keep2'])
-      // Nothing should be removed
-      expect(mockYargsParse).toBeCalledWith(['--keep1', '--keep2'])
-    }
-  )
+  test.each([
+    ['--mode', 'someMode'],
+    ['--legacy'],
+    ['--skipBundle'],
+    ['--dest', 'output']
+  ])('%s argument is removed from electron-builder args', async (...args) => {
+    await runCommand('build:electron', {}, {}, ['--keep1', ...args, '--keep2'])
+    // Custom args should have been removed, and other args kept
+    expect(mockYargsParse).toBeCalledWith(['--keep1', '--keep2'])
+    mockYargsParse.mockClear()
+
+    await runCommand('build:electron', {}, {}, [...args, '--keep2'])
+    // Custom args should have been removed, and other args kept
+    expect(mockYargsParse).toBeCalledWith(['--keep2'])
+    mockYargsParse.mockClear()
+
+    await runCommand('build:electron', {}, {}, ['--keep1', ...args])
+    // Custom args should have been removed, and other args kept
+    expect(mockYargsParse).toBeCalledWith(['--keep1'])
+    mockYargsParse.mockClear()
+
+    await runCommand('build:electron', {}, {}, args)
+    // Custom args should have been removed
+    expect(mockYargsParse).toBeCalledWith([])
+    mockYargsParse.mockClear()
+
+    await runCommand('build:electron', {}, {}, ['--keep1', '--keep2'])
+    // Nothing should be removed
+    expect(mockYargsParse).toBeCalledWith(['--keep1', '--keep2'])
+  })
 
   test('Modern mode is enabled by default', async () => {
     await runCommand('build:electron')
@@ -298,7 +310,7 @@ describe('serve:electron', () => {
     )
   })
 
-  test('custom output dir is used if provided', async () => {
+  test('custom output dir is used if set in vue.config.js', async () => {
     await runCommand('serve:electron', {
       pluginOptions: {
         electronBuilder: {

docs/guide/configuration.md

@@ -70,9 +70,9 @@ module.exports = {
 
 ## Changing the Output Directory
 
-If you don't want your files outputted into dist_electron, you can choose a custom folder in vue-cli-plugin-electron-builder's plugin options.
+If you don't want your files outputted into dist_electron, you can choose a custom folder in vue-cli-plugin-electron-builder's plugin options. If you are using `v1.0.0-rc.4` or later, you can use the `--dest` argument to change the output dir as well.
 
-**Note: after changing this, you MUST update the main field of your `package.json` to `[new dir]/bundled/background.js`. It is also recommended to add the new directory to your .gitignore file.**
+**Note: If you are using version 1.0.0-rc.3 or lower, after changing this, you MUST update the main field of your `package.json` to `[new dir]/bundled/background.js`. It is also recommended to add the new directory to your .gitignore file.**
 
 ```javascript
 // vue.config.js

generator/index.js

@@ -129,6 +129,6 @@ if (isDevelopment) {
     devDependencies: {
       electron: '^2.0.2'
     },
-    main: 'dist_electron/bundled/background.js'
+    main: 'background.js'
   })
 }

index.js

@@ -15,7 +15,6 @@ module.exports = (api, options) => {
   const usesTypescript = pluginOptions.disableMainProcessTypescript
     ? false
     : api.hasPlugin('typescript')
-  const outputDir = pluginOptions.outputDir || 'dist_electron'
   const mainProcessFile =
     pluginOptions.mainProcessFile ||
     (usesTypescript ? 'src/background.ts' : 'src/background.js')
@@ -51,22 +50,21 @@ module.exports = (api, options) => {
         if (index !== -1) rawArgs.splice(index, count)
       }
       removeArg('--mode', 2)
+      removeArg('--dest', 2)
       removeArg('--legacy', 1)
       removeArg('--skipBundle', 1)
       // Parse the raw arguments using electron-builder yargs config
       const builderArgs = yargs
         .command(['build', '*'], 'Build', configureBuildCommand)
         .parse(rawArgs)
       //   Base config used in electron-builder build
+      const outputDir = args.dest || pluginOptions.outputDir || 'dist_electron'
       const defaultBuildConfig = {
         directories: {
-          output: outputDir
+          output: outputDir,
+          app: `${outputDir}/bundled`
         },
-        files: [
-          outputDir + '/bundled/**/*',
-          'node_modules/**/*',
-          'package.json'
-        ],
+        files: ['**'],
         extends: null
       }
       //   User-defined electron-builder config, overwrites/adds to default config
@@ -91,6 +89,13 @@ module.exports = (api, options) => {
         console.log('Bundling render process:')
         //   Build the render process with the custom args
         await api.service.run('build', vueArgs)
+        // Copy package.json to output dir
+        fs.copySync(
+          api.resolve('./package.json'),
+          `${outputDir}/bundled/package.json`
+        )
+        // Prevent electron-builder from installing app deps
+        fs.ensureDirSync(`${outputDir}/bundled/node_modules`)
         //   Copy fonts to css/fonts. Fixes some issues with static font imports
         if (fs.existsSync(api.resolve(outputDir + '/bundled/fonts'))) {
           fs.ensureDirSync(api.resolve(outputDir + '/bundled/css/fonts'))
@@ -188,6 +193,7 @@ module.exports = (api, options) => {
         // Use dashboard if called from ui
         dashboard: args.dashboard
       })
+      const outputDir = pluginOptions.outputDir || 'dist_electron'
 
       // Copy package.json so electron can detect app's name
       fs.copySync(api.resolve('./package.json'), `${outputDir}/package.json`)