Skip to content

Commit 62fe489

Browse files
2heal12heal1
authored
feat: add dts cli (#3578)
1 parent 60d1fc1 commit 62fe489

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+1176
-180
lines changed

‎.changeset/config.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,8 @@
2626
"@module-federation/error-codes",
2727
"@module-federation/inject-external-runtime-core-plugin",
2828
"@module-federation/runtime-core",
29-
"create-module-federation"
29+
"create-module-federation",
30+
"@module-federation/cli"
3031
]
3132
],
3233
"ignorePatterns": ["^alpha|^beta"],

‎apps/website-new/docs/en/configure/dts.mdx

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -209,6 +209,75 @@ Before loading type files, whether to delete the previously loaded `typesFolder`
209209

210210
`typesFolder` corresponding to `remotes` directory configuration
211211

212+
#### remoteTypeUrls
213+
214+
- Type: `(() => Promise<RemoteTypeUrls>) | RemoteTypeUrls`
215+
- Required: No
216+
- Default value:`undefined`
217+
218+
Used for getting the address of the `remote` type file.
219+
220+
Application scenarios:
221+
222+
* Only the runtime API is used to load the producer, and no build plugin is used. The MF type file address is informed by creating a `module-federation.config.ts` configuration file and setting this configuration.
223+
224+
```ts title="module-federation.config.ts"
225+
import { createModuleFederationConfig, type moduleFederationPlugin } from '@module-federation/enhanced';
226+
227+
export default createModuleFederationConfig({
228+
// ...
229+
remotes: {
230+
'remote1-alias': 'remote1@http://localhost:80801/remoteEntry.js'
231+
},
232+
dts:{
233+
consumeTypes:{
234+
remoteTypeUrls: async()=>{
235+
// Simulate the request interface to obtain the type file address
236+
const data = await new Promise<moduleFederationPlugin.RemoteTypeUrls>(resolve=>{
237+
setTimeout(()=>{
238+
resolve({
239+
remote1:{
240+
alias: 'remote1-alias',
241+
api:'http://localhost:8081/custom-dir/@mf-types.d.ts',
242+
zip:'http://localhost:8081/custom-dir/@mf-types.zip'
243+
}
244+
} )
245+
},1000)
246+
});
247+
248+
return data;
249+
}
250+
}
251+
}
252+
});
253+
```
254+
255+
256+
* When remote is `remoteEntry.js`, the type file address usually directly replaces the js file with the corresponding type file, such as `@mf-types.zip`, but the actual uploaded type file address is not this, so you can tell MF the real type file address by setting this configuration.
257+
258+
```ts title="module-federation.config.ts"
259+
import { createModuleFederationConfig } from '@module-federation/enhanced';
260+
261+
export default createModuleFederationConfig({
262+
// ...
263+
remotes: {
264+
'remote1-alias': 'remote1@http://localhost:80801/remoteEntry.js'
265+
},
266+
dts:{
267+
consumeTypes:{
268+
remoteTypeUrls: {
269+
// remote name
270+
remote1:{
271+
alias: 'remote1-alias',
272+
api:'http://localhost:8081/custom-dir/@mf-types.d.ts',
273+
zip:'http://localhost:8081/custom-dir/@mf-types.zip'
274+
}
275+
}
276+
}
277+
}
278+
});
279+
```
280+
212281
### tsConfigPath
213282

214283
- Type: `string`

‎apps/website-new/docs/en/guide/basic/_meta.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
["runtime", "rsbuild", "rspack", "webpack", "vite", "chrome-devtool", "type-prompt"]
1+
["runtime", "rsbuild", "rspack", "webpack", "vite", "chrome-devtool", "type-prompt","cli"]

‎apps/website-new/docs/en/guide/basic/cli.mdx

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
# CLI
2+
3+
`@module-federation/enhanced` and `@module-federation/modern-js` provides a lightweight CLI.
4+
5+
## All commands
6+
7+
To view all available CLI commands, run the following command in the project directory:
8+
9+
```bash
10+
npx mf -h
11+
```
12+
13+
The output is shown below:
14+
15+
```text
16+
Usage: mf <command> [options]
17+
18+
Options:
19+
-V, --version output the version number
20+
-h, --help display help for command
21+
22+
Commands:
23+
dts [options] generate or fetch the mf types
24+
help [command] display help for command
25+
```
26+
27+
## Common flags
28+
29+
Module Federation CLI provides several common flags that can be used with all commands:
30+
31+
| Flag | Description |
32+
| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
33+
| `-c, --config <config>` | Specify the configuration file, can be a relative or absolute path, default value is `module-federation.ts` |
34+
| `-m, --mode <mode>` | Specify the runtime environment. You can choose "dev" or "prod". The default value is "dev". After setting, the `process.env.NODE_ENV` environment variable will be automatically injected with "development" or "production" according to the value. |
35+
| `-h, --help` | Display help for command |
36+
37+
## mf dts
38+
39+
The `mf dts` command is used to generate or fetch remote types.
40+
41+
```bash
42+
Usage: mf dts [options]
43+
44+
generate or fetch the mf types
45+
46+
Options:
47+
--root <root> specify the project root directory
48+
--output <output> specify the generated dts output directory
49+
--fetch <boolean> fetch types from remote, default is true (default: true)
50+
--generate <boolean> generate types, default is true (default: true)
51+
-c --config <config> specify the configuration file, can be a relative or absolute path
52+
-m --mode <mode> Specify the runtime environment. You can choose "dev" or "prod". The default value is "dev". After setting, the process.env.NODE_ENV environment variable will be
53+
automatically injected with "development" or "production" according to the value. (default: "dev")
54+
-h, --help display help for command
55+
```
56+
57+
:::info Note
58+
59+
The `mf dts` command will automatically generate or pull type declaration files based on the configuration in `module-federation.config.ts`. This means you must provide a valid configuration file, otherwise the command will not work properly.
60+
61+
If you only use the runtime API, you need to create a temporary `module-federation.config.ts` file, write the remote configuration you need to get the type, and then run the `mf dts` command.
62+
If you are only using the runtime API, you need to create a temporary `module-federation.config.ts` file, configure [dts.consumeTypes.remoteTypeUrls](../../configure/dts#remotetypeurls), and then run the `mf dts` command.
63+
64+
:::

‎apps/website-new/docs/zh/configure/dts.mdx

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -209,6 +209,74 @@ interface DtsHostOptions {
209209

210210
对应 `remotes` 目录配置的 `typesFolder`
211211

212+
#### remoteTypeUrls
213+
214+
- 类型：`(() => Promise<RemoteTypeUrls>) | RemoteTypeUrls`
215+
- 是否必填：否
216+
- 默认值：`undefined`
217+
218+
用于获取 `remote` 类型文件的地址。
219+
220+
应用场景：
221+
222+
* 只使用了 runtime API 加载生产者，没使用构建插件，通过创建 `module-federation.config.ts` 配置文件，并设置此配置，来告知 MF 类型文件地址。
223+
224+
```ts title="module-federation.config.ts"
225+
import { createModuleFederationConfig, type moduleFederationPlugin } from '@module-federation/enhanced';
226+
227+
export default createModuleFederationConfig({
228+
// ...
229+
remotes: {
230+
'remote1-alias': 'remote1@http://localhost:80801/remoteEntry.js'
231+
},
232+
dts:{
233+
consumeTypes:{
234+
remoteTypeUrls: async()=>{
235+
// 模拟请求接口获取类型文件地址
236+
const data = await new Promise<moduleFederationPlugin.RemoteTypeUrls>(resolve=>{
237+
setTimeout(()=>{
238+
resolve({
239+
remote1:{
240+
alias: 'remote1-alias',
241+
api:'http://localhost:8081/custom-dir/@mf-types.d.ts',
242+
zip:'http://localhost:8081/custom-dir/@mf-types.zip'
243+
}
244+
} )
245+
},1000)
246+
});
247+
248+
return data;
249+
}
250+
}
251+
}
252+
});
253+
```
254+
255+
* 当 remote 为 `remoteEntry.js` 时，类型文件地址通常会直接替换 js 文件为对应的类型文件，例如 `@mf-types.zip` ，但是实际上传的类型文件地址不是这个，那么可以通过设置此配置来告知 MF 真正的类型文件地址。
256+
257+
```ts title="module-federation.config.ts"
258+
import { createModuleFederationConfig } from '@module-federation/enhanced';
259+
260+
export default createModuleFederationConfig({
261+
// ...
262+
remotes: {
263+
'remote1-alias': 'remote1@http://localhost:80801/remoteEntry.js'
264+
},
265+
dts:{
266+
consumeTypes:{
267+
remoteTypeUrls: {
268+
// remote name
269+
remote1:{
270+
alias: 'remote1-alias',
271+
api:'http://localhost:8081/custom-dir/@mf-types.d.ts',
272+
zip:'http://localhost:8081/custom-dir/@mf-types.zip'
273+
}
274+
}
275+
}
276+
}
277+
});
278+
```
279+
212280
### tsConfigPath
213281

214282
- 类型：`string`

‎apps/website-new/docs/zh/guide/basic/_meta.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
["runtime", "rsbuild", "rspack", "webpack", "vite", "chrome-devtool", "type-prompt"]
1+
["runtime", "rsbuild", "rspack", "webpack", "vite", "chrome-devtool", "type-prompt","cli"]

‎apps/website-new/docs/zh/guide/basic/cli.mdx

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
# 命令行工具
2+
3+
`@module-federation/enhanced` 和 `@module-federation/modern-js` 提供了轻量的命令行工具。
4+
5+
## 查看所有命令
6+
7+
如果你需要查看所有可用的 CLI 命令，请在项目目录中运行以下命令：
8+
9+
```bash
10+
npx mf -h
11+
```
12+
13+
输出如下：
14+
15+
```text
16+
Usage: mf <command> [options]
17+
18+
Options:
19+
-V, --version output the version number
20+
-h, --help display help for command
21+
22+
Commands:
23+
dts [options] generate or fetch the mf types
24+
help [command] display help for command
25+
```
26+
27+
## 公共选项
28+
29+
Module Federation CLI 提供了一些公共选项，可以用于所有命令：
30+
31+
| 选项 | 描述 |
32+
| -------------------------- | ----------------------------------------------------------------------------------------------------------------- |
33+
| `-c, --config <config>` | 指定配置文件路径，可以为相对路径或绝对路径，默认值为 `module-federation.config.ts` |
34+
| `-m, --mode <mode>` | 指定运行环境，可以选择 "dev" 或 "prod" ，默认值为 "dev" ，设置后会按照值自动往 `process.env.NODE_ENV` 环境变量注入 "development" 或 "production" |
35+
| `-h, --help` | 显示命令帮助 |
36+
37+
## mf dts
38+
39+
`mf dts` 命令用于拉取或生成 TypeScript 类型声明文件。
40+
41+
```bash
42+
Usage: mf dts [options]
43+
44+
generate or fetch the mf types
45+
46+
Options:
47+
--root <root> specify the project root directory
48+
--output <output> specify the generated dts output directory
49+
--fetch <boolean> fetch types from remote, default is true (default: true)
50+
--generate <boolean> generate types, default is true (default: true)
51+
-c --config <config> specify the configuration file, can be a relative or absolute path
52+
-m --mode <mode> Specify the runtime environment. You can choose "dev" or "prod". The default value is "dev". After setting, the process.env.NODE_ENV environment variable will be
53+
automatically injected with "development" or "production" according to the value. (default: "dev")
54+
-h, --help display help for command
55+
```
56+
57+
:::info 注意
58+
59+
`mf dts` 命令会自动根据 `module-federation.config.ts` 中的配置生成或拉取类型声明文件。 这意味着你必须提供一个有效的配置文件，否则命令将无法正常运行。
60+
61+
如果你是只使用了 runtime API，那么你需要创建一份临时的 `module-federation.config.ts` 文件，配置 [dts.consumeTypes.remoteTypeUrls](../../configure/dts#remotetypeurls)，然后运行 `mf dts` 命令。
62+
63+
:::

‎packages/cli/CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# @module-federation/cli

‎packages/cli/LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2025-present hanric(2heal1)
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎packages/cli/README.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<p align="center">
2+
<a href="https://module-federation.io/" target="blank"><img src="https://module-federation.io/module-federation.svg" alt="Module Federation 2.0" /></a>
3+
</p>
4+
5+
# @module-federation/cli
6+
7+
Module Federation CLI
8+
9+
<p>
10+
<a href="https://npmjs.com/package/@module-federation/cli">
11+
<img src="https://img.shields.io/npm/v/@module-federation/cli?style=flat-square&colorA=564341&colorB=EDED91" alt="npm version" />
12+
</a>
13+
<img src="https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square&colorA=564341&colorB=EDED91" alt="license" />
14+
<a href="https://npmcharts.com/compare/@module-federation/cli?minimal=true"><img src="https://img.shields.io/npm/dm/@module-federation/cli.svg?style=flat-square&colorA=564341&colorB=EDED91" alt="downloads" /></a>
15+
</p>

‎packages/cli/bin/mf.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
#!/usr/bin/env node
2+
const { runCli } = require('../dist/index.cjs.js');
3+
4+
runCli();

‎packages/cli/package.json

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
{
2+
"name": "@module-federation/cli",
3+
"version": "0.10.0",
4+
"type": "commonjs",
5+
"description": "Module Federation CLI",
6+
"homepage": "https://module-federation.io",
7+
"bugs": {
8+
"url": "https://github.com/module-federation/core/issues"
9+
},
10+
"repository": {
11+
"type": "git",
12+
"url": "https://github.com/module-federation/core",
13+
"directory": "packages/cli"
14+
},
15+
"bin": {
16+
"mf": "./bin/mf.js"
17+
},
18+
"license": "MIT",
19+
"main": "./dist/index.cjs.js",
20+
"files": [
21+
"dist",
22+
"bin"
23+
],
24+
"dependencies": {
25+
"@module-federation/sdk": "workspace:*",
26+
"@module-federation/dts-plugin": "workspace:*",
27+
"commander": "11.1.0",
28+
"chalk": "3.0.0",
29+
"@modern-js/node-bundle-require": "2.65.1"
30+
},
31+
"devDependencies": {
32+
"@types/node": "~16.11.7"
33+
},
34+
"engines": {
35+
"node": ">=16.0.0"
36+
},
37+
"publishConfig": {
38+
"access": "public",
39+
"provenance": true,
40+
"registry": "https://registry.npmjs.org/"
41+
}
42+
}

0 commit comments

Comments
 (0)