miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

fix(webpack): config migrations should account for different configurations (#14672)

Browse Source
This commit is contained in:
Jack Hsu 2023-01-27 15:50:25 -05:00 committed by GitHub
parent 3cdaacf5d4
commit cda00d9687
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 400 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/react/src/migrations/update-15-6-3/__snapshots__/webpack-config-setup.spec.ts.snap
View File

@ -9,6 +9,8 @@ exports[`15.6.3 migration (setup webpack.config file for React apps) should crea
module.exports = composePlugins(withNx(), withReact(), (config, { options, context }) => {
// Update the webpack config as needed here.
// e.g. config.plugins.push(new MyPlugin())
// For more information on webpack config and Nx see:
// https://nx.dev/packages/webpack/documents/webpack-config-setup
return config;
});
"
@ -23,6 +25,8 @@ exports[`15.6.3 migration (setup webpack.config file for React apps) should crea
module.exports = composePlugins(withNx(), withReact(), (config, { options, context }) => {
// Update the webpack config as needed here.
// e.g. config.plugins.push(new MyPlugin())
// For more information on webpack config and Nx see:
// https://nx.dev/packages/webpack/documents/webpack-config-setup
return config;
});
"
@ -37,6 +41,8 @@ exports[`15.6.3 migration (setup webpack.config file for React apps) should crea
module.exports = composePlugins(withNx(), withReact(), (config, { options, context }) => {
// Update the webpack config as needed here.
// e.g. config.plugins.push(new MyPlugin())
// For more information on webpack config and Nx see:
// https://nx.dev/packages/webpack/documents/webpack-config-setup
return config;
});
"
@ -51,6 +57,8 @@ exports[`15.6.3 migration (setup webpack.config file for React apps) should crea
module.exports = composePlugins(withNx(), withReact(), (config, { options, context }) => {
// Note: This was added by an Nx migration.
// You should consider inlining the logic into this file.
// For more information on webpack config and Nx see:
// https://nx.dev/packages/webpack/documents/webpack-config-setup
return require('./webpack.something.old.ts')(config, context);
});
"

169
packages/react/src/migrations/update-15-6-3/webpack-config-setup.spec.ts
View File

@ -11,7 +11,9 @@ describe('15.6.3 migration (setup webpack.config file for React apps)', () => {
beforeEach(async () => {
tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
});
it('should create webpack.config.js for React projects only', async () => {
addProjectConfiguration(tree, 'react1', {
root: 'apps/react1',
targets: {
@ -62,6 +64,28 @@ describe('15.6.3 migration (setup webpack.config file for React apps)', () => {
});
tree.write('apps/react4/webpack.something.ts', 'some content');
await webpackConfigSetup(tree);
expect(
tree.read('apps/react1/webpack.config.js', 'utf-8')
).toMatchSnapshot();
expect(
tree.read('apps/react2/webpack.config.js', 'utf-8')
).toMatchSnapshot();
expect(
tree.read('apps/react3/webpack.config.js', 'utf-8')
).toMatchSnapshot();
expect(
tree.read('apps/react4/webpack.something.ts', 'utf-8')
).toMatchSnapshot();
expect(
tree.read('apps/react4/webpack.something.old.ts', 'utf-8')
).toMatchInlineSnapshot(`"some content"`);
});
it('should ignore non-react projects or isolatedConfig', async () => {
addProjectConfiguration(tree, 'app4', {
root: 'apps/app4',
targets: {
@ -73,7 +97,6 @@ describe('15.6.3 migration (setup webpack.config file for React apps)', () => {
},
},
});
tree.write('some/random/path/webpack.something.ts', 'some content');
addProjectConfiguration(tree, 'app5', {
@ -101,29 +124,7 @@ describe('15.6.3 migration (setup webpack.config file for React apps)', () => {
});
await webpackConfigSetup(tree);
});
it('should create webpack.config.js for React projects only', () => {
expect(
tree.read('apps/react1/webpack.config.js', 'utf-8')
).toMatchSnapshot();
expect(
tree.read('apps/react2/webpack.config.js', 'utf-8')
).toMatchSnapshot();
expect(
tree.read('apps/react3/webpack.config.js', 'utf-8')
).toMatchSnapshot();
expect(
tree.read('apps/react4/webpack.something.ts', 'utf-8')
).toMatchSnapshot();
expect(
tree.read('apps/react4/webpack.something.old.ts', 'utf-8')
).toMatchInlineSnapshot(`"some content"`);
});
it('should ignore non-react projects or isolatedConfig', () => {
expect(
tree.read('some/random/path/webpack.something.ts', 'utf-8')
).toMatchInlineSnapshot(`"some content"`);
@ -134,7 +135,60 @@ describe('15.6.3 migration (setup webpack.config file for React apps)', () => {
expect(tree.exists('apps/app6/webpack.config.js')).toBeFalsy();
});
it('should update the project configuration - executor options', () => {
it('should update the project configuration - executor options', async () => {
addProjectConfiguration(tree, 'react1', {
root: 'apps/react1',
targets: {
build: {
executor: '@nrwl/webpack:webpack',
options: {
main: 'apps/react1/src/main.tsx',
webpackConfig: '@nrwl/react/plugins/webpack',
},
},
},
});
addProjectConfiguration(tree, 'react2', {
root: 'apps/react2',
targets: {
custom: {
executor: '@nrwl/webpack:webpack',
options: {
main: 'apps/react2/src/main.tsx',
},
},
},
});
addProjectConfiguration(tree, 'react3', {
root: 'apps/react3',
targets: {
custom: {
executor: '@nrwl/webpack:webpack',
options: {
webpackConfig: '@nrwl/react/plugins/webpack',
},
},
},
});
addProjectConfiguration(tree, 'react4', {
root: 'apps/react4',
targets: {
custom: {
executor: '@nrwl/webpack:webpack',
options: {
main: 'apps/react4/src/main.tsx',
webpackConfig: 'apps/react4/webpack.something.ts',
},
},
},
});
tree.write('apps/react4/webpack.something.ts', 'some content');
await webpackConfigSetup(tree);
expect(
readProjectConfiguration(tree, 'react1').targets.build.options
.webpackConfig
@ -173,4 +227,71 @@ describe('15.6.3 migration (setup webpack.config file for React apps)', () => {
.isolatedConfig
).toBeTruthy();
});
it('should migrate configurations (dev, prod, etc.) with webpackConfig but ignore ones without it', async () => {
addProjectConfiguration(tree, 'reactapp', {
root: 'apps/reactapp',
targets: {
build: {
executor: '@nrwl/webpack:webpack',
options: {
main: 'apps/reactapp/src/main.tsx',
webpackConfig: 'apps/reactapp/webpack.config.js',
},
configurations: {
foo: {},
bar: {
webpackConfig: 'apps/reactapp/webpack.config.bar.js',
},
},
},
},
});
tree.write('apps/reactapp/webpack.config.js', 'default');
tree.write('apps/reactapp/webpack.config.bar.js', 'bar');
addProjectConfiguration(tree, 'alreadymigrated', {
root: 'apps/alreadymigrated',
targets: {
build: {
executor: '@nrwl/webpack:webpack',
options: {
isolatedConfig: true,
main: 'apps/alreadymigrated/src/main.tsx',
webpackConfig: 'apps/alreadymigrated/webpack.config.js',
},
configurations: {
foo: {},
bar: {
webpackConfig: 'apps/alreadymigrated/webpack.config.bar.js',
},
},
},
},
});
tree.write('apps/alreadymigrated/webpack.config.js', 'default');
tree.write('apps/alreadymigrated/webpack.config.bar.js', 'bar');
await webpackConfigSetup(tree);
expect(tree.read('apps/reactapp/webpack.config.old.js', 'utf-8')).toContain(
'default'
);
expect(
tree.read('apps/reactapp/webpack.config.bar.old.js', 'utf-8')
).toContain('bar');
expect(
tree.read('apps/alreadymigrated/webpack.config.js', 'utf-8')
).toContain('default');
expect(
tree.read('apps/alreadymigrated/webpack.config.bar.js', 'utf-8')
).toContain('bar');
expect(
tree.exists('apps/alreadymigrated/webpack.config.old.js')
).toBeFalsy();
expect(
tree.exists('apps/alreadymigrated/webpack.config.bar.old.js')
).toBeFalsy();
});
});

45
packages/react/src/migrations/update-15-6-3/webpack-config-setup.ts
View File

@ -7,23 +7,40 @@ import {
} from '@nrwl/devkit';
import { forEachExecutorOptions } from '@nrwl/workspace/src/utilities/executor-options-utils';
import { basename } from 'path';
import type { WebpackExecutorOptions } from '@nrwl/webpack';
export default async function (tree: Tree) {
forEachExecutorOptions(
// Since projects can have multiple configurations, we need to know if the default options
// need to be migrated or not. If so then the subsequent configurations with `webpackConfig` also need to be.
const defaultOptionsUpdated = new Set<string>();
forEachExecutorOptions<WebpackExecutorOptions>(
tree,
'@nrwl/webpack:webpack',
(options: {}, projectName, targetName, _configurationName) => {
(options, projectName, targetName, configurationName) => {
const projectConfiguration = readProjectConfiguration(tree, projectName);
const defaultOptions = projectConfiguration.targets[targetName].options;
const defaultWasUpdated = defaultOptionsUpdated.has(projectName);
// If default was not updated (for different configurations), we don't do anything
// If isolatedConfig is set, we don't need to do anything
// If it is NOT React, we don't need to do anything
if (
options?.['isolatedConfig'] ||
!(
options?.['main']?.match(/main\.(t|j)sx$/) ||
options?.['webpackConfig'] === '@nrwl/react/plugins/webpack'
)
!defaultWasUpdated &&
(defaultOptions?.['isolatedConfig'] ||
!(
defaultOptions?.['main']?.match(/main\.(t|j)sx$/) ||
defaultOptions?.['webpackConfig'] === '@nrwl/react/plugins/webpack'
))
) {
return;
}
defaultOptionsUpdated.add(projectName);
// If this is not the default options (e.g. for development, production, or something custom),
// then skip it unless it specifically configures a webpackConfig file
if (configurationName && !options?.webpackConfig) {
return;
}
// If webpackConfig is set, update it with the new options
// If webpackConfig is not set, we need to create a new
@ -55,6 +72,8 @@ export default async function (tree: Tree) {
module.exports = composePlugins(withNx(), withReact(), (config, { options, context }) => {
// Note: This was added by an Nx migration.
// You should consider inlining the logic into this file.
// For more information on webpack config and Nx see:
// https://nx.dev/packages/webpack/documents/webpack-config-setup
return require('./${justTheFileName}')(config, context);
});
`
@ -62,11 +81,9 @@ export default async function (tree: Tree) {
options['isolatedConfig'] = true;
const projectConfiguration = readProjectConfiguration(
tree,
projectName
);
projectConfiguration.targets[targetName].options = options;
projectConfiguration.targets[targetName][
configurationName ?? 'options'
] = options;
updateProjectConfiguration(tree, projectName, projectConfiguration);
logger.info(
@ -86,7 +103,7 @@ export default async function (tree: Tree) {
);
if (!options) {
options = {};
options = {} as WebpackExecutorOptions;
}
options[
@ -104,6 +121,8 @@ export default async function (tree: Tree) {
module.exports = composePlugins(withNx(), withReact(), (config, { options, context }) => {
// Update the webpack config as needed here.
// e.g. config.plugins.push(new MyPlugin())
// For more information on webpack config and Nx see:
// https://nx.dev/packages/webpack/documents/webpack-config-setup
return config;
});
`

8
packages/webpack/src/migrations/update-15-6-3/__snapshots__/webpack-config-setup.spec.ts.snap
View File

@ -8,6 +8,8 @@ exports[`15.6.3 migration (setup webpack.config file) should create webpack.conf
module.exports = composePlugins(withNx(), (config) => {
// Update the webpack config as needed here.
// e.g. config.plugins.push(new MyPlugin())
// For more information on webpack config and Nx see:
// https://nx.dev/packages/webpack/documents/webpack-config-setup
return config;
});
"
@ -21,6 +23,8 @@ exports[`15.6.3 migration (setup webpack.config file) should create webpack.conf
module.exports = composePlugins(withNx(), (config) => {
// Update the webpack config as needed here.
// e.g. config.plugins.push(new MyPlugin())
// For more information on webpack config and Nx see:
// https://nx.dev/packages/webpack/documents/webpack-config-setup
return config;
});
"
@ -34,6 +38,8 @@ exports[`15.6.3 migration (setup webpack.config file) should rename existing web
module.exports = composePlugins(withNx(), (config, { options, context }) => {
// Note: This was added by an Nx migration.
// You should consider inlining the logic into this file.
// For more information on webpack config and Nx see:
// https://nx.dev/packages/webpack/documents/webpack-config-setup
return require('./webpack.config.old.js')(config, context);
});
"
@ -47,6 +53,8 @@ exports[`15.6.3 migration (setup webpack.config file) should rename existing web
module.exports = composePlugins(withNx(), (config, { options, context }) => {
// Note: This was added by an Nx migration.
// You should consider inlining the logic into this file.
// For more information on webpack config and Nx see:
// https://nx.dev/packages/webpack/documents/webpack-config-setup
return require('./webpack.something.old.ts')(config, context);
});
"

241
packages/webpack/src/migrations/update-15-6-3/webpack-config-setup.spec.ts
View File

@ -11,7 +11,78 @@ describe('15.6.3 migration (setup webpack.config file)', () => {
beforeEach(async () => {
tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
});
it('should create webpack.config.js for projects that do not have one', async () => {
addProjectConfiguration(tree, 'app1', {
root: 'apps/app1',
targets: {
build: {
executor: '@nrwl/webpack:webpack',
options: {},
},
},
});
addProjectConfiguration(tree, 'app2', {
root: 'apps/app2',
targets: {
custom: {
executor: '@nrwl/webpack:webpack',
options: {},
},
},
});
await webpackConfigSetup(tree);
expect(tree.read('apps/app1/webpack.config.js', 'utf-8')).toMatchSnapshot();
expect(tree.read('apps/app2/webpack.config.js', 'utf-8')).toMatchSnapshot();
});
it('should rename existing webpack.config file and create new one that requires it', async () => {
addProjectConfiguration(tree, 'app3', {
root: 'apps/app3',
targets: {
custom: {
executor: '@nrwl/webpack:webpack',
options: {
webpackConfig: 'apps/app3/webpack.config.js',
},
},
},
});
tree.write('apps/app3/webpack.config.js', 'some content');
addProjectConfiguration(tree, 'app4', {
root: 'apps/app4',
targets: {
custom: {
executor: '@nrwl/webpack:webpack',
options: {
webpackConfig: 'some/random/path/webpack.something.ts',
},
},
},
});
tree.write('some/random/path/webpack.something.ts', 'some content');
await webpackConfigSetup(tree);
expect(tree.read('apps/app3/webpack.config.js', 'utf-8')).toMatchSnapshot();
expect(
tree.read('apps/app3/webpack.config.old.js', 'utf-8')
).toMatchInlineSnapshot(`"some content"`);
expect(
tree.read('some/random/path/webpack.something.ts', 'utf-8')
).toMatchSnapshot();
expect(
tree.read('some/random/path/webpack.something.old.ts', 'utf-8')
).toMatchInlineSnapshot(`"some content"`);
});
it('should update the project configuration - executor options', async () => {
addProjectConfiguration(tree, 'app1', {
root: 'apps/app1',
targets: {
@ -56,69 +127,10 @@ describe('15.6.3 migration (setup webpack.config file)', () => {
},
},
});
tree.write('some/random/path/webpack.something.ts', 'some content');
addProjectConfiguration(tree, 'app5', {
root: 'apps/app5',
targets: {
custom: {
executor: '@nrwl/webpack:webpack',
options: {
isolatedConfig: true,
},
},
},
});
addProjectConfiguration(tree, 'app6', {
root: 'apps/app6',
targets: {
custom: {
executor: '@nrwl/webpack:webpack',
options: {
webpackConfig: '@nrwl/react/plugins/webpack',
},
},
},
});
addProjectConfiguration(tree, 'app7', {
root: 'apps/app7',
targets: {
custom: {
executor: '@nrwl/webpack:webpack',
options: {
main: 'apps/app7/src/main.tsx',
},
},
},
});
await webpackConfigSetup(tree);
});
it('should create webpack.config.js for projects that do not have one', () => {
expect(tree.read('apps/app1/webpack.config.js', 'utf-8')).toMatchSnapshot();
expect(tree.read('apps/app2/webpack.config.js', 'utf-8')).toMatchSnapshot();
});
it('should rename existing webpack.config file and create new one that requires it', () => {
expect(tree.read('apps/app3/webpack.config.js', 'utf-8')).toMatchSnapshot();
expect(
tree.read('apps/app3/webpack.config.old.js', 'utf-8')
).toMatchInlineSnapshot(`"some content"`);
expect(
tree.read('some/random/path/webpack.something.ts', 'utf-8')
).toMatchSnapshot();
expect(
tree.read('some/random/path/webpack.something.old.ts', 'utf-8')
).toMatchInlineSnapshot(`"some content"`);
});
it('should update the project configuration - executor options', () => {
expect(
readProjectConfiguration(tree, 'app1').targets.build.options.webpackConfig
).toBe('apps/app1/webpack.config.js');
@ -157,12 +169,119 @@ describe('15.6.3 migration (setup webpack.config file)', () => {
).toBeTruthy();
});
it('should not do anything if isolatedConfig is true', () => {
it('should not do anything if isolatedConfig is true', async () => {
addProjectConfiguration(tree, 'app5', {
root: 'apps/app5',
targets: {
custom: {
executor: '@nrwl/webpack:webpack',
options: {
isolatedConfig: true,
},
},
},
});
await webpackConfigSetup(tree);
expect(tree.exists('apps/app5/webpack.config.js')).toBeFalsy();
});
it('should not do anything if project is react', () => {
it('should not do anything if project is react', async () => {
addProjectConfiguration(tree, 'app6', {
root: 'apps/app6',
targets: {
custom: {
executor: '@nrwl/webpack:webpack',
options: {
webpackConfig: '@nrwl/react/plugins/webpack',
},
},
},
});
addProjectConfiguration(tree, 'app7', {
root: 'apps/app7',
targets: {
custom: {
executor: '@nrwl/webpack:webpack',
options: {
main: 'apps/app7/src/main.tsx',
},
},
},
});
await webpackConfigSetup(tree);
expect(tree.exists('apps/app6/webpack.config.js')).toBeFalsy();
expect(tree.exists('apps/app7/webpack.config.js')).toBeFalsy();
});
it('should migrate configurations (dev, prod, etc.) with webpackConfig but ignore ones without it', async () => {
addProjectConfiguration(tree, 'myapp', {
root: 'apps/myapp',
targets: {
build: {
executor: '@nrwl/webpack:webpack',
options: {
main: 'apps/myapp/src/main.ts',
webpackConfig: 'apps/myapp/webpack.config.js',
},
configurations: {
foo: {},
bar: {
webpackConfig: 'apps/myapp/webpack.config.bar.js',
},
},
},
},
});
tree.write('apps/myapp/webpack.config.js', 'default');
tree.write('apps/myapp/webpack.config.bar.js', 'bar');
addProjectConfiguration(tree, 'alreadymigrated', {
root: 'apps/alreadymigrated',
targets: {
build: {
executor: '@nrwl/webpack:webpack',
options: {
isolatedConfig: true,
main: 'apps/alreadymigrated/src/main.ts',
webpackConfig: 'apps/alreadymigrated/webpack.config.js',
},
configurations: {
foo: {},
bar: {
webpackConfig: 'apps/alreadymigrated/webpack.config.bar.js',
},
},
},
},
});
tree.write('apps/alreadymigrated/webpack.config.js', 'default');
tree.write('apps/alreadymigrated/webpack.config.bar.js', 'bar');
await webpackConfigSetup(tree);
expect(tree.read('apps/myapp/webpack.config.old.js', 'utf-8')).toContain(
'default'
);
expect(
tree.read('apps/myapp/webpack.config.bar.old.js', 'utf-8')
).toContain('bar');
expect(
tree.read('apps/alreadymigrated/webpack.config.js', 'utf-8')
).toContain('default');
expect(
tree.read('apps/alreadymigrated/webpack.config.bar.js', 'utf-8')
).toContain('bar');
expect(
tree.exists('apps/alreadymigrated/webpack.config.old.js')
).toBeFalsy();
expect(
tree.exists('apps/alreadymigrated/webpack.config.bar.old.js')
).toBeFalsy();
});
});

36
packages/webpack/src/migrations/update-15-6-3/webpack-config-setup.ts
View File

@ -10,6 +10,9 @@ import { WebpackExecutorOptions } from '../../executors/webpack/schema';
import { basename } from 'path';
export default async function (tree: Tree) {
// Since projects can have multiple configurations, we need to know if the default options
// need to be migrated or not. If so then the subsequent configurations with `webpackConfig` also need to be.
const defaultOptionsUpdated = new Set<string>();
forEachExecutorOptions<WebpackExecutorOptions>(
tree,
'@nrwl/webpack:webpack',
@ -17,17 +20,30 @@ export default async function (tree: Tree) {
options: WebpackExecutorOptions,
projectName,
targetName,
_configurationName
configurationName
) => {
const projectConfiguration = readProjectConfiguration(tree, projectName);
const defaultOptions = projectConfiguration.targets[targetName].options;
const defaultWasUpdated = defaultOptionsUpdated.has(projectName);
// If default was not updated (for different configurations), we don't do anything
// If isolatedConfig is set, we don't need to do anything
// If project is React, we don't need to do anything
if (
options?.isolatedConfig ||
options?.main?.match(/main\.(t|j)sx$/) ||
options?.webpackConfig === '@nrwl/react/plugins/webpack'
!defaultWasUpdated &&
(defaultOptions?.isolatedConfig ||
defaultOptions?.main?.match(/main\.(t|j)sx$/) ||
defaultOptions?.webpackConfig === '@nrwl/react/plugins/webpack')
) {
return;
}
defaultOptionsUpdated.add(projectName);
// If this is not the base options (e.g. for development, production, or something custom),
// then skip it unless it specifically configures a webpackConfig file
if (configurationName && !options?.webpackConfig) {
return;
}
// If webpackConfig is set, update it with the new options
// If webpackConfig is not set, we need to create a new
@ -55,6 +71,8 @@ export default async function (tree: Tree) {
module.exports = composePlugins(withNx(), (config, { options, context }) => {
// Note: This was added by an Nx migration.
// You should consider inlining the logic into this file.
// For more information on webpack config and Nx see:
// https://nx.dev/packages/webpack/documents/webpack-config-setup
return require('./${justTheFileName}')(config, context);
});
`
@ -62,11 +80,9 @@ export default async function (tree: Tree) {
options.isolatedConfig = true;
const projectConfiguration = readProjectConfiguration(
tree,
projectName
);
projectConfiguration.targets[targetName].options = options;
projectConfiguration.targets[targetName][
configurationName ?? 'options'
] = options;
updateProjectConfiguration(tree, projectName, projectConfiguration);
logger.info(
@ -101,6 +117,8 @@ export default async function (tree: Tree) {
module.exports = composePlugins(withNx(), (config) => {
// Update the webpack config as needed here.
// e.g. config.plugins.push(new MyPlugin())
// For more information on webpack config and Nx see:
// https://nx.dev/packages/webpack/documents/webpack-config-setup
return config;
});
`