From 92ce99150c52b9f4aa0b0ff0f354a361d5a52426 Mon Sep 17 00:00:00 2001 From: Wei Date: Wed, 13 Nov 2024 14:48:00 +0800 Subject: [PATCH] feat(externals): support 'commonjs-import' type (#8414) --- crates/rspack_core/src/external_module.rs | 7 ++ .../externals/commonjs-import/case.js | 3 + .../externals/commonjs-import/index.js | 11 +++ .../commonjs-import/rspack.config.js | 19 +++++ .../externals/commonjs-import/test.config.js | 6 ++ packages/rspack/etc/core.api.md | 22 +++--- packages/rspack/src/config/types.ts | 3 +- packages/rspack/src/config/zod.ts | 3 +- website/docs/en/config/externals.mdx | 79 ++++++++++++++++--- website/docs/zh/config/externals.mdx | 78 +++++++++++++++--- 10 files changed, 198 insertions(+), 33 deletions(-) create mode 100644 packages/rspack-test-tools/tests/configCases/externals/commonjs-import/case.js create mode 100644 packages/rspack-test-tools/tests/configCases/externals/commonjs-import/index.js create mode 100644 packages/rspack-test-tools/tests/configCases/externals/commonjs-import/rspack.config.js create mode 100644 packages/rspack-test-tools/tests/configCases/externals/commonjs-import/test.config.js diff --git a/crates/rspack_core/src/external_module.rs b/crates/rspack_core/src/external_module.rs index f8c64dc1c1c..1b6283a4168 100644 --- a/crates/rspack_core/src/external_module.rs +++ b/crates/rspack_core/src/external_module.rs @@ -129,6 +129,13 @@ fn resolve_external_type<'a>( dependency_meta: &'a DependencyMeta, ) -> &'a str { match external_type { + "commonjs-import" => { + if let Some(ExternalTypeEnum::Import) = dependency_meta.external_type.as_ref() { + "import" + } else { + "commonjs" + } + } "module-import" => { if let Some(external_type) = dependency_meta.external_type.as_ref() { match external_type { diff --git a/packages/rspack-test-tools/tests/configCases/externals/commonjs-import/case.js b/packages/rspack-test-tools/tests/configCases/externals/commonjs-import/case.js new file mode 100644 index 00000000000..519b5baf499 --- /dev/null +++ b/packages/rspack-test-tools/tests/configCases/externals/commonjs-import/case.js @@ -0,0 +1,3 @@ +import e1 from 'external1' +const e2 = import('external2') + diff --git a/packages/rspack-test-tools/tests/configCases/externals/commonjs-import/index.js b/packages/rspack-test-tools/tests/configCases/externals/commonjs-import/index.js new file mode 100644 index 00000000000..b96b94e569d --- /dev/null +++ b/packages/rspack-test-tools/tests/configCases/externals/commonjs-import/index.js @@ -0,0 +1,11 @@ +const fs = require("fs"); +const path = require("path"); +const readCase = (name)=> fs.readFileSync(path.resolve(__dirname, `${name}.js`), "utf-8"); +const caseContent = readCase("case"); + +it("dynamic import should be preserved, others should be in commonjs external", function () { + expect(caseContent).toContain(`import("external2-alias")`) + expect(caseContent).toContain(`require("external1-alias")`) + expect(caseContent).not.toContain(`require("external2-alias")`) + expect(caseContent).toContain(`const e2 = Promise.resolve(/* import() */).then(__webpack_require__.bind(__webpack_require__, `) +}); diff --git a/packages/rspack-test-tools/tests/configCases/externals/commonjs-import/rspack.config.js b/packages/rspack-test-tools/tests/configCases/externals/commonjs-import/rspack.config.js new file mode 100644 index 00000000000..a16a4418ac8 --- /dev/null +++ b/packages/rspack-test-tools/tests/configCases/externals/commonjs-import/rspack.config.js @@ -0,0 +1,19 @@ +/** @type {import("@rspack/core").Configuration} */ +module.exports = [ + { + target: "node", + entry: { + "index": "./index.js", + "case": "./case.js", + }, + externalsType: "commonjs-import", + output: { + module: false, + filename: "[name].js", + }, + externals: { + external1: "external1-alias", + external2: "external2-alias", + }, + }, +]; diff --git a/packages/rspack-test-tools/tests/configCases/externals/commonjs-import/test.config.js b/packages/rspack-test-tools/tests/configCases/externals/commonjs-import/test.config.js new file mode 100644 index 00000000000..7efbb3069ee --- /dev/null +++ b/packages/rspack-test-tools/tests/configCases/externals/commonjs-import/test.config.js @@ -0,0 +1,6 @@ +/** @type {import("../../../../dist").TConfigCaseConfig} */ +module.exports = { + findBundle: (i, options) => { + return ["index.js"]; + } +}; diff --git a/packages/rspack/etc/core.api.md b/packages/rspack/etc/core.api.md index 12685109bed..aea81050cba 100644 --- a/packages/rspack/etc/core.api.md +++ b/packages/rspack/etc/core.api.md @@ -2002,10 +2002,10 @@ export type ExternalsPresets = { }; // @public -export type ExternalsType = "var" | "module" | "assign" | "this" | "window" | "self" | "global" | "commonjs" | "commonjs2" | "commonjs-module" | "commonjs-static" | "amd" | "amd-require" | "umd" | "umd2" | "jsonp" | "system" | "promise" | "import" | "module-import" | "script" | "node-commonjs"; +export type ExternalsType = "var" | "module" | "assign" | "this" | "window" | "self" | "global" | "commonjs" | "commonjs2" | "commonjs-module" | "commonjs-static" | "amd" | "amd-require" | "umd" | "umd2" | "jsonp" | "system" | "promise" | "import" | "module-import" | "script" | "node-commonjs" | "commonjs-import"; // @public (undocumented) -export const externalsType: z.ZodEnum<["var", "module", "assign", "this", "window", "self", "global", "commonjs", "commonjs2", "commonjs-module", "commonjs-static", "amd", "amd-require", "umd", "umd2", "jsonp", "system", "promise", "import", "module-import", "script", "node-commonjs"]>; +export const externalsType: z.ZodEnum<["var", "module", "assign", "this", "window", "self", "global", "commonjs", "commonjs2", "commonjs-module", "commonjs-static", "amd", "amd-require", "umd", "umd2", "jsonp", "system", "promise", "import", "module-import", "script", "node-commonjs", "commonjs-import"]>; // @public (undocumented) type ExtractCommentsBanner = string | boolean; @@ -6319,7 +6319,7 @@ export const rspackOptions: z.ZodObject<{ contextInfo?: { issuer: string; } | undefined; - }>, z.ZodFunction>, z.ZodOptional, z.ZodArray]>, ZodRspackCrossChecker]>>, z.ZodOptional>], z.ZodUnknown>, z.ZodVoid>], z.ZodUnknown>, z.ZodUnknown>]>, z.ZodFunction, z.ZodFunction>, z.ZodOptional, z.ZodArray]>, ZodRspackCrossChecker]>>, z.ZodOptional>], z.ZodUnknown>, z.ZodVoid>], z.ZodUnknown>, z.ZodUnknown>]>, z.ZodFunction; dependencyType: z.ZodOptional; request: z.ZodOptional; @@ -6369,7 +6369,7 @@ export const rspackOptions: z.ZodObject<{ contextInfo?: { issuer: string; } | undefined; - }>, z.ZodFunction>, z.ZodOptional, z.ZodArray]>, ZodRspackCrossChecker]>>, z.ZodOptional>], z.ZodUnknown>, z.ZodVoid>], z.ZodUnknown>, z.ZodUnknown>]>, z.ZodFunction, z.ZodFunction>, z.ZodOptional, z.ZodArray]>, ZodRspackCrossChecker]>>, z.ZodOptional>], z.ZodUnknown>, z.ZodVoid>], z.ZodUnknown>, z.ZodUnknown>]>, z.ZodFunction; dependencyType: z.ZodOptional; request: z.ZodOptional; @@ -6395,7 +6395,7 @@ export const rspackOptions: z.ZodObject<{ issuer: string; } | undefined; }>], z.ZodUnknown>, z.ZodPromise, z.ZodArray]>, ZodRspackCrossChecker]>>>]>]>>; - externalsType: z.ZodOptional>; + externalsType: z.ZodOptional>; externalsPresets: z.ZodOptional; web: z.ZodOptional; @@ -8652,7 +8652,7 @@ export const rspackOptions: z.ZodObject<{ contextInfo?: { issuer: string; } | undefined; - }, args_1: (args_0: Error | undefined, args_1: string | boolean | string[] | t.ExternalItemUmdValue | t.ExternalItemObjectValue | undefined, args_2: "module" | "global" | "system" | "script" | "commonjs" | "umd" | "amd" | "var" | "jsonp" | "import" | "assign" | "this" | "window" | "self" | "commonjs2" | "commonjs-module" | "commonjs-static" | "amd-require" | "umd2" | "promise" | "module-import" | "node-commonjs" | undefined, ...args: unknown[]) => void, ...args: unknown[]) => unknown) | ((args_0: { + }, args_1: (args_0: Error | undefined, args_1: string | boolean | string[] | t.ExternalItemUmdValue | t.ExternalItemObjectValue | undefined, args_2: "module" | "global" | "system" | "script" | "commonjs" | "umd" | "amd" | "var" | "jsonp" | "import" | "assign" | "this" | "window" | "self" | "commonjs2" | "commonjs-module" | "commonjs-static" | "amd-require" | "umd2" | "promise" | "module-import" | "node-commonjs" | "commonjs-import" | undefined, ...args: unknown[]) => void, ...args: unknown[]) => unknown) | ((args_0: { request?: string | undefined; context?: string | undefined; dependencyType?: string | undefined; @@ -8666,7 +8666,7 @@ export const rspackOptions: z.ZodObject<{ contextInfo?: { issuer: string; } | undefined; - }, args_1: (args_0: Error | undefined, args_1: string | boolean | string[] | t.ExternalItemUmdValue | t.ExternalItemObjectValue | undefined, args_2: "module" | "global" | "system" | "script" | "commonjs" | "umd" | "amd" | "var" | "jsonp" | "import" | "assign" | "this" | "window" | "self" | "commonjs2" | "commonjs-module" | "commonjs-static" | "amd-require" | "umd2" | "promise" | "module-import" | "node-commonjs" | undefined, ...args: unknown[]) => void, ...args: unknown[]) => unknown) | ((args_0: { + }, args_1: (args_0: Error | undefined, args_1: string | boolean | string[] | t.ExternalItemUmdValue | t.ExternalItemObjectValue | undefined, args_2: "module" | "global" | "system" | "script" | "commonjs" | "umd" | "amd" | "var" | "jsonp" | "import" | "assign" | "this" | "window" | "self" | "commonjs2" | "commonjs-module" | "commonjs-static" | "amd-require" | "umd2" | "promise" | "module-import" | "node-commonjs" | "commonjs-import" | undefined, ...args: unknown[]) => void, ...args: unknown[]) => unknown) | ((args_0: { request?: string | undefined; context?: string | undefined; dependencyType?: string | undefined; @@ -8674,7 +8674,7 @@ export const rspackOptions: z.ZodObject<{ issuer: string; } | undefined; }, ...args: unknown[]) => Promise))[] | undefined; - externalsType?: "module" | "global" | "system" | "script" | "commonjs" | "umd" | "amd" | "var" | "jsonp" | "import" | "assign" | "this" | "window" | "self" | "commonjs2" | "commonjs-module" | "commonjs-static" | "amd-require" | "umd2" | "promise" | "module-import" | "node-commonjs" | undefined; + externalsType?: "module" | "global" | "system" | "script" | "commonjs" | "umd" | "amd" | "var" | "jsonp" | "import" | "assign" | "this" | "window" | "self" | "commonjs2" | "commonjs-module" | "commonjs-static" | "amd-require" | "umd2" | "promise" | "module-import" | "node-commonjs" | "commonjs-import" | undefined; externalsPresets?: { node?: boolean | undefined; web?: boolean | undefined; @@ -9257,7 +9257,7 @@ export const rspackOptions: z.ZodObject<{ contextInfo?: { issuer: string; } | undefined; - }, args_1: (args_0: Error | undefined, args_1: string | boolean | string[] | t.ExternalItemUmdValue | t.ExternalItemObjectValue | undefined, args_2: "module" | "global" | "system" | "script" | "commonjs" | "umd" | "amd" | "var" | "jsonp" | "import" | "assign" | "this" | "window" | "self" | "commonjs2" | "commonjs-module" | "commonjs-static" | "amd-require" | "umd2" | "promise" | "module-import" | "node-commonjs" | undefined, ...args: unknown[]) => void, ...args: unknown[]) => unknown) | ((args_0: { + }, args_1: (args_0: Error | undefined, args_1: string | boolean | string[] | t.ExternalItemUmdValue | t.ExternalItemObjectValue | undefined, args_2: "module" | "global" | "system" | "script" | "commonjs" | "umd" | "amd" | "var" | "jsonp" | "import" | "assign" | "this" | "window" | "self" | "commonjs2" | "commonjs-module" | "commonjs-static" | "amd-require" | "umd2" | "promise" | "module-import" | "node-commonjs" | "commonjs-import" | undefined, ...args: unknown[]) => void, ...args: unknown[]) => unknown) | ((args_0: { request?: string | undefined; context?: string | undefined; dependencyType?: string | undefined; @@ -9271,7 +9271,7 @@ export const rspackOptions: z.ZodObject<{ contextInfo?: { issuer: string; } | undefined; - }, args_1: (args_0: Error | undefined, args_1: string | boolean | string[] | t.ExternalItemUmdValue | t.ExternalItemObjectValue | undefined, args_2: "module" | "global" | "system" | "script" | "commonjs" | "umd" | "amd" | "var" | "jsonp" | "import" | "assign" | "this" | "window" | "self" | "commonjs2" | "commonjs-module" | "commonjs-static" | "amd-require" | "umd2" | "promise" | "module-import" | "node-commonjs" | undefined, ...args: unknown[]) => void, ...args: unknown[]) => unknown) | ((args_0: { + }, args_1: (args_0: Error | undefined, args_1: string | boolean | string[] | t.ExternalItemUmdValue | t.ExternalItemObjectValue | undefined, args_2: "module" | "global" | "system" | "script" | "commonjs" | "umd" | "amd" | "var" | "jsonp" | "import" | "assign" | "this" | "window" | "self" | "commonjs2" | "commonjs-module" | "commonjs-static" | "amd-require" | "umd2" | "promise" | "module-import" | "node-commonjs" | "commonjs-import" | undefined, ...args: unknown[]) => void, ...args: unknown[]) => unknown) | ((args_0: { request?: string | undefined; context?: string | undefined; dependencyType?: string | undefined; @@ -9279,7 +9279,7 @@ export const rspackOptions: z.ZodObject<{ issuer: string; } | undefined; }, ...args: unknown[]) => Promise))[] | undefined; - externalsType?: "module" | "global" | "system" | "script" | "commonjs" | "umd" | "amd" | "var" | "jsonp" | "import" | "assign" | "this" | "window" | "self" | "commonjs2" | "commonjs-module" | "commonjs-static" | "amd-require" | "umd2" | "promise" | "module-import" | "node-commonjs" | undefined; + externalsType?: "module" | "global" | "system" | "script" | "commonjs" | "umd" | "amd" | "var" | "jsonp" | "import" | "assign" | "this" | "window" | "self" | "commonjs2" | "commonjs-module" | "commonjs-static" | "amd-require" | "umd2" | "promise" | "module-import" | "node-commonjs" | "commonjs-import" | undefined; externalsPresets?: { node?: boolean | undefined; web?: boolean | undefined; diff --git a/packages/rspack/src/config/types.ts b/packages/rspack/src/config/types.ts index 6fe41b6bfd2..d3bfa3a4969 100644 --- a/packages/rspack/src/config/types.ts +++ b/packages/rspack/src/config/types.ts @@ -1315,7 +1315,8 @@ export type ExternalsType = | "import" | "module-import" | "script" - | "node-commonjs"; + | "node-commonjs" + | "commonjs-import"; //#endregion //#region Externals diff --git a/packages/rspack/src/config/zod.ts b/packages/rspack/src/config/zod.ts index 0b847615d0d..302d786347b 100644 --- a/packages/rspack/src/config/zod.ts +++ b/packages/rspack/src/config/zod.ts @@ -791,7 +791,8 @@ export const externalsType = z.enum([ "import", "module-import", "script", - "node-commonjs" + "node-commonjs", + "commonjs-import" ]) satisfies z.ZodType; //#endregion diff --git a/website/docs/en/config/externals.mdx b/website/docs/en/config/externals.mdx index 1a3015aa010..8af16472fc1 100644 --- a/website/docs/en/config/externals.mdx +++ b/website/docs/en/config/externals.mdx @@ -29,7 +29,7 @@ For example, to include [jQuery](https://jquery.com/) from a CDN instead of bund module.exports = { //... externals: { - jquery: 'jQuery', + jquery: 'jquery', }, }; ``` @@ -292,6 +292,7 @@ Supported types: - [`'module'`](#externalstypemodule) - [`'import'`](#externalstypeimport) - uses `import()` to load a native EcmaScript module (async module) - [`'module-import'`](#externalstypemodule-import) +- [`'commonjs-import'`](#externalstypecommonjs-import) - `'jsonp'` - [`'node-commonjs'`](#externalstypenode-commonjs) - [`'promise'`](#externalstypepromise) - same as `'var'` but awaits the result (async module) @@ -414,7 +415,7 @@ Specify the default type of externals as `'import'`. Rspack will generate code l ```javascript async function foo() { - const jq = await import('jQuery'); + const jq = await import('jquery'); jq('.my-element').animate(/* ... */); } ``` @@ -432,8 +433,8 @@ Will generate into something like ```javascript var __webpack_modules__ = { - jQuery: module => { - module.exports = import('jQuery'); + jquery: module => { + module.exports = import('jquery'); }, }; @@ -441,7 +442,7 @@ var __webpack_modules__ = { async function foo() { const jq = await Promise.resolve(/* import() */).then( - __webpack_require__.bind(__webpack_require__, 'jQuery'), + __webpack_require__.bind(__webpack_require__, 'jquery'), ); jq('.my-element').animate(/* ... */); } @@ -461,15 +462,16 @@ Make sure to enable [`experiments.outputModule`](/config/#experimentsoutputmodul import { attempt } from 'lodash'; async function foo() { - const jq = await import('jQuery'); + const jq = await import('jquery'); attempt(() => jq('.my-element').animate(/* ... */)); } ``` ```js title="rspack.config.js" module.exports = { - externalsType: 'import', + externalsType: 'module-import', externals: { + lodash: 'lodash', jquery: 'jquery', }, }; @@ -482,8 +484,8 @@ import * as __WEBPACK_EXTERNAL_MODULE_lodash__ from 'lodash'; const lodash = __WEBPACK_EXTERNAL_MODULE_jquery__; var __webpack_modules__ = { - jQuery: module => { - module.exports = import('jQuery'); + jquery: module => { + module.exports = import('jquery'); }, }; @@ -491,7 +493,7 @@ var __webpack_modules__ = { async function foo() { const jq = await Promise.resolve(/* import() */).then( - __webpack_require__.bind(__webpack_require__, 'jQuery'), + __webpack_require__.bind(__webpack_require__, 'jquery'), ); (0, lodash.attempt)(() => jq('.my-element').animate(/* ... */)); } @@ -517,6 +519,63 @@ module.exports = { ] ``` +### externalsType['commonjs-import'] + +Specify the default type of externals as `'commonjs-import'`. This combines [`'commonjs'`](#externalstypecommonjs) and [`'import'`](#externalstypeimport). Rspack will automatically detect the type of import syntax, setting dynamic import to `'import'` and leaving others to `'commonjs'`. + +This is useful when building a Node.js application that target Node.js version higher than `13.2.0`, which supports both [`import()` expressions](https://nodejs.org/api/esm.html#import-expressions) and `require()`. + +:::note +`commonjs-import` type is only available of Rspack, and not applicable for webpack. +::: + +**Example** + +```javascript +import { attempt } from 'lodash'; + +async function foo() { + const jq = await import('jquery'); + attempt(() => jq('.my-element').animate(/* ... */)); +} +``` + +```js title="rspack.config.js" +module.exports = { + externalsType: 'commonjs-import', + externals: { + lodash: 'lodash', + jquery: 'jquery', + }, +}; +``` + +Will generate into something like + +```javascript +var __webpack_modules__ = { + lodash: function (module) { + module.exports = require('lodash'); + }, + jquery: function (module) { + module.exports = import('jquery'); + }, +}; + +// webpack runtime... + +async function foo() { + const jq = await Promise.resolve(/* import() */).then( + __webpack_require__.bind(__webpack_require__, 'jquery'), + ); + (0, lodash__WEBPACK_IMPORTED_MODULE_0__.attempt)(() => + jq('.my-element').animate(/* ... */), + ); +} +``` + +Note that there will be an `import()` statement in the output bundle. + ### externalsType['node-commonjs'] Specify the default type of externals as `'node-commonjs'`. Rspack will import [`createRequire`](https://nodejs.org/api/module.html#module_module_createrequire_filename) from `'module'` to construct a require function for loading externals used in a module. diff --git a/website/docs/zh/config/externals.mdx b/website/docs/zh/config/externals.mdx index e6973b3edba..61e300ef69b 100644 --- a/website/docs/zh/config/externals.mdx +++ b/website/docs/zh/config/externals.mdx @@ -29,7 +29,7 @@ import { Stability } from '../../../components/ApiMeta'; module.exports = { //... externals: { - jquery: 'jQuery', + jquery: 'jquery', }, }; ``` @@ -293,6 +293,7 @@ module.exports = { - [`'module'`](#externalstypemodule) - [`'import'`](#externalstypeimport) - 使用 `import()` 加载一个原生的 ECMAScript 模块（异步模块） - [`'module-import'`](#externalstypemodule-import) +- [`'commonjs-import'`](#externalstypecommonjs-import) - `'jsonp'` - [`'node-commonjs'`](#externalstypenode-commonjs) - [`'promise'`](#externalstypepromise) @@ -415,7 +416,7 @@ jq('.my-element').animate(/* ... */); ```javascript async function foo() { - const jq = await import('jQuery'); + const jq = await import('jquery'); jq('.my-element').animate(/* ... */); } ``` @@ -433,8 +434,8 @@ module.exports = { ```javascript var __webpack_modules__ = { - jQuery: module => { - module.exports = import('jQuery'); + jquery: module => { + module.exports = import('jquery'); }, }; @@ -442,7 +443,7 @@ var __webpack_modules__ = { async function foo() { const jq = await Promise.resolve(/* import() */).then( - __webpack_require__.bind(__webpack_require__, 'jQuery'), + __webpack_require__.bind(__webpack_require__, 'jquery'), ); jq('.my-element').animate(/* ... */); } @@ -460,14 +461,14 @@ async function foo() { import { attempt } from 'lodash'; async function foo() { - const jq = await import('jQuery'); + const jq = await import('jquery'); attempt(() => jq('.my-element').animate(/* ... */)); } ``` ```js title="rspack.config.js" module.exports = { - externalsType: 'import', + externalsType: 'module-import', externals: { jquery: 'jquery', }, @@ -481,8 +482,8 @@ import * as __WEBPACK_EXTERNAL_MODULE_lodash__ from 'lodash'; const lodash = __WEBPACK_EXTERNAL_MODULE_jquery__; var __webpack_modules__ = { - jQuery: module => { - module.exports = import('jQuery'); + jquery: module => { + module.exports = import('jquery'); }, }; @@ -490,7 +491,7 @@ var __webpack_modules__ = { async function foo() { const jq = await Promise.resolve(/* import() */).then( - __webpack_require__.bind(__webpack_require__, 'jQuery'), + __webpack_require__.bind(__webpack_require__, 'jquery'), ); (0, lodash.attempt)(() => jq('.my-element').animate(/* ... */)); } @@ -516,6 +517,63 @@ module.exports = { ] ``` +### externalsType['commonjs-import'] + +将 externals 的默认类型指定为 `'commonjs-import'`。这将结合 [`'commonjs'`](#externalstypecommonjs) 和 [`'import'`](#externalstypeimport)。Rspack 将自动检测导入语法的类型，对于动态导入设置为 `'import'`，其他的导入设置为 `'commonjs'`。 + +这在构建一个 Node.js 应用程序时非常有用，当目标 Node.js 版本高于 `13.2.0`，同时支持 [`import()` 表达式](https://nodejs.org/api/esm.html#import-expressions) 和 `require()`。 + +:::note +`commonjs-import` 类型仅在 Rspack 中可用，webpack 并不支持此类型。 +::: + +**示例** + +```javascript +import { attempt } from 'lodash'; + +async function foo() { + const jq = await import('jquery'); + attempt(() => jq('.my-element').animate(/* ... */)); +} +``` + +```js title="rspack.config.js" +module.exports = { + externalsType: 'commonjs-import', + externals: { + lodash: 'lodash', + jquery: 'jquery', + }, +}; +``` + +将会转换为类似下面的代码： + +```javascript +var __webpack_modules__ = { + lodash: function (module) { + module.exports = require('lodash'); + }, + jquery: function (module) { + module.exports = import('jquery'); + }, +}; + +// webpack runtime... + +async function foo() { + const jq = await Promise.resolve(/* import() */).then( + __webpack_require__.bind(__webpack_require__, 'jquery'), + ); + (0, lodash__WEBPACK_IMPORTED_MODULE_0__.attempt)(() => + jq('.my-element').animate(/* ... */), + ); +} +``` + +请注意，在输出产物中将有 `import()` 语句。 + ### externalsType['node-commonjs'] 将 externals 类型设置为 `'node-commonjs'`，Rspack 将从 `module` 中导入 [`createRequire`](https://nodejs.org/api/module.html#module_module_createrequire_filename) 来构造一个 require 函数，用于加载模块中使用的外部对象。