Skip to content

Commit a9d5951

Browse files
swashataswashata
committed
feat: new project config compileNodeModules
Configure how node_modules is compiled during development and production mode. By default it will be compiled both in dev and prod. However, this behavior can be changed now.
1 parent 32954a6 commit a9d5951

File tree

6 files changed

+68
-87
lines changed

6 files changed

+68
-87
lines changed

‎packages/scripts/__tests__/config/WebpackConfigHelper.spec.ts‎

Lines changed: 29 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,11 @@ import {
1818
const currentDate: Date = new Date('2018-01-01T12:00:00');
1919
const realDate = Date;
2020

21+
declare const expect: jest.Expect;
22+
2123
beforeAll(() => {
2224
// @ts-ignore
25+
// eslint-disable-next-line new-cap
2326
global.Date = jest.fn(() => new realDate(currentDate.toISOString()));
2427
Object.assign(Date, realDate);
2528
});
@@ -57,8 +60,8 @@ describe('WebpackConfigHelper', () => {
5760
Object.keys(entry).forEach(key => {
5861
expect(Array.isArray(entry[key])).toBeTruthy();
5962
const hotClient = entry[key][0];
60-
expect(hotClient).toMatch(/^webpack\-hot\-middleware/);
61-
expect(hotClient).toMatch(/name\=config1/);
63+
expect(hotClient).toMatch(/^webpack-hot-middleware/);
64+
expect(hotClient).toMatch(/name=config1/);
6265
});
6366
});
6467
test('does not have webpack hot client but publicPath wntrypoint when isDev != true', () => {
@@ -71,9 +74,7 @@ describe('WebpackConfigHelper', () => {
7174
const entry = cwc.getEntry();
7275
Object.keys(entry).forEach(key => {
7376
expect(Array.isArray(entry[key])).toBeTruthy();
74-
expect(entry[key].pop()).not.toMatch(
75-
/^webpack\-hot\-middleware/
76-
);
77+
expect(entry[key].pop()).not.toMatch(/^webpack-hot-middleware/);
7778
expect(entry[key][0]).toBe(`@wpackio/entrypoint/lib/index`);
7879
});
7980
});
@@ -142,10 +143,7 @@ describe('WebpackConfigHelper', () => {
142143
const cwc = new WebpackConfigHelper(
143144
projectConfig.files[0],
144145
{
145-
...getConfigFromProjectAndServer(
146-
projectConfig,
147-
serverConfig
148-
),
146+
...getConfigFromProjectAndServer(projectConfig, serverConfig),
149147
hasReact: false,
150148
},
151149
'/foo/bar',
@@ -188,9 +186,7 @@ describe('WebpackConfigHelper', () => {
188186
expect(jsTsRules).toHaveLength(2);
189187
jsTsRules.forEach(rule => {
190188
if (rule && rule.use) {
191-
expect(rule.use[0].loader).toBe(
192-
require.resolve('babel-loader')
193-
);
189+
expect(rule.use[0].loader).toBe(require.resolve('babel-loader'));
194190
expect(rule.use[0].options).toMatchObject({
195191
cacheDirectory: true,
196192
cacheCompression: !true,
@@ -218,9 +214,7 @@ describe('WebpackConfigHelper', () => {
218214
expect(nmJsRules).toHaveLength(1);
219215
nmJsRules.forEach(rule => {
220216
if (rule && rule.use) {
221-
expect(rule.use[0].loader).toBe(
222-
require.resolve('babel-loader')
223-
);
217+
expect(rule.use[0].loader).toBe(require.resolve('babel-loader'));
224218
expect(rule.use[0].options).toMatchObject({
225219
cacheDirectory: true,
226220
cacheCompression: !true,
@@ -242,10 +236,7 @@ describe('WebpackConfigHelper', () => {
242236
const cwc = new WebpackConfigHelper(
243237
projectConfig.files[0],
244238
{
245-
...getConfigFromProjectAndServer(
246-
projectConfig,
247-
serverConfig
248-
),
239+
...getConfigFromProjectAndServer(projectConfig, serverConfig),
249240
hasFlow: true,
250241
hasReact: true,
251242
},
@@ -260,9 +251,9 @@ describe('WebpackConfigHelper', () => {
260251
expect(tsRule).toHaveLength(1);
261252
[...jsRule, ...tsRule].forEach(rule => {
262253
if (rule && rule.use && rule.use[0].options) {
263-
expect(
264-
rule.use[0].options.presets[0][1]
265-
).toMatchObject({ hasReact: true });
254+
expect(rule.use[0].options.presets[0][1]).toMatchObject({
255+
hasReact: true,
256+
});
266257
} else {
267258
throw new Error('babel rule is undefined');
268259
}
@@ -272,9 +263,7 @@ describe('WebpackConfigHelper', () => {
272263
require.resolve('@babel/preset-flow'),
273264
]);
274265
} else {
275-
throw new Error(
276-
'JavaScript babel-loader options not present'
277-
);
266+
throw new Error('JavaScript babel-loader options not present');
278267
}
279268
} else {
280269
throw new Error('Module is not an array');
@@ -285,10 +274,7 @@ describe('WebpackConfigHelper', () => {
285274
const cwc = new WebpackConfigHelper(
286275
projectConfig.files[0],
287276
{
288-
...getConfigFromProjectAndServer(
289-
projectConfig,
290-
serverConfig
291-
),
277+
...getConfigFromProjectAndServer(projectConfig, serverConfig),
292278
useBabelConfig: true,
293279
},
294280
'/foo/bar',
@@ -304,9 +290,7 @@ describe('WebpackConfigHelper', () => {
304290
cacheDirectory: true,
305291
cacheCompression: !true,
306292
compact: !true,
307-
plugins: [
308-
require.resolve('react-refresh/babel'),
309-
],
293+
plugins: [require.resolve('react-refresh/babel')],
310294
});
311295
} else {
312296
throw new Error('JavaScript rule is undefined');
@@ -326,10 +310,7 @@ describe('WebpackConfigHelper', () => {
326310
const cwc = new WebpackConfigHelper(
327311
projectConfig.files[0],
328312
{
329-
...getConfigFromProjectAndServer(
330-
projectConfig,
331-
serverConfig
332-
),
313+
...getConfigFromProjectAndServer(projectConfig, serverConfig),
333314
jsBabelPresetOptions: override,
334315
tsBabelPresetOptions: override,
335316
},
@@ -343,9 +324,7 @@ describe('WebpackConfigHelper', () => {
343324
expect(jsTsRules).toHaveLength(2);
344325
jsTsRules.forEach(rule => {
345326
if (rule && rule.use && rule.use[0].options) {
346-
expect(
347-
rule.use[0].options.presets[0][1]
348-
).toMatchObject(override);
327+
expect(rule.use[0].options.presets[0][1]).toMatchObject(override);
349328
} else {
350329
throw new Error('JavaScript rule is undefined');
351330
}
@@ -363,10 +342,7 @@ describe('WebpackConfigHelper', () => {
363342
const cwc = new WebpackConfigHelper(
364343
projectConfig.files[0],
365344
{
366-
...getConfigFromProjectAndServer(
367-
projectConfig,
368-
serverConfig
369-
),
345+
...getConfigFromProjectAndServer(projectConfig, serverConfig),
370346
jsBabelOverride: override,
371347
tsBabelOverride: override,
372348
},
@@ -402,10 +378,7 @@ describe('WebpackConfigHelper', () => {
402378
const cwc = new WebpackConfigHelper(
403379
projectConfig.files[0],
404380
{
405-
...getConfigFromProjectAndServer(
406-
projectConfig,
407-
serverConfig
408-
),
381+
...getConfigFromProjectAndServer(projectConfig, serverConfig),
409382
jsBabelOverride: override,
410383
tsBabelOverride: override,
411384
},
@@ -453,9 +426,7 @@ describe('WebpackConfigHelper', () => {
453426
);
454427
}) as { use: { loader: string }[] };
455428
if (styleRule !== undefined) {
456-
expect(styleRule.use[0].loader).toBe(
457-
miniCssExtractPlugin.loader
458-
);
429+
expect(styleRule.use[0].loader).toBe(miniCssExtractPlugin.loader);
459430
} else {
460431
throw new Error('No style rule found');
461432
}
@@ -483,9 +454,7 @@ describe('WebpackConfigHelper', () => {
483454
);
484455
}) as { use: { loader: string }[] };
485456
if (styleRule !== undefined) {
486-
expect(styleRule.use[0].loader).toBe(
487-
miniCssExtractPlugin.loader
488-
);
457+
expect(styleRule.use[0].loader).toBe(miniCssExtractPlugin.loader);
489458
} else {
490459
throw new Error('No style rule found');
491460
}
@@ -528,10 +497,7 @@ describe('WebpackConfigHelper', () => {
528497
const cwc = new WebpackConfigHelper(
529498
projectConfig.files[0],
530499
{
531-
...getConfigFromProjectAndServer(
532-
projectConfig,
533-
serverConfig
534-
),
500+
...getConfigFromProjectAndServer(projectConfig, serverConfig),
535501
alias,
536502
},
537503
'/foo/bar',
@@ -552,10 +518,7 @@ describe('WebpackConfigHelper', () => {
552518
const cwc = new WebpackConfigHelper(
553519
projectConfig.files[0],
554520
{
555-
...getConfigFromProjectAndServer(
556-
projectConfig,
557-
serverConfig
558-
),
521+
...getConfigFromProjectAndServer(projectConfig, serverConfig),
559522
optimizeSplitChunks: false,
560523
},
561524
'/foo/bar',
@@ -568,19 +531,15 @@ describe('WebpackConfigHelper', () => {
568531
const cwc = new WebpackConfigHelper(
569532
projectConfig.files[0],
570533
{
571-
...getConfigFromProjectAndServer(
572-
projectConfig,
573-
serverConfig
574-
),
534+
...getConfigFromProjectAndServer(projectConfig, serverConfig),
575535
optimizeSplitChunks: true,
576536
},
577537
'/foo/bar',
578538
false
579539
);
580540
expect(cwc.getOptimization()).not.toBeUndefined();
581541
expect(
582-
(cwc.getOptimization() as webpack.Options.Optimization)
583-
.runtimeChunk
542+
(cwc.getOptimization() as webpack.Options.Optimization).runtimeChunk
584543
).toBe('single');
585544
});
586545
});
@@ -591,10 +550,7 @@ describe('WebpackConfigHelper', () => {
591550
const cwc = new WebpackConfigHelper(
592551
projectConfig.files[0],
593552
{
594-
...getConfigFromProjectAndServer(
595-
projectConfig,
596-
serverConfig
597-
),
553+
...getConfigFromProjectAndServer(projectConfig, serverConfig),
598554
},
599555
'/foo/bar',
600556
true
@@ -605,10 +561,7 @@ describe('WebpackConfigHelper', () => {
605561
const cwc = new WebpackConfigHelper(
606562
projectConfig.files[0],
607563
{
608-
...getConfigFromProjectAndServer(
609-
projectConfig,
610-
serverConfig
611-
),
564+
...getConfigFromProjectAndServer(projectConfig, serverConfig),
612565
},
613566
'/foo/bar',
614567
false
@@ -618,10 +571,7 @@ describe('WebpackConfigHelper', () => {
618571
const cwcDev = new WebpackConfigHelper(
619572
projectConfig.files[0],
620573
{
621-
...getConfigFromProjectAndServer(
622-
projectConfig,
623-
serverConfig
624-
),
574+
...getConfigFromProjectAndServer(projectConfig, serverConfig),
625575
},
626576
'/foo/bar',
627577
true

‎packages/scripts/__tests__/helpers/testUtils.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,5 +65,10 @@ export function getConfigFromProjectAndServer(
6565
errorOverlay: true,
6666
externals: pCfg.externals,
6767
useBabelConfig: false,
68+
compileNodeModules: {
69+
dev: true,
70+
prod: true,
71+
},
72+
useReactJsxRuntime: true,
6873
};
6974
}

‎packages/scripts/src/config/CreateWebpackConfig.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -169,6 +169,11 @@ export class CreateWebpackConfig {
169169
if (file.useBabelConfig !== undefined) {
170170
useBabelConfig = file.useBabelConfig;
171171
}
172+
// figure out compile node modules
173+
const compileNodeModules = {
174+
dev: this.projectConfig.compileNodeModules?.dev ?? true,
175+
prod: this.projectConfig.compileNodeModules?.prod ?? true,
176+
};
172177
const { host, port } = this.serverConfig;
173178
const helper: WebpackConfigHelper = new WebpackConfigHelper(
174179
file,
@@ -198,6 +203,7 @@ export class CreateWebpackConfig {
198203
tsBabelPresetOptions,
199204
useReactJsxRuntime,
200205
disableWordPressExternals,
206+
compileNodeModules,
201207
},
202208
this.cwd,
203209
this.isDev

‎packages/scripts/src/config/WebpackConfigHelper.ts‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,10 @@ export interface WebpackConfigHelperConfig {
6161
externals: ProjectConfig['externals'];
6262
// whether or not to disable wordpress external scripts handling
6363
disableWordPressExternals?: boolean;
64+
compileNodeModules: {
65+
dev: boolean;
66+
prod: boolean;
67+
};
6468
}
6569

6670
interface CommonWebpackConfig {
@@ -585,15 +589,16 @@ ${bannerConfig.copyrightText}${bannerConfig.credit ? creditNote : ''}`,
585589
fileRulesStyle,
586590
} = getFileLoaderForJsAndStyleAssets(this.appDir, this.isDev);
587591

592+
const rules: webpack.RuleSetRule[] = [jsRules, tsRules];
593+
if (this.isDev && this.config.compileNodeModules.dev) {
594+
rules.push(nmJsRules);
595+
} else if (!this.isDev && this.config.compileNodeModules.prod) {
596+
rules.push(nmJsRules);
597+
}
598+
rules.push(...styleRules, fileRulesNonStyle, fileRulesStyle);
599+
588600
return {
589-
rules: [
590-
jsRules,
591-
tsRules,
592-
nmJsRules,
593-
...styleRules,
594-
fileRulesNonStyle,
595-
fileRulesStyle,
596-
],
601+
rules,
597602
};
598603
}
599604

‎packages/scripts/src/config/project.config.default.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,10 @@ export interface ProjectConfig {
103103
zlibLevel?: number;
104104
// whether or not to disable wordpress external scripts handling
105105
disableWordPressExternals?: boolean;
106+
compileNodeModules?: {
107+
dev?: boolean;
108+
prod?: boolean;
109+
};
106110
}
107111

108112
/**

‎packages/scripts/tsconfig.eslint.json‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"extends": "../../tsconfig.base.json",
3+
"compilerOptions": {
4+
"outDir": "./lib" /* Redirect output structure to the directory. */,
5+
"rootDir": "./src" /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
6+
},
7+
"exclude": [
8+
"__mocks__/**",
9+
"lib/**"
10+
]
11+
}

0 commit comments

Comments
 (0)