Skip to content

Commit 2b0b4c8

Browse files
arnaugiraltarnaugiralt
authored
Merge pull request #70 from cloudblue/feat/make-vite-config-aware-of-mode
Make defineExtensionConfig aware of Vite's mode
2 parents 0e39a84 + a3787f4 commit 2b0b4c8

File tree

2 files changed

+106
-45
lines changed

2 files changed

+106
-45
lines changed

‎tools/build/vite/index.js

Lines changed: 56 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,17 @@
1+
/* eslint-env node */
12
import { fileURLToPath } from 'node:url';
23
import { readdirSync } from 'node:fs';
34
import { resolve } from 'node:path';
45

56
import flattenHtmlPagesDirectoryPlugin from './flatten-html-pages-directory';
67

8+
const checkIfIsProduction = (mode) => {
9+
if (mode) return mode === 'production';
10+
if (process.env.NODE_ENV) return process.env.NODE_ENV === 'production';
11+
12+
return false;
13+
};
14+
715
/**
816
* Creates a valid vite config set up for a Connect extension that uses Vite + Vue
917
*
@@ -14,63 +22,72 @@ import flattenHtmlPagesDirectoryPlugin from './flatten-html-pages-directory';
1422
* @param {object} config.vuePlugin - '@vitejs/vue' plugin instance
1523
* @param {object} viteOptions - your custom vite config options
1624
*
17-
* @returns {object} - Valid vite config set up for a connect extension
25+
* @returns {function({mode: ('development'|'production')}): {resolve: *&{alias: *&{"~": string}}, build: *&{minify: string|boolean, emptyOutDir: boolean, sourcemap, rollupOptions: *&{output: *&{manualChunks(*): (string|undefined), format: string, dir: *}, input: {}}, outDir: *}, plugins, root: *, base: string}} - Valid vite config set up for a connect extension
1826
*/
19-
export const defineExtensionConfig = (config, viteOptions = {}) => {
20-
const { srcDir, srcUrl, outputDir, vuePlugin } = config;
27+
export const defineExtensionConfig =
28+
(config, viteOptions = {}) =>
29+
({ mode }) => {
30+
const { srcDir, srcUrl, outputDir, vuePlugin } = config;
31+
32+
if (!srcDir) throw new Error('"srcDir" is required');
33+
if (!outputDir) throw new Error('"outputDir" is required');
34+
if (!vuePlugin) throw new Error('"vuePlugin" is required');
35+
if (!srcUrl) throw new Error('"srcUrl" is required');
2136

22-
if (!srcDir) throw new Error('"srcDir" is required');
23-
if (!outputDir) throw new Error('"outputDir" is required');
24-
if (!vuePlugin) throw new Error('"vuePlugin" is required');
25-
if (!srcUrl) throw new Error('"srcUrl" is required');
37+
const isProduction = checkIfIsProduction(mode);
2638

27-
return {
28-
...viteOptions,
39+
return {
40+
...viteOptions,
2941

30-
resolve: {
31-
...viteOptions.resolve,
42+
resolve: {
43+
...viteOptions.resolve,
3244

33-
alias: {
34-
...viteOptions.resolve?.alias,
45+
alias: {
46+
...viteOptions.resolve?.alias,
3547

36-
'~': fileURLToPath(srcUrl),
48+
'~': fileURLToPath(srcUrl),
49+
},
3750
},
38-
},
3951

40-
plugins: [vuePlugin, flattenHtmlPagesDirectoryPlugin, ...(viteOptions.plugins || [])],
52+
plugins: [vuePlugin, flattenHtmlPagesDirectoryPlugin, ...(viteOptions.plugins || [])],
53+
54+
root: srcDir,
55+
base: '/static',
4156

42-
root: srcDir,
43-
base: '/static',
57+
build: {
58+
// Enable minification on production builds
59+
minify: isProduction ? 'esbuild' : false,
60+
// Enable sourcemaps on non-production builds
61+
sourcemap: !isProduction,
4462

45-
build: {
46-
...viteOptions.build,
63+
...viteOptions.build,
4764

48-
outDir: outputDir,
49-
emptyOutDir: true,
65+
outDir: outputDir,
66+
emptyOutDir: true,
5067

51-
rollupOptions: {
52-
...viteOptions.build?.rollupOptions,
68+
rollupOptions: {
69+
...viteOptions.build?.rollupOptions,
5370

54-
// Load all pages in {{srcDir}}/pages/{{pageName}}/index.html as entrypoints
55-
input: readdirSync(resolve(srcDir, 'pages')).reduce((entryPoints, pageName) => {
56-
entryPoints[pageName] = resolve(srcDir, 'pages/', pageName, 'index.html');
71+
// Load all pages in {{srcDir}}/pages/{{pageName}}/index.html as entrypoints
72+
input: readdirSync(resolve(srcDir, 'pages')).reduce((entryPoints, pageName) => {
73+
entryPoints[pageName] = resolve(srcDir, 'pages/', pageName, 'index.html');
5774

58-
return entryPoints;
59-
}, {}),
75+
return entryPoints;
76+
}, {}),
6077

61-
output: {
62-
...viteOptions.build?.rollupOptions?.output,
78+
output: {
79+
...viteOptions.build?.rollupOptions?.output,
6380

64-
format: 'es',
65-
dir: outputDir,
81+
format: 'es',
82+
dir: outputDir,
6683

67-
// Split node_modules into a "vendor" chunk, and @cloudblueconnect modules into a "connect" chunk
68-
manualChunks(id) {
69-
if (id.includes('@cloudblueconnect')) return 'connect';
70-
if (id.includes('node_modules')) return 'vendor';
84+
// Split node_modules into a "vendor" chunk, and @cloudblueconnect modules into a "connect" chunk
85+
manualChunks(id) {
86+
if (id.includes('@cloudblueconnect')) return 'connect';
87+
if (id.includes('node_modules')) return 'vendor';
88+
},
7189
},
7290
},
7391
},
74-
},
92+
};
7593
};
76-
};

‎tools/build/vite/index.spec.js

Lines changed: 50 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ describe('#defineExtensionConfig function', () => {
6363
let error;
6464

6565
try {
66-
defineExtensionConfig(config);
66+
defineExtensionConfig(config)({ mode: 'production' });
6767
} catch (e) {
6868
error = e;
6969
}
@@ -72,15 +72,15 @@ describe('#defineExtensionConfig function', () => {
7272
});
7373
});
7474

75-
it('returns the base config', () => {
75+
it('returns the base config for production mode', () => {
7676
const config = {
7777
srcDir: '/my/source/dir',
7878
srcUrl: 'file://my/source/dir',
7979
outputDir: '/my/output/dir',
8080
vuePlugin: { name: 'vuepluginstub' },
8181
};
8282

83-
result = defineExtensionConfig(config);
83+
result = defineExtensionConfig(config)({ mode: 'production' });
8484

8585
expect(result).toEqual({
8686
resolve: {
@@ -92,6 +92,46 @@ describe('#defineExtensionConfig function', () => {
9292
root: '/my/source/dir',
9393
base: '/static',
9494
build: {
95+
minify: 'esbuild',
96+
sourcemap: false,
97+
outDir: '/my/output/dir',
98+
emptyOutDir: true,
99+
rollupOptions: {
100+
input: {
101+
fsReaddirSyncStub: 'pathResolveStub',
102+
},
103+
output: {
104+
format: 'es',
105+
dir: '/my/output/dir',
106+
manualChunks: expect.any(Function),
107+
},
108+
},
109+
},
110+
});
111+
});
112+
113+
it('returns the base config for development mode', () => {
114+
const config = {
115+
srcDir: '/my/source/dir',
116+
srcUrl: 'file://my/source/dir',
117+
outputDir: '/my/output/dir',
118+
vuePlugin: { name: 'vuepluginstub' },
119+
};
120+
121+
result = defineExtensionConfig(config)({ mode: 'development' });
122+
123+
expect(result).toEqual({
124+
resolve: {
125+
alias: {
126+
'~': 'urlFileUrlToPathStub',
127+
},
128+
},
129+
plugins: [{ name: 'vuepluginstub' }, 'flattenHtmlPagesDirectoryPluginStub'],
130+
root: '/my/source/dir',
131+
base: '/static',
132+
build: {
133+
minify: false,
134+
sourcemap: true,
95135
outDir: '/my/output/dir',
96136
emptyOutDir: true,
97137
rollupOptions: {
@@ -126,6 +166,7 @@ describe('#defineExtensionConfig function', () => {
126166
},
127167
plugins: ['other-vite-plugin'],
128168
build: {
169+
minify: 'custom-value-that-ignores-mode',
129170
someProperty: 'someValue',
130171
rollupOptions: {
131172
bar: 'baz',
@@ -136,7 +177,7 @@ describe('#defineExtensionConfig function', () => {
136177
},
137178
};
138179

139-
result = defineExtensionConfig(config, customViteConfig);
180+
result = defineExtensionConfig(config, customViteConfig)({ mode: 'production' });
140181

141182
expect(result).toEqual({
142183
foo: 'bar',
@@ -155,6 +196,8 @@ describe('#defineExtensionConfig function', () => {
155196
root: '/my/source/dir',
156197
base: '/static',
157198
build: {
199+
minify: 'custom-value-that-ignores-mode',
200+
sourcemap: false,
158201
someProperty: 'someValue',
159202
outDir: '/my/output/dir',
160203
emptyOutDir: true,
@@ -182,7 +225,7 @@ describe('#defineExtensionConfig function', () => {
182225
vuePlugin: { name: 'vuepluginstub' },
183226
};
184227

185-
result = defineExtensionConfig(config);
228+
result = defineExtensionConfig(config)({ mode: 'production' });
186229

187230
expect(resolve).toHaveBeenCalledWith('/my/source/dir', 'pages');
188231
expect(readdirSync).toHaveBeenCalledWith('pathResolveStub');
@@ -215,7 +258,8 @@ describe('#defineExtensionConfig function', () => {
215258
outputDir: '/my/output/dir',
216259
vuePlugin: { name: 'vuepluginstub' },
217260
};
218-
const manualChunksFn = defineExtensionConfig(config).build.rollupOptions.output.manualChunks;
261+
const manualChunksFn = defineExtensionConfig(config)({ mode: 'production' }).build
262+
.rollupOptions.output.manualChunks;
219263

220264
result = manualChunksFn(moduleId);
221265

0 commit comments

Comments
 (0)