Skip to content

Commit 368a9e4

Browse files
nklaymannklayman
committed
feat(build): add --skipBundle and --legacy args, closes #70, closes #71 
1 parent 82e6124 commit 368a9e4

File tree

3 files changed

+148
-120
lines changed

3 files changed

+148
-120
lines changed

‎__tests__/commands.spec.js

Lines changed: 47 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -199,43 +199,53 @@ describe('build:electron', () => {
199199
expect(mainConfig.resolve.extensions).toEqual(['.js', '.ts'])
200200
})
201201

202-
test('--mode argument is removed from electron-builder args', async () => {
203-
await runCommand('build:electron', {}, {}, [
204-
'--keep1',
205-
'--mode',
206-
'buildMode',
207-
'--keep2'
208-
])
209-
// --mode and buildMode should have been removed, and other args kept
210-
expect(mockYargsParse).toBeCalledWith(['--keep1', '--keep2'])
211-
mockYargsParse.mockClear()
212-
213-
await runCommand('build:electron', {}, {}, [
214-
'--mode',
215-
'buildMode',
216-
'--keep2'
217-
])
218-
// --mode and buildMode should have been removed, and other args kept
219-
expect(mockYargsParse).toBeCalledWith(['--keep2'])
220-
mockYargsParse.mockClear()
221-
222-
await runCommand('build:electron', {}, {}, [
223-
'--keep1',
224-
'--mode',
225-
'buildMode'
226-
])
227-
// --mode and buildMode should have been removed, and other args kept
228-
expect(mockYargsParse).toBeCalledWith(['--keep1'])
229-
mockYargsParse.mockClear()
230-
231-
await runCommand('build:electron', {}, {}, ['--mode', 'buildMode'])
232-
// --mode and buildMode should have been removed
233-
expect(mockYargsParse).toBeCalledWith([])
234-
mockYargsParse.mockClear()
235-
236-
await runCommand('build:electron', {}, {}, ['--keep1', '--keep2'])
237-
// Nothing should be removed
238-
expect(mockYargsParse).toBeCalledWith(['--keep1', '--keep2'])
202+
test.each([['--mode', 'someMode'], ['--legacy'], ['--skipBundle']])(
203+
'%s argument is removed from electron-builder args',
204+
async (...args) => {
205+
await runCommand('build:electron', {}, {}, [
206+
'--keep1',
207+
...args,
208+
'--keep2'
209+
])
210+
// Custom args should have been removed, and other args kept
211+
expect(mockYargsParse).toBeCalledWith(['--keep1', '--keep2'])
212+
mockYargsParse.mockClear()
213+
214+
await runCommand('build:electron', {}, {}, [...args, '--keep2'])
215+
// Custom args should have been removed, and other args kept
216+
expect(mockYargsParse).toBeCalledWith(['--keep2'])
217+
mockYargsParse.mockClear()
218+
219+
await runCommand('build:electron', {}, {}, ['--keep1', ...args])
220+
// Custom args should have been removed, and other args kept
221+
expect(mockYargsParse).toBeCalledWith(['--keep1'])
222+
mockYargsParse.mockClear()
223+
224+
await runCommand('build:electron', {}, {}, args)
225+
// Custom args should have been removed
226+
expect(mockYargsParse).toBeCalledWith([])
227+
mockYargsParse.mockClear()
228+
229+
await runCommand('build:electron', {}, {}, ['--keep1', '--keep2'])
230+
// Nothing should be removed
231+
expect(mockYargsParse).toBeCalledWith(['--keep1', '--keep2'])
232+
}
233+
)
234+
235+
test('Modern mode is enabled by default', async () => {
236+
await runCommand('build:electron')
237+
expect(serviceRun.mock.calls[0][1].modern).toBe(true)
238+
})
239+
240+
test('Modern mode is disabled if --legacy arg is passed', async () => {
241+
await runCommand('build:electron', {}, { legacy: true })
242+
expect(serviceRun.mock.calls[0][1].modern).toBe(false)
243+
})
244+
245+
test('App is not bundled if --skipBundle arg is passed', async () => {
246+
await runCommand('build:electron', {}, { skipBundle: true })
247+
expect(serviceRun).not.toBeCalled()
248+
expect(webpack).not.toBeCalled()
239249
})
240250
})
241251

‎docs/guide/configuration.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,10 @@ module.exports = {
108108
If you decide to add the `@vue/typescript` plugin to your app later on, make sure to re-invoke the generator of VCP-Electron-Builder with `vue invoke electron-builder`. This will automatically insert missing type definitions to your `background.ts` file.
109109
:::
110110

111+
## Bundling Options <Badge text="1.0.0-rc.3+" type="info"/>
112+
113+
By default, the app is built in [modern mode](https://cli.vuejs.org/guide/browser-compatibility.html#modern-mode). To disable this, use the `--legacy` argument in the `build:electron` command. If your app is already bundled and just needs to be built with electron-builder, pass the `--skipBundle` arg.
114+
111115
## Electron's Junk Terminal Output
112116

113117
Electron will sometimes produce a bunch of junk output like so:

‎index.js

Lines changed: 97 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -46,9 +46,14 @@ module.exports = (api, options) => {
4646
// Import the yargs options from electron-builder
4747
const configureBuildCommand = require('electron-builder/out/builder')
4848
.configureBuildCommand
49-
// Prevent mode arg from interfering with electron-builder
50-
const modeIndex = rawArgs.indexOf('--mode')
51-
if (modeIndex !== -1) rawArgs.splice(modeIndex, 2)
49+
// Prevent custom args from interfering with electron-builder
50+
const removeArg = (arg, count) => {
51+
const index = rawArgs.indexOf(arg)
52+
if (index !== -1) rawArgs.splice(index, count)
53+
}
54+
removeArg('--mode', 2)
55+
removeArg('--legacy', 1)
56+
removeArg('--skipBundle', 1)
5257
// Parse the raw arguments using electron-builder yargs config
5358
const builderArgs = yargs
5459
.command(['build', '*'], 'Build', configureBuildCommand)
@@ -67,93 +72,102 @@ module.exports = (api, options) => {
6772
}
6873
// User-defined electron-builder config, overwrites/adds to default config
6974
const userBuildConfig = pluginOptions.builderOptions || {}
70-
// Arguments to be passed to renderer build
71-
const vueArgs = {
72-
_: [],
73-
// For the cli-ui webpack dashboard
74-
dashboard: args.dashboard,
75-
// Make sure files are outputted to proper directory
76-
dest: outputDir + '/bundled',
77-
// Enable modern mode
78-
modern: true
79-
}
80-
const mainConfig = new Config()
81-
// Configure main process webpack config
82-
mainConfig
83-
.mode('production')
84-
.target('electron-main')
85-
.node.set('__dirname', false)
86-
.set('__filename', false)
87-
// Set externals
88-
mainConfig.externals(getExternals(api, pluginOptions))
89-
mainConfig.output
90-
.path(api.resolve(outputDir + '/bundled'))
91-
.filename('background.js')
92-
// Set __static to __dirname (files in public get copied here)
93-
mainConfig
94-
.plugin('define')
95-
.use(webpack.DefinePlugin, [{ __static: '__dirname' }])
96-
mainConfig.plugin('uglify').use(UglifyJSPlugin, [
97-
{
98-
parallel: true
75+
if (args.skipBundle) {
76+
console.log('Not bundling app as --skipBundle was passed')
77+
// Build with electron-builder
78+
buildApp()
79+
} else {
80+
// Arguments to be passed to renderer build
81+
const vueArgs = {
82+
_: [],
83+
// For the cli-ui webpack dashboard
84+
dashboard: args.dashboard,
85+
// Make sure files are outputted to proper directory
86+
dest: outputDir + '/bundled',
87+
// Enable modern mode unless --legacy is passed
88+
modern: !args.legacy
9989
}
100-
])
101-
mainConfig
102-
.plugin('env')
103-
.use(webpack.EnvironmentPlugin, [{ NODE_ENV: 'production' }])
104-
mainConfig.entry('background').add(api.resolve(mainProcessFile))
105-
if (usesTypescript) {
106-
mainConfig.resolve.extensions.merge(['.js', '.ts'])
107-
mainConfig.module
108-
.rule('ts')
109-
.test(/\.ts$/)
110-
.use('ts-loader')
111-
.loader('ts-loader')
112-
.options({ transpileOnly: !mainProcessTypeChecking })
113-
}
114-
// Set the base url so that the app protocol is used
115-
options.baseUrl = './'
116-
console.log('Bundling render process:')
117-
// Build the render process with the custom args
118-
await api.service.run('build', vueArgs)
119-
// Copy fonts to css/fonts. Fixes some issues with static font imports
120-
if (fs.existsSync(api.resolve(outputDir + '/bundled/fonts'))) {
121-
fs.ensureDirSync(api.resolve(outputDir + '/bundled/css/fonts'))
122-
fs.copySync(
123-
api.resolve(outputDir + '/bundled/fonts'),
124-
api.resolve(outputDir + '/bundled/css/fonts')
125-
)
126-
}
127-
// Build the main process into the renderer process output dir
128-
const bundle = webpack(mainProcessChain(mainConfig).toConfig())
129-
console.log('Bundling main process:\n')
130-
bundle.run((err, stats) => {
131-
if (err) {
132-
console.error(err.stack || err)
133-
if (err.details) {
134-
console.error(err.details)
90+
const mainConfig = new Config()
91+
// Configure main process webpack config
92+
mainConfig
93+
.mode('production')
94+
.target('electron-main')
95+
.node.set('__dirname', false)
96+
.set('__filename', false)
97+
// Set externals
98+
mainConfig.externals(getExternals(api, pluginOptions))
99+
mainConfig.output
100+
.path(api.resolve(outputDir + '/bundled'))
101+
.filename('background.js')
102+
// Set __static to __dirname (files in public get copied here)
103+
mainConfig
104+
.plugin('define')
105+
.use(webpack.DefinePlugin, [{ __static: '__dirname' }])
106+
mainConfig.plugin('uglify').use(UglifyJSPlugin, [
107+
{
108+
parallel: true
135109
}
136-
process.exit(1)
110+
])
111+
mainConfig
112+
.plugin('env')
113+
.use(webpack.EnvironmentPlugin, [{ NODE_ENV: 'production' }])
114+
mainConfig.entry('background').add(api.resolve(mainProcessFile))
115+
if (usesTypescript) {
116+
mainConfig.resolve.extensions.merge(['.js', '.ts'])
117+
mainConfig.module
118+
.rule('ts')
119+
.test(/\.ts$/)
120+
.use('ts-loader')
121+
.loader('ts-loader')
122+
.options({ transpileOnly: !mainProcessTypeChecking })
123+
}
124+
// Set the base url so that the app protocol is used
125+
options.baseUrl = './'
126+
console.log('Bundling render process:')
127+
// Build the render process with the custom args
128+
await api.service.run('build', vueArgs)
129+
// Copy fonts to css/fonts. Fixes some issues with static font imports
130+
if (fs.existsSync(api.resolve(outputDir + '/bundled/fonts'))) {
131+
fs.ensureDirSync(api.resolve(outputDir + '/bundled/css/fonts'))
132+
fs.copySync(
133+
api.resolve(outputDir + '/bundled/fonts'),
134+
api.resolve(outputDir + '/bundled/css/fonts')
135+
)
137136
}
137+
// Build the main process into the renderer process output dir
138+
const bundle = webpack(mainProcessChain(mainConfig).toConfig())
139+
console.log('Bundling main process:\n')
140+
bundle.run((err, stats) => {
141+
if (err) {
142+
console.error(err.stack || err)
143+
if (err.details) {
144+
console.error(err.details)
145+
}
146+
process.exit(1)
147+
}
138148

139-
const info = stats.toJson()
149+
const info = stats.toJson()
140150

141-
if (stats.hasErrors()) {
142-
console.error(info.errors)
143-
process.exit(1)
144-
}
151+
if (stats.hasErrors()) {
152+
console.error(info.errors)
153+
process.exit(1)
154+
}
145155

146-
if (stats.hasWarnings()) {
147-
console.warn(info.warnings)
148-
}
156+
if (stats.hasWarnings()) {
157+
console.warn(info.warnings)
158+
}
149159

150-
console.log(
151-
stats.toString({
152-
chunks: false,
153-
colors: true
154-
})
155-
)
160+
console.log(
161+
stats.toString({
162+
chunks: false,
163+
colors: true
164+
})
165+
)
156166

167+
buildApp()
168+
})
169+
}
170+
function buildApp () {
157171
console.log('\nBuilding app with electron-builder:\n')
158172
// Build the app using electron builder
159173
builder
@@ -174,7 +188,7 @@ module.exports = (api, options) => {
174188
// handle error
175189
throw err
176190
})
177-
})
191+
}
178192
}
179193
)
180194
api.registerCommand(

0 commit comments

Comments
 (0)