From 83c4ce1163b0efb717bc9872d2f797b674463f8e Mon Sep 17 00:00:00 2001 From: Timeless0911 <1604889533@qq.com> Date: Wed, 25 Dec 2024 18:14:10 +0800 Subject: [PATCH 1/2] fix: mf-dev should apply correct config --- .../mf-react-component/rslib.config.ts | 4 +- .../mf-react-component/tsconfig.build.json | 4 + packages/core/package.json | 1 + packages/core/src/cli/mf.ts | 9 +- packages/core/src/config.ts | 24 ++- .../tests/__snapshots__/config.test.ts.snap | 154 ++++++++++++++++++ packages/core/tests/config.test.ts | 7 +- pnpm-lock.yaml | 7 +- tests/integration/cli/mf-dev/dev.test.ts | 46 ------ tests/integration/cli/mf-dev/rslib.config.ts | 40 ----- tests/integration/cli/mf/build/package.json | 6 + .../integration/cli/mf/build/rslib.config.ts | 9 + .../cli/{mf-dev => mf/build}/src/index.ts | 0 .../cli/{mf-dev => mf/dev}/package.json | 0 tests/integration/cli/mf/dev/rslib.config.ts | 47 ++++++ tests/integration/cli/mf/dev/src/index.ts | 1 + tests/integration/cli/mf/mf.test.ts | 81 +++++++++ .../plugins/mf-dev/rslib.config.ts | 16 +- tests/integration/server/index.test.ts | 2 +- .../integration/server/mf-dev/rslib.config.ts | 17 +- 20 files changed, 348 insertions(+), 127 deletions(-) create mode 100644 examples/module-federation/mf-react-component/tsconfig.build.json delete mode 100644 tests/integration/cli/mf-dev/dev.test.ts delete mode 100644 tests/integration/cli/mf-dev/rslib.config.ts create mode 100644 tests/integration/cli/mf/build/package.json create mode 100644 tests/integration/cli/mf/build/rslib.config.ts rename tests/integration/cli/{mf-dev => mf/build}/src/index.ts (100%) rename tests/integration/cli/{mf-dev => mf/dev}/package.json (100%) create mode 100644 tests/integration/cli/mf/dev/rslib.config.ts create mode 100644 tests/integration/cli/mf/dev/src/index.ts create mode 100644 tests/integration/cli/mf/mf.test.ts diff --git a/examples/module-federation/mf-react-component/rslib.config.ts b/examples/module-federation/mf-react-component/rslib.config.ts index 998c4de97..95d535810 100644 --- a/examples/module-federation/mf-react-component/rslib.config.ts +++ b/examples/module-federation/mf-react-component/rslib.config.ts @@ -24,7 +24,6 @@ export default defineConfig({ }, { format: 'mf', - dts: true, output: { distPath: { root: './dist/mf', @@ -52,6 +51,9 @@ export default defineConfig({ ], }, ], + source: { + tsconfigPath: './tsconfig.build.json', + }, // just for dev server: { port: 3001, diff --git a/examples/module-federation/mf-react-component/tsconfig.build.json b/examples/module-federation/mf-react-component/tsconfig.build.json new file mode 100644 index 000000000..b90fc83e0 --- /dev/null +++ b/examples/module-federation/mf-react-component/tsconfig.build.json @@ -0,0 +1,4 @@ +{ + "extends": "./tsconfig.json", + "include": ["src"] +} diff --git a/packages/core/package.json b/packages/core/package.json index 94237ce9a..c9f72ae88 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -42,6 +42,7 @@ "tinyglobby": "^0.2.10" }, "devDependencies": { + "@module-federation/rsbuild-plugin": "^0.8.5", "@rslib/tsconfig": "workspace:*", "@types/fs-extra": "^11.0.4", "chokidar": "^4.0.3", diff --git a/packages/core/src/cli/mf.ts b/packages/core/src/cli/mf.ts index 8dad91a3b..5e94bea38 100644 --- a/packages/core/src/cli/mf.ts +++ b/packages/core/src/cli/mf.ts @@ -46,17 +46,10 @@ async function initMFRsbuild( plugins: config.plugins, dev: { ...(config.dev ?? {}), + // TODO: remove this after Rsbuild fix that the environment config of writeToDisk not takes effect writeToDisk: true, }, server: config.server, - tools: { - rspack: { - optimization: { - nodeEnv: 'development', - moduleIds: 'named', - }, - }, - }, environments: selectedEnvironments, }, }); diff --git a/packages/core/src/config.ts b/packages/core/src/config.ts index 3774abc5e..ab47061f1 100644 --- a/packages/core/src/config.ts +++ b/packages/core/src/config.ts @@ -616,17 +616,23 @@ const composeFormatConfig = ({ } case 'mf': return { + dev: { + writeToDisk: true, + }, tools: { - rspack: { - output: { + rspack: (config, { env }) => { + config.output = { + ...config.output, uniqueName: pkgJson.name as string, - }, - // can not set nodeEnv to false, because mf format should build shared module. - // If nodeEnv is false, the process.env.NODE_ENV in third-party packages's will not be replaced - optimization: { - nodeEnv: 'production', - moduleIds: 'deterministic', - }, + }; + + config.optimization = { + ...config.optimization, + // can not set nodeEnv to false, because mf format should build shared module. + // If nodeEnv is false, the process.env.NODE_ENV in third-party packages's will not be replaced + nodeEnv: env === 'development' ? 'development' : 'production', + moduleIds: env === 'development' ? 'named' : 'deterministic', + }; }, }, output: { diff --git a/packages/core/tests/__snapshots__/config.test.ts.snap b/packages/core/tests/__snapshots__/config.test.ts.snap index 1a2506f99..02d90d05a 100644 --- a/packages/core/tests/__snapshots__/config.test.ts.snap +++ b/packages/core/tests/__snapshots__/config.test.ts.snap @@ -696,5 +696,159 @@ exports[`Should compose create Rsbuild config correctly > Merge Rsbuild config 1 }, "format": "umd", }, + { + "config": { + "dev": { + "progressBar": false, + "writeToDisk": true, + }, + "output": { + "distPath": { + "css": "./", + "cssAsync": "./", + "js": "./", + "jsAsync": "./", + }, + "filename": { + "js": "[name].js", + }, + "filenameHash": false, + "minify": { + "css": false, + "js": true, + "jsOptions": { + "minimizerOptions": { + "compress": { + "dead_code": true, + "defaults": false, + "toplevel": false, + "unused": true, + }, + "format": { + "comments": "some", + "preserve_annotations": true, + }, + "mangle": false, + "minify": true, + }, + }, + }, + "overrideBrowserslist": [ + "last 1 Chrome versions", + "last 1 Firefox versions", + "last 1 Edge versions", + "last 1 Safari versions", + "last 1 ios_saf versions", + "not dead", + ], + "target": "web", + }, + "performance": { + "chunkSplit": { + "strategy": "custom", + }, + }, + "plugins": [ + { + "name": "rsbuild:lib-entry-chunk", + "setup": [Function], + }, + { + "name": "rsbuild:module-federation-enhanced", + "setup": [Function], + }, + ], + "resolve": { + "alias": { + "bar": "bar", + "foo": "foo", + }, + }, + "source": { + "entry": {}, + "preEntry": "./a.js", + }, + "tools": { + "htmlPlugin": false, + "rspack": [ + { + "experiments": { + "rspackFuture": { + "bundlerInfo": { + "force": false, + }, + }, + }, + "optimization": { + "moduleIds": "named", + "nodeEnv": false, + "splitChunks": { + "chunks": "async", + }, + }, + "resolve": { + "extensionAlias": { + ".cjs": [ + ".cts", + ".cjs", + ], + ".js": [ + ".ts", + ".tsx", + ".js", + ".jsx", + ], + ".jsx": [ + ".tsx", + ".jsx", + ], + ".mjs": [ + ".mts", + ".mjs", + ], + }, + }, + }, + [Function], + [Function], + { + "target": [ + "web", + ], + }, + { + "externalsType": "global", + }, + { + "plugins": [ + EntryChunkPlugin { + "enabledImportMetaUrlShim": false, + "reactDirectives": {}, + "shebangChmod": 493, + "shebangEntries": {}, + "shebangInjectedAssets": Set {}, + }, + ], + }, + { + "resolve": { + "extensionAlias": { + ".js": [ + ".ts", + ".tsx", + ], + }, + }, + }, + ], + "swc": { + "jsc": { + "externalHelpers": false, + }, + }, + }, + }, + "format": "mf", + }, ] `; diff --git a/packages/core/tests/config.test.ts b/packages/core/tests/config.test.ts index ebf27a9c6..27e851583 100644 --- a/packages/core/tests/config.test.ts +++ b/packages/core/tests/config.test.ts @@ -1,4 +1,5 @@ import { join } from 'node:path'; +import { pluginModuleFederation } from '@module-federation/rsbuild-plugin'; import { describe, expect, test, vi } from 'vitest'; import { composeCreateRsbuildConfig, @@ -148,7 +149,7 @@ describe('Should load config file correctly', () => { }); describe('Should compose create Rsbuild config correctly', () => { - test('Merge Rsbuild config', async () => { + test('Merge Rsbuild config in each format', async () => { const rslibConfig: RslibConfig = { lib: [ { @@ -176,6 +177,10 @@ describe('Should compose create Rsbuild config correctly', () => { { format: 'umd', }, + { + format: 'mf', + plugins: [pluginModuleFederation({})], + }, ], source: { preEntry: './a.js', diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3e4c18bd7..40aa07729 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -272,6 +272,9 @@ importers: specifier: ^0.2.10 version: 0.2.10 devDependencies: + '@module-federation/rsbuild-plugin': + specifier: ^0.8.5 + version: 0.8.5(@module-federation/enhanced@0.8.5(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.7.2)(vue-tsc@2.2.0(typescript@5.7.2))(webpack@5.96.1))(@rsbuild/core@1.1.12) '@rslib/tsconfig': specifier: workspace:* version: link:../../scripts/tsconfig @@ -569,7 +572,9 @@ importers: tests/integration/cli/inspect: {} - tests/integration/cli/mf-dev: {} + tests/integration/cli/mf/build: {} + + tests/integration/cli/mf/dev: {} tests/integration/copy: {} diff --git a/tests/integration/cli/mf-dev/dev.test.ts b/tests/integration/cli/mf-dev/dev.test.ts deleted file mode 100644 index 76b5302c3..000000000 --- a/tests/integration/cli/mf-dev/dev.test.ts +++ /dev/null @@ -1,46 +0,0 @@ -import { exec } from 'node:child_process'; -import { join } from 'node:path'; -import { describe } from 'node:test'; -import fse, { existsSync } from 'fs-extra'; -import { awaitFileExists } from 'test-helper'; -import { expect, test } from 'vitest'; - -describe('mf-dev', () => { - test('mf-dev --lib', async () => { - const fixturePath = join(__dirname); - const distFolder = join(__dirname, 'dist-mf0'); - fse.removeSync(distFolder); - const distPath = join(distFolder, 'index.js'); - - const childProcess = exec('npx rslib mf-dev --lib mf0', { - cwd: fixturePath, - }); - - await awaitFileExists(distPath); - - expect(existsSync(distPath)).toBe(true); - childProcess.kill(); - }); - - test('mf-dev --lib multiple', async () => { - const fixturePath = join(__dirname); - const distFolder1 = join(__dirname, 'dist-mf1'); - const distFolder2 = join(__dirname, 'dist-mf2'); - fse.removeSync(distFolder1); - fse.removeSync(distFolder2); - const distPath1 = join(distFolder1, 'index.js'); - const distPath2 = join(distFolder2, 'index.js'); - - const childProcess = exec('npx rslib mf-dev --lib mf1 --lib mf2', { - cwd: fixturePath, - }); - - await awaitFileExists(distPath1); - await awaitFileExists(distPath2); - - expect(existsSync(distPath1)).toBe(true); - expect(existsSync(distPath2)).toBe(true); - - childProcess.kill(); - }); -}); diff --git a/tests/integration/cli/mf-dev/rslib.config.ts b/tests/integration/cli/mf-dev/rslib.config.ts deleted file mode 100644 index 1a7fba16a..000000000 --- a/tests/integration/cli/mf-dev/rslib.config.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { pluginModuleFederation } from '@module-federation/rsbuild-plugin'; -import { defineConfig } from '@rslib/core'; - -export default defineConfig({ - lib: [ - { - format: 'mf', - output: { - distPath: { - root: 'dist-mf0', - }, - }, - }, - { - format: 'mf', - output: { - distPath: { - root: 'dist-mf1', - }, - }, - }, - { - id: 'mf2', - format: 'mf', - output: { - distPath: { - root: 'dist-mf2', - }, - }, - }, - ], - server: { - port: 3007, - }, - plugins: [ - pluginModuleFederation({ - name: 'test', - }), - ], -}); diff --git a/tests/integration/cli/mf/build/package.json b/tests/integration/cli/mf/build/package.json new file mode 100644 index 000000000..b6bd9e98f --- /dev/null +++ b/tests/integration/cli/mf/build/package.json @@ -0,0 +1,6 @@ +{ + "name": "cli-mf-build-test", + "version": "1.0.0", + "private": true, + "type": "module" +} diff --git a/tests/integration/cli/mf/build/rslib.config.ts b/tests/integration/cli/mf/build/rslib.config.ts new file mode 100644 index 000000000..f25b2f647 --- /dev/null +++ b/tests/integration/cli/mf/build/rslib.config.ts @@ -0,0 +1,9 @@ +import { defineConfig } from '@rslib/core'; +import { generateBundleMFConfig } from 'test-helper'; + +export default defineConfig({ + lib: [generateBundleMFConfig({ name: 'test-build' })], + server: { + port: 3007, + }, +}); diff --git a/tests/integration/cli/mf-dev/src/index.ts b/tests/integration/cli/mf/build/src/index.ts similarity index 100% rename from tests/integration/cli/mf-dev/src/index.ts rename to tests/integration/cli/mf/build/src/index.ts diff --git a/tests/integration/cli/mf-dev/package.json b/tests/integration/cli/mf/dev/package.json similarity index 100% rename from tests/integration/cli/mf-dev/package.json rename to tests/integration/cli/mf/dev/package.json diff --git a/tests/integration/cli/mf/dev/rslib.config.ts b/tests/integration/cli/mf/dev/rslib.config.ts new file mode 100644 index 000000000..46fe84e3b --- /dev/null +++ b/tests/integration/cli/mf/dev/rslib.config.ts @@ -0,0 +1,47 @@ +import { defineConfig } from '@rslib/core'; +import { generateBundleMFConfig } from 'test-helper'; + +export default defineConfig({ + lib: [ + generateBundleMFConfig( + { + name: 'test0', + }, + { + output: { + distPath: { + root: 'dist-mf0', + }, + }, + }, + ), + generateBundleMFConfig( + { + name: 'test1', + }, + { + output: { + distPath: { + root: 'dist-mf1', + }, + }, + }, + ), + generateBundleMFConfig( + { + name: 'test2', + }, + { + id: 'mf2', + output: { + distPath: { + root: 'dist-mf2', + }, + }, + }, + ), + ], + server: { + port: 3007, + }, +}); diff --git a/tests/integration/cli/mf/dev/src/index.ts b/tests/integration/cli/mf/dev/src/index.ts new file mode 100644 index 000000000..3329a7d97 --- /dev/null +++ b/tests/integration/cli/mf/dev/src/index.ts @@ -0,0 +1 @@ +export const foo = 'foo'; diff --git a/tests/integration/cli/mf/mf.test.ts b/tests/integration/cli/mf/mf.test.ts new file mode 100644 index 000000000..9c27c41bd --- /dev/null +++ b/tests/integration/cli/mf/mf.test.ts @@ -0,0 +1,81 @@ +import { exec, execSync } from 'node:child_process'; +import { join } from 'node:path'; +import { describe } from 'node:test'; +import fse, { existsSync } from 'fs-extra'; +import { awaitFileExists } from 'test-helper'; +import { expect, test } from 'vitest'; + +describe('mf-dev', () => { + test('mf-dev --lib', async () => { + const fixturePath = join(__dirname, 'dev'); + const distFolder = join(fixturePath, 'dist-mf0'); + const rsbuildConfigFile = join(distFolder, '.rsbuild/rsbuild.config.mjs'); + const rspackConfigFile = join(distFolder, '.rsbuild/rspack.config.mf0.mjs'); + + fse.removeSync(distFolder); + const distPath = join(distFolder, 'index.js'); + + const childProcess = exec('npx rslib mf-dev --lib mf0', { + cwd: fixturePath, + env: { + ...process.env, + DEBUG: 'rsbuild', + }, + }); + + await awaitFileExists(distPath); + + const rspackConfigContent = await fse.readFile(rspackConfigFile, 'utf-8'); + expect(rspackConfigContent).toContain(`nodeEnv: 'development'`); + expect(rspackConfigContent).toContain(`moduleIds: 'named'`); + + const rsbuildConfigContent = await fse.readFile(rsbuildConfigFile, 'utf-8'); + expect(rsbuildConfigContent).toContain('writeToDisk: true'); + expect(existsSync(distPath)).toBe(true); + + childProcess.kill(); + }); + + test('mf-dev --lib multiple', async () => { + const fixturePath = join(__dirname, 'dev'); + const distFolder1 = join(fixturePath, 'dist-mf1'); + const distFolder2 = join(fixturePath, 'dist-mf2'); + fse.removeSync(distFolder1); + fse.removeSync(distFolder2); + const distPath1 = join(distFolder1, 'index.js'); + const distPath2 = join(distFolder2, 'index.js'); + + const childProcess = exec('npx rslib mf-dev --lib mf1 --lib mf2', { + cwd: fixturePath, + }); + + await awaitFileExists(distPath1); + await awaitFileExists(distPath2); + + expect(existsSync(distPath1)).toBe(true); + expect(existsSync(distPath2)).toBe(true); + + childProcess.kill(); + }); +}); + +describe('mf build', () => { + test('should compose config correctly', async () => { + const fixturePath = join(__dirname, 'build'); + const distPath = join(fixturePath, 'dist/mf'); + const rspackConfigFile = join(distPath, '.rsbuild/rspack.config.mf.mjs'); + + execSync('npx rslib build', { + cwd: fixturePath, + env: { + ...process.env, + DEBUG: 'rsbuild', + }, + }); + + const rspackConfigContent = await fse.readFile(rspackConfigFile, 'utf-8'); + + expect(rspackConfigContent).toContain(`nodeEnv: 'production'`); + expect(rspackConfigContent).toContain(`moduleIds: 'deterministic'`); + }); +}); diff --git a/tests/integration/plugins/mf-dev/rslib.config.ts b/tests/integration/plugins/mf-dev/rslib.config.ts index 74fbe8e34..5cd78330a 100644 --- a/tests/integration/plugins/mf-dev/rslib.config.ts +++ b/tests/integration/plugins/mf-dev/rslib.config.ts @@ -1,12 +1,12 @@ import fs from 'node:fs'; import path from 'node:path'; -import { pluginModuleFederation } from '@module-federation/rsbuild-plugin'; import type { RsbuildPlugin } from '@rsbuild/core'; import { defineConfig } from '@rslib/core'; +import { generateBundleMFConfig } from 'test-helper'; let count = 0; -export const plugin1Path = path.resolve(__dirname, 'dist/plugin1.txt'); -export const plugin2Path = path.resolve(__dirname, 'dist/plugin2.txt'); +export const plugin1Path = path.resolve(__dirname, 'dist/mf/plugin1.txt'); +export const plugin2Path = path.resolve(__dirname, 'dist/mf/plugin2.txt'); const testPlugin1: RsbuildPlugin = { name: 'test1', @@ -28,10 +28,12 @@ const testPlugin2: RsbuildPlugin = { export default defineConfig({ lib: [ - { - format: 'mf', - plugins: [pluginModuleFederation({ name: 'test-plugins' }), testPlugin2], - }, + generateBundleMFConfig( + { name: 'test-plugins' }, + { + plugins: [testPlugin2], + }, + ), ], server: { port: 3009, diff --git a/tests/integration/server/index.test.ts b/tests/integration/server/index.test.ts index 1adeb6ec4..d22dfa900 100644 --- a/tests/integration/server/index.test.ts +++ b/tests/integration/server/index.test.ts @@ -18,7 +18,7 @@ describe('server config', async () => { test('mf-dev command', async () => { const fixturePath = join(__dirname, 'mf-dev'); - const distPath = join(fixturePath, 'dist'); + const distPath = join(fixturePath, 'dist/mf'); const rsbuildConfigFile = join(distPath, '.rsbuild/rsbuild.config.mjs'); const doneFile = join(distPath, 'done.txt'); diff --git a/tests/integration/server/mf-dev/rslib.config.ts b/tests/integration/server/mf-dev/rslib.config.ts index 95c7425bd..6525d25e4 100644 --- a/tests/integration/server/mf-dev/rslib.config.ts +++ b/tests/integration/server/mf-dev/rslib.config.ts @@ -1,10 +1,10 @@ import fs from 'node:fs'; import { join } from 'node:path'; -import { pluginModuleFederation } from '@module-federation/rsbuild-plugin'; import type { RsbuildPlugin } from '@rsbuild/core'; import { defineConfig } from '@rslib/core'; +import { generateBundleMFConfig } from 'test-helper'; -const distPath = join(__dirname, 'dist'); +const distPath = join(__dirname, 'dist/mf'); const afterDevCompileDonePlugin: RsbuildPlugin = { name: 'dev-done', @@ -16,19 +16,10 @@ const afterDevCompileDonePlugin: RsbuildPlugin = { }; export default defineConfig({ - lib: [ - { - format: 'mf', - }, - ], + lib: [generateBundleMFConfig({ name: 'test' })], server: { port: 3011, open: true, }, - plugins: [ - pluginModuleFederation({ - name: 'test', - }), - afterDevCompileDonePlugin, - ], + plugins: [afterDevCompileDonePlugin], }); From 969733ec5cf4b220d8e601c19f8c4df53424c03e Mon Sep 17 00:00:00 2001 From: Timeless0911 <1604889533@qq.com> Date: Wed, 25 Dec 2024 18:20:23 +0800 Subject: [PATCH 2/2] chore: update --- packages/core/tests/__snapshots__/config.test.ts.snap | 2 +- tests/integration/cli/mf/build/rslib.config.ts | 3 --- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/core/tests/__snapshots__/config.test.ts.snap b/packages/core/tests/__snapshots__/config.test.ts.snap index 02d90d05a..65289ae66 100644 --- a/packages/core/tests/__snapshots__/config.test.ts.snap +++ b/packages/core/tests/__snapshots__/config.test.ts.snap @@ -1,6 +1,6 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`Should compose create Rsbuild config correctly > Merge Rsbuild config 1`] = ` +exports[`Should compose create Rsbuild config correctly > Merge Rsbuild config in each format 1`] = ` [ { "config": { diff --git a/tests/integration/cli/mf/build/rslib.config.ts b/tests/integration/cli/mf/build/rslib.config.ts index f25b2f647..5bada94c4 100644 --- a/tests/integration/cli/mf/build/rslib.config.ts +++ b/tests/integration/cli/mf/build/rslib.config.ts @@ -3,7 +3,4 @@ import { generateBundleMFConfig } from 'test-helper'; export default defineConfig({ lib: [generateBundleMFConfig({ name: 'test-build' })], - server: { - port: 3007, - }, });