@modern-js/main-doc 2.60.6 → 2.61.0
Sign up to get free protection for your applications and to get access to all the features.
- package/docs/en/apis/app/runtime/core/use-runtime-context.mdx +86 -33
- package/docs/en/components/init-app.mdx +0 -1
- package/docs/en/components/init-rspack-app.mdx +0 -1
- package/docs/en/guides/advanced-features/source-build.mdx +11 -4
- package/docs/en/guides/basic-features/deploy.mdx +104 -2
- package/docs/en/guides/concept/entries.mdx +58 -5
- package/docs/en/guides/get-started/introduction.mdx +1 -38
- package/docs/zh/apis/app/runtime/core/use-runtime-context.mdx +86 -33
- package/docs/zh/components/default-mwa-generate.mdx +0 -1
- package/docs/zh/components/init-app.mdx +0 -1
- package/docs/zh/components/init-rspack-app.mdx +0 -1
- package/docs/zh/guides/advanced-features/source-build.mdx +11 -4
- package/docs/zh/guides/basic-features/deploy.mdx +103 -5
- package/docs/zh/guides/concept/entries.mdx +52 -4
- package/docs/zh/guides/get-started/introduction.mdx +1 -36
- package/package.json +4 -4
- package/src/i18n/enUS.ts +0 -7
- package/src/i18n/zhCN.ts +0 -7
- package/src/pages/index.tsx +3 -32
- package/docs/en/guides/topic-detail/generator/_meta.json +0 -17
- package/docs/en/guides/topic-detail/generator/create/_meta.json +0 -1
- package/docs/en/guides/topic-detail/generator/create/config.mdx +0 -59
- package/docs/en/guides/topic-detail/generator/create/option.md +0 -146
- package/docs/en/guides/topic-detail/generator/create/use.mdx +0 -48
- package/docs/en/guides/topic-detail/generator/new/_meta.json +0 -1
- package/docs/en/guides/topic-detail/generator/new/config.md +0 -115
- package/docs/en/guides/topic-detail/generator/new/option.md +0 -67
- package/docs/en/guides/topic-detail/generator/new/use.md +0 -75
- package/docs/en/guides/topic-detail/generator/plugin/_meta.json +0 -11
- package/docs/en/guides/topic-detail/generator/plugin/api/afterForged.md +0 -49
- package/docs/en/guides/topic-detail/generator/plugin/api/context.md +0 -184
- package/docs/en/guides/topic-detail/generator/plugin/api/input.md +0 -124
- package/docs/en/guides/topic-detail/generator/plugin/api/onForged.md +0 -310
- package/docs/en/guides/topic-detail/generator/plugin/category.md +0 -88
- package/docs/en/guides/topic-detail/generator/plugin/context.md +0 -104
- package/docs/en/guides/topic-detail/generator/plugin/structure.md +0 -106
- package/docs/en/guides/topic-detail/generator/plugin/use.md +0 -33
- package/docs/zh/guides/topic-detail/generator/_meta.json +0 -17
- package/docs/zh/guides/topic-detail/generator/create/_meta.json +0 -1
- package/docs/zh/guides/topic-detail/generator/create/config.mdx +0 -60
- package/docs/zh/guides/topic-detail/generator/create/option.md +0 -146
- package/docs/zh/guides/topic-detail/generator/create/use.mdx +0 -48
- package/docs/zh/guides/topic-detail/generator/new/_meta.json +0 -1
- package/docs/zh/guides/topic-detail/generator/new/config.md +0 -116
- package/docs/zh/guides/topic-detail/generator/new/option.md +0 -67
- package/docs/zh/guides/topic-detail/generator/new/use.md +0 -74
- package/docs/zh/guides/topic-detail/generator/plugin/_meta.json +0 -11
- package/docs/zh/guides/topic-detail/generator/plugin/api/afterForged.md +0 -50
- package/docs/zh/guides/topic-detail/generator/plugin/api/context.md +0 -184
- package/docs/zh/guides/topic-detail/generator/plugin/api/input.md +0 -124
- package/docs/zh/guides/topic-detail/generator/plugin/api/onForged.md +0 -310
- package/docs/zh/guides/topic-detail/generator/plugin/category.md +0 -93
- package/docs/zh/guides/topic-detail/generator/plugin/context.md +0 -105
- package/docs/zh/guides/topic-detail/generator/plugin/structure.md +0 -106
- package/docs/zh/guides/topic-detail/generator/plugin/use.md +0 -33
@@ -13,11 +13,10 @@ sidebar_position: 15
|
|
13
13
|
目前 Modern.js 仅支持在 Node.js 环境中运行,未来将提供更多运行时环境的支持。
|
14
14
|
:::
|
15
15
|
|
16
|
-
|
17
16
|
## 构建部署产物
|
18
17
|
|
19
18
|
执行 `modern deploy` 命令将自动输出部署产物。此过程包括优化 Bundler 构建产物及产物依赖,检测当前部署平台,并自动生成可以在该平台运行的产物。
|
20
|
-
|
19
|
+
如果你希望在本地生成并测试特定部署平台的产物,可以通过设置环境变量来指定平台:
|
21
20
|
|
22
21
|
```bash
|
23
22
|
MODERNJS_DEPLOY=netlify npx modern deploy
|
@@ -27,8 +26,7 @@ MODERNJS_DEPLOY=netlify npx modern deploy
|
|
27
26
|
在 Modern.js 官方支持的部署平台中部署时,无需指定环境变量。
|
28
27
|
:::
|
29
28
|
|
30
|
-
|
31
|
-
## Node.js
|
29
|
+
## ModernJS 内置 Node.js 服务器
|
32
30
|
|
33
31
|
### 单仓库项目
|
34
32
|
|
@@ -223,7 +221,6 @@ Vercel 是一个面向现代 Web 应用的部署平台,它提供了丰富的
|
|
223
221
|
}
|
224
222
|
```
|
225
223
|
|
226
|
-
|
227
224
|
### Monorepo 项目
|
228
225
|
|
229
226
|
:::info
|
@@ -277,5 +274,106 @@ Vercel 是一个面向现代 Web 应用的部署平台,它提供了丰富的
|
|
277
274
|
提交你的代码,使用 Vercel 平台部署即可。
|
278
275
|
|
279
276
|
|
277
|
+
## 自建 Node.js 服务器
|
278
|
+
|
279
|
+
通常情况下,我们推荐使用 Modern.js 内置的 Node.js 服务器来部署应用,它支持托管纯前端项目或者全栈项目,并且保证在开发和生产环境下的表现一致。
|
280
|
+
|
281
|
+
如果你的项目是纯前端项目,也可以通过自建 Node.js 服务器来部署应用,以下用一个 Koa 服务器的示例来演示如何托管一个纯前端项目的产物。
|
282
|
+
|
283
|
+
例如你有一个 Node.js 服务器的仓库,你可以将项目的产物复制到该仓库下,现在结构如下:
|
284
|
+
|
285
|
+
```bash
|
286
|
+
.
|
287
|
+
├── .output
|
288
|
+
│ ├── html
|
289
|
+
│ └── static
|
290
|
+
└── server.js
|
291
|
+
```
|
292
|
+
|
293
|
+
在 `server.js` 中,假定有如下代码:
|
294
|
+
|
295
|
+
```ts title="server.js"
|
296
|
+
import Koa from 'koa';
|
297
|
+
|
298
|
+
const app = new Koa();
|
299
|
+
app.use(async (ctx, next) => {
|
300
|
+
ctx.body = 'Hello Modern.js';
|
301
|
+
});
|
302
|
+
app.listen(3000);
|
303
|
+
```
|
304
|
+
|
305
|
+
现在,你可以新增部分代码,将静态资源和 HTML 文件的访问逻辑添加到 `server.js` 中。这里需要通过 `mime-types` 包来获取静态资源的 MIME 类型,因此我们先安装依赖:
|
306
|
+
|
307
|
+
import { PackageManagerTabs } from '@theme';
|
308
|
+
|
309
|
+
<PackageManagerTabs command="add mime-types" />
|
310
|
+
|
311
|
+
```ts title="server.js"
|
312
|
+
const Koa = require('koa');
|
313
|
+
const fs = require('fs');
|
314
|
+
const path = require('path');
|
315
|
+
const mime = require('mime-types');
|
316
|
+
|
317
|
+
const app = new Koa();
|
318
|
+
app.use(async (ctx, next) => {
|
319
|
+
if (ctx.path.startsWith('/static')) {
|
320
|
+
ctx.type = mime.lookup(ctx.path);
|
321
|
+
ctx.body = fs.createReadStream(path.resolve(__dirname, `.output${ctx.path}`));
|
322
|
+
} else if (ctx.path === '/') {
|
323
|
+
ctx.type = 'html';
|
324
|
+
ctx.body = fs.createReadStream(path.resolve(__dirname, '.output/html/main/index.html'));
|
325
|
+
}
|
326
|
+
});
|
327
|
+
app.listen(3000);
|
328
|
+
```
|
329
|
+
|
330
|
+
:::note
|
331
|
+
以上代码是最基础的例子,你的应用可能是多入口的,需要根据不同的路径访问不同的 HTML 文件,自建 Node.js 服务器也会存在更多的逻辑。
|
332
|
+
:::
|
333
|
+
|
334
|
+
需要注意的是,如果你的项目中使用 Modern.js 约定式路由,或是使用 React Router 自行搭建了浏览器端路由,你必须通过正确的 `baseURL` 来访问 HTML 文件。
|
335
|
+
|
336
|
+
在 Modern.js 中,默认的 `baseURL` 是 `'/'`,你可以通过在 `modern.config.ts` 中修改 [`server.baseUrl`](/configure/app/server/base-url) 来配置。
|
337
|
+
|
338
|
+
:::danger
|
339
|
+
存在浏览器路由的项目,永远无法通过 `/index.html` 路径来访问到 HTML 文件。
|
340
|
+
:::
|
341
|
+
|
342
|
+
## Nignx
|
343
|
+
|
344
|
+
Nginx 是一个高性能的 HTTP 和反向代理服务器,它可以处理静态文件、反向代理、负载均衡等功能。在 Nginx 上部署,通常需要配置 `nginx.conf` 文件。
|
345
|
+
|
346
|
+
如果你的项目是纯前端项目,也可以通过 Nginx 来部署应用,以下提供一个 Nginx 配置的示例来演示如何托管一个纯前端项目的产物。
|
347
|
+
|
348
|
+
```conf title="nginx.conf"
|
349
|
+
# user [user] [group];
|
350
|
+
worker_processes 1;
|
351
|
+
|
352
|
+
events {
|
353
|
+
worker_connections 1024;
|
354
|
+
}
|
355
|
+
|
356
|
+
http {
|
357
|
+
include mime.types;
|
358
|
+
default_type application/octet-stream;
|
359
|
+
|
360
|
+
server {
|
361
|
+
listen 8080;
|
362
|
+
server_name localhost;
|
363
|
+
|
364
|
+
location / {
|
365
|
+
# root [projectPath]/.output/html/main;
|
366
|
+
index index.html;
|
367
|
+
try_files $uri $uri/ =404;
|
368
|
+
}
|
369
|
+
|
370
|
+
location /static {
|
371
|
+
# alias [projectPath]/.output/static;
|
372
|
+
}
|
373
|
+
}
|
374
|
+
}
|
375
|
+
```
|
280
376
|
|
377
|
+
在上述配置中,你需要将 `[projectPath]` 替换为你的项目路径,将 `[user]` 和 `[group]` 替换为你当前的用户和用户组。
|
281
378
|
|
379
|
+
你可以将上述配置复制到 Nginx 安装目录的 `nginx.conf` 文件中,然后启动 Nginx 服务。你也可以通过 `nginx -c` 启动指定路径下的配置文件,此时你需要额外保证 `include` 指令配置的路径正确。
|
@@ -12,7 +12,7 @@ sidebar_position: 1
|
|
12
12
|
|
13
13
|
在 Modern.js 应用中,每一个入口对应一个独立的页面,也对应一条服务端路由。默认情况下,Modern.js 会基于目录约定来自动确定页面的入口,同时也支持通过配置项来自定义入口。
|
14
14
|
|
15
|
-
Modern.js 提供的很多配置项都是以入口为维度进行划分的,比如页面标题、HTML 模板、页面 Meta 信息、是否开启 SSR/SSG
|
15
|
+
Modern.js 提供的很多配置项都是以入口为维度进行划分的,比如页面标题、HTML 模板、页面 Meta 信息、是否开启 SSR/SSG、服务端路由规则等。如果你希望了解更多关于入口的技术细节,请参考[深入了解](#深入了解)章节的内容。
|
16
16
|
|
17
17
|
## 单入口与多入口
|
18
18
|
|
@@ -239,6 +239,57 @@ export default defineConfig({
|
|
239
239
|
值得注意的是,默认情况下,Modern.js 认为通过配置指定的入口是**框架模式入口**,将自动生成真正的编译入口。如果你的应用是从 Webpack 或 Vite 等构建工具迁移到 Modern.js 框架时,你通常需要在入口配置中开启 `disableMount` 选项,此时 Modern.js 认为该入口是**构建模式入口**。
|
240
240
|
|
241
241
|
|
242
|
+
## 深入了解
|
243
|
+
|
244
|
+
页面入口的概念衍生自 webpack 的入口(Entrypoint)概念,其主要用于配置 JavaScript 或其他模块在应用启动时加载和执行。webpack 对于网页应用的 [最佳实践](https://webpack.docschina.org/concepts/entry-points/#multi-page-application) 通常将入口与 HTML 产物对应,即每增加一个入口最终就会在产物中生成一份对应的 HTML 文件。入口引入的模块会在编译打包后生成多个 Chunk 产物,例如对于 JavaScript 模块最终可能会生成数个类似 `dist/static/js/index.ea39u8.js` 的文件产物。
|
245
|
+
|
246
|
+
需要注意区分入口、路由等概念之间的关系:
|
247
|
+
|
248
|
+
- **入口**:包含多个用于启动时执行的模块。
|
249
|
+
- **客户端路由**:在 Modern.js 中通常由 `react-router` 实现,通过 History API 判断浏览器当前 URL 决定加载和显示哪个 React 组件。
|
250
|
+
- **服务端路由**:服务端可以模仿 [devServer 的行为](https://webpack.docschina.org/configuration/dev-server/#devserverhistoryapifallback),将 index.html 页面代替所有 404 响应被返回以实现客户端路由,也可以自行实现任何路由逻辑。
|
251
|
+
|
252
|
+
它们的对应关系如下:
|
253
|
+
|
254
|
+
- 每个 webpack 网站项目可以包含多个入口
|
255
|
+
- 每个入口包含若干个模块(源码文件)
|
256
|
+
- 每个入口通常对应一个 HTML 文件产物和若干其它产物。
|
257
|
+
- 每个 HTML 文件可以包含多个客户端路由方案(比如在页面中同时使用 `react-router` 和 `@tanstack/react-router`)。
|
258
|
+
- 每个 HTML 文件可以被多个服务端路由对应。
|
259
|
+
- 每个 HTML 文件可以包含多个客户端路由,当访问单入口应用的不同路由时实际使用的是同一个 HTML 文件。
|
260
|
+
|
261
|
+
## 常见问题
|
262
|
+
|
263
|
+
1. **`react-router` 定义的每个客户端路由会分别生成一个 HTML 文件吗?**
|
264
|
+
|
265
|
+
不会。每个入口通常只会生成一个 HTML 文件,单个入口中如果定义多个客户端路由系统会共用这一个 HTML 文件。
|
266
|
+
|
267
|
+
2. **约定式路由的 `routes/` 目录下每个 `page.tsx` 文件都会生成一个 HTML 文件吗?**
|
268
|
+
|
269
|
+
不是。约定式路由是基于 `react-router` 实现的客户端路由方案,其约定 `routes/` 目录下每个 `page.tsx` 文件都会对应生成一个 `react-router` 的客户端路由。`routes/` 本身作为一个页面入口,对应最终产物中的一个 HTML 文件。
|
270
|
+
|
271
|
+
3. **服务端渲染(SSR)的项目是否会构建多份 HTML 产物?**
|
272
|
+
|
273
|
+
在使用服务端渲染应用时并不必须在编译时生成一份 HTML 产物,它可以只包含用于渲染的服务端 JavaScript 产物。此时 `react-router` 将在服务端运行和调度路由,并在每次请求时渲染并响应 HTML 内容。
|
274
|
+
|
275
|
+
而 Modern.js 在编译时仍会为每个入口生成包含 HTML 文件的完整的客户端产物,用于在服务端渲染失败时降级为客户端渲染使用。
|
276
|
+
|
277
|
+
另一个特殊情况是使用静态站点生成(SSG)的项目,即使是使用约定式路由搭建的单入口 SSG 应用,Modern.js 也会在 webpack 的流程外为每个 `page.tsx` 文件生成一份单独的 HTML 文件。
|
278
|
+
|
279
|
+
需要注意的是即使开启服务端渲染,React 通常仍需要执行水合阶段并在前端执行 `react-router` 的路由。
|
280
|
+
|
281
|
+
4. **单入口应用是否存在输出多个 HTML 文件的例外情况?**
|
282
|
+
|
283
|
+
你可以自行配置 [html-rspack-plugin](https://rspack.dev/zh/plugins/rspack/html-rspack-plugin#%E7%94%9F%E6%88%90%E5%A4%9A%E4%B8%AA-html-%E6%96%87%E4%BB%B6) 为每个入口生成多个 HTML 产物,或使多个入口共用一个 HTML 产物。
|
284
|
+
|
285
|
+
5. **什么叫多页应用(Multi-Page Application)?**
|
286
|
+
|
287
|
+
多页应用的 “页面” 指的是静态的 HTML 文件。
|
288
|
+
一般可以将任何包含多个入口、多个 HTML 文件产物的网页应用称为多页应用。
|
289
|
+
狭义的多页应用可能不包含客户端路由、仅通过 `<a>` 之类的标签元素进行 HTML 静态页面之间的跳转,但实践中上多页应用也经常需要为其入口配置客户端路由以满足不同需求。
|
290
|
+
|
291
|
+
相反地,通过 `react-router` 定义多个路由的单入口应用因为只生成一个 HTML 文件产物,所以被称为单页应用(Single Page Application)。
|
292
|
+
|
242
293
|
## 弃用功能
|
243
294
|
|
244
295
|
目前,如果入口所在的目录满足以下条件,也会成为应用入口。
|
@@ -267,6 +318,3 @@ export default (App: React.ComponentType, bootstrap: () => void) => {
|
|
267
318
|
### 构建模式入口
|
268
319
|
|
269
320
|
当入口目录中存在 `index.[jt]sx`(即将废弃) 并且没有通过 `export default` 导出函数时,该入口也将被认为是构建模式入口。
|
270
|
-
|
271
|
-
|
272
|
-
|
@@ -5,42 +5,7 @@ sidebar_position: 1
|
|
5
5
|
|
6
6
|
# Modern.js 介绍
|
7
7
|
|
8
|
-
**Modern.js
|
9
|
-
|
10
|
-
目前 Modern.js 包含两个解决方案,分别面向 Web 应用开发场景 和 npm 包开发场景:
|
11
|
-
|
12
|
-
import { SolutionCards } from '@site/src/components/SolutionCards';
|
13
|
-
|
14
|
-
<SolutionCards
|
15
|
-
cards={[
|
16
|
-
{
|
17
|
-
title: 'Modern.js Framework',
|
18
|
-
description: '基于 React 的渐进式 Web 开发框架',
|
19
|
-
link: 'http://modernjs.dev/',
|
20
|
-
},
|
21
|
-
{
|
22
|
-
title: 'Modern.js Module',
|
23
|
-
description: '易用、高性能的 npm 包开发方案',
|
24
|
-
link: 'http://modernjs.dev/module-tools/',
|
25
|
-
},
|
26
|
-
]}
|
27
|
-
/>
|
28
|
-
|
29
|
-
## 关于文档
|
30
|
-
|
31
|
-
**当前文档站对应的是 Modern.js 框架**,适用于开发 Web 应用。
|
32
|
-
|
33
|
-
- 如果你需要开发一个 npm 包,请移步 [Modern.js Module 文档](https://modernjs.dev/module-tools)。
|
34
|
-
- 如果你需要一个构建工具来打包 Web 应用,请移步 [Rsbuild 文档](https://rsbuild.dev/)。
|
35
|
-
- 如果你需要开发一个文档站点,推荐使用 [Rspress 文档](https://rspress.dev/)。
|
36
|
-
|
37
|
-
:::tip
|
38
|
-
由于 Modern.js 框架的使用最为广泛,在本文档站中,我们会省略「框架」,直接称其为 Modern.js。
|
39
|
-
:::
|
40
|
-
|
41
|
-
## Modern.js 框架
|
42
|
-
|
43
|
-
**Modern.js 框架是一个基于 React 的渐进式 Web 开发框架**。在字节跳动内部,我们将 Modern.js 封装为上层框架,并支撑了数千个 Web 应用的研发。
|
8
|
+
**Modern.js 是一个基于 React 的渐进式 Web 开发框架**。在字节跳动内部,我们将 Modern.js 封装为上层框架,并支撑了数千个 Web 应用的研发。
|
44
9
|
|
45
10
|
Modern.js 能为开发者提供极致的**开发体验(Development Experience)**,让应用拥有更好的**用户体验(User Experience)**。
|
46
11
|
|
package/package.json
CHANGED
@@ -15,17 +15,17 @@
|
|
15
15
|
"modern",
|
16
16
|
"modern.js"
|
17
17
|
],
|
18
|
-
"version": "2.
|
18
|
+
"version": "2.61.0",
|
19
19
|
"publishConfig": {
|
20
20
|
"registry": "https://registry.npmjs.org/",
|
21
21
|
"access": "public",
|
22
22
|
"provenance": true
|
23
23
|
},
|
24
24
|
"dependencies": {
|
25
|
-
"@modern-js/sandpack-react": "2.
|
25
|
+
"@modern-js/sandpack-react": "2.61.0"
|
26
26
|
},
|
27
27
|
"devDependencies": {
|
28
|
-
"@rspress/shared": "1.35.
|
28
|
+
"@rspress/shared": "1.35.3",
|
29
29
|
"@types/fs-extra": "9.0.13",
|
30
30
|
"@types/node": "^16",
|
31
31
|
"classnames": "^2",
|
@@ -33,7 +33,7 @@
|
|
33
33
|
"fs-extra": "^10",
|
34
34
|
"react": "^18.3.1",
|
35
35
|
"react-dom": "^18.3.1",
|
36
|
-
"rspress": "1.35.
|
36
|
+
"rspress": "1.35.3",
|
37
37
|
"ts-node": "^10.9.1",
|
38
38
|
"typescript": "^5"
|
39
39
|
},
|
package/src/i18n/enUS.ts
CHANGED
@@ -23,13 +23,6 @@ export const EN_US = {
|
|
23
23
|
featureDesc6:
|
24
24
|
'Launch with zero configuration, then everything is configurable.',
|
25
25
|
|
26
|
-
// Solutions
|
27
|
-
solutions: 'Solutions',
|
28
|
-
solutionsDesc1: 'A progressive React framework for web development.',
|
29
|
-
solutionsDesc2: 'A powerful solution for npm package development.',
|
30
|
-
solutionsDesc3: 'An Rspack-based build tool for web development.',
|
31
|
-
solutionsDesc4: 'A fast Rspack-based static site generator',
|
32
|
-
|
33
26
|
// Footer
|
34
27
|
guide: 'Guide',
|
35
28
|
topic: 'Topic',
|
package/src/i18n/zhCN.ts
CHANGED
@@ -23,13 +23,6 @@ export const ZH_CN: Record<keyof typeof EN_US, string> = {
|
|
23
23
|
feature6: '易于配置',
|
24
24
|
featureDesc6: '以零配置启动,然后一切皆可配置。',
|
25
25
|
|
26
|
-
// Solutions
|
27
|
-
solutions: '解决方案',
|
28
|
-
solutionsDesc1: '基于 React 的渐进式 Web 开发框架。',
|
29
|
-
solutionsDesc2: '简单、高性能的 npm 包开发方案。',
|
30
|
-
solutionsDesc3: '基于 Rspack 的 Web 构建工具。',
|
31
|
-
solutionsDesc4: '基于 Rspack 的静态站点生成器。',
|
32
|
-
|
33
26
|
// Footer
|
34
27
|
guide: '指南',
|
35
28
|
topic: '专题',
|
package/src/pages/index.tsx
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
import clsx from 'clsx';
|
2
2
|
import { useEffect } from 'react';
|
3
|
-
import { Helmet,
|
3
|
+
import { Helmet, useLocation } from 'rspress/runtime';
|
4
4
|
import ContentCard from '../components/ContentCard';
|
5
5
|
import { FeatureLayout } from '../components/FeatureLayout';
|
6
6
|
import Footer from '../components/Footer';
|
@@ -92,22 +92,6 @@ export default function Home() {
|
|
92
92
|
},
|
93
93
|
];
|
94
94
|
|
95
|
-
const lang = useLang();
|
96
|
-
const solutions = [
|
97
|
-
{
|
98
|
-
id: 'framework',
|
99
|
-
title: 'Modern.js Framework',
|
100
|
-
href: useUrl('/guides/get-started/introduction'),
|
101
|
-
desc: t('solutionsDesc1'),
|
102
|
-
},
|
103
|
-
{
|
104
|
-
id: 'module',
|
105
|
-
title: 'Modern.js Module',
|
106
|
-
href: `https://modernjs.dev/module-tools${lang === 'en' ? '/en' : ''}`,
|
107
|
-
desc: t('solutionsDesc2'),
|
108
|
-
},
|
109
|
-
];
|
110
|
-
|
111
95
|
return (
|
112
96
|
<div>
|
113
97
|
<Helmet>
|
@@ -122,9 +106,9 @@ export default function Home() {
|
|
122
106
|
<HomepageHeader />
|
123
107
|
<main className={styles['homepage-main']}>
|
124
108
|
<FeatureLayout>
|
125
|
-
<SecondaryTitle>
|
109
|
+
<SecondaryTitle>Features</SecondaryTitle>
|
126
110
|
<div className={styles.cardContainer}>
|
127
|
-
{
|
111
|
+
{features.map(card => (
|
128
112
|
<ContentCard
|
129
113
|
key={card.id}
|
130
114
|
title={card.title}
|
@@ -145,19 +129,6 @@ export default function Home() {
|
|
145
129
|
</h1>
|
146
130
|
</FeatureLayout>
|
147
131
|
|
148
|
-
<FeatureLayout>
|
149
|
-
<SecondaryTitle>Modern.js Framework</SecondaryTitle>
|
150
|
-
<div className={styles.cardContainer}>
|
151
|
-
{features.map(card => (
|
152
|
-
<ContentCard
|
153
|
-
key={card.id}
|
154
|
-
title={card.title}
|
155
|
-
desc={card.desc}
|
156
|
-
href={card.href}
|
157
|
-
/>
|
158
|
-
))}
|
159
|
-
</div>
|
160
|
-
</FeatureLayout>
|
161
132
|
<Footer />
|
162
133
|
</main>
|
163
134
|
</div>
|
@@ -1 +0,0 @@
|
|
1
|
-
["use", "option", "config"]
|
@@ -1,59 +0,0 @@
|
|
1
|
-
---
|
2
|
-
sidebar_position: 3
|
3
|
-
---
|
4
|
-
|
5
|
-
# Configuration Parameters
|
6
|
-
|
7
|
-
`@modern-js/create` provides the [--config](/guides/topic-detail/generator/create/option.html#-c,---config-<config>) parameter, which is used to specify the answers to interactive questions in advance during the execution process.
|
8
|
-
|
9
|
-
Here, we will introduce the fields and field values that can be configured in the `config` under different scenario.
|
10
|
-
|
11
|
-
## General Configuration
|
12
|
-
|
13
|
-
### solution
|
14
|
-
|
15
|
-
Question: Please select the type of project you want to create.
|
16
|
-
|
17
|
-
Options:
|
18
|
-
|
19
|
-
- Web App -- mwa
|
20
|
-
|
21
|
-
- Npm Module -- module
|
22
|
-
|
23
|
-
- Doc Site -- doc
|
24
|
-
|
25
|
-
### scenes
|
26
|
-
|
27
|
-
Question: Please select the project scenario.
|
28
|
-
|
29
|
-
Options:
|
30
|
-
|
31
|
-
List of plugin keywords when using custom generator plugins.
|
32
|
-
|
33
|
-
## Web App
|
34
|
-
|
35
|
-
import LanguageConfig from '@site-docs-en/components/language-config';
|
36
|
-
|
37
|
-
<LanguageConfig />
|
38
|
-
|
39
|
-
import PackageManager from '@site-docs-en/components/package-manager';
|
40
|
-
|
41
|
-
<PackageManager />
|
42
|
-
|
43
|
-
## Npm Module
|
44
|
-
|
45
|
-
### packageName
|
46
|
-
|
47
|
-
Question: Please fill in the project name.
|
48
|
-
|
49
|
-
:::info
|
50
|
-
The value of the `name` field in the `package.json` file of the Npm module, which is a string type.
|
51
|
-
:::
|
52
|
-
|
53
|
-
<LanguageConfig />
|
54
|
-
|
55
|
-
<PackageManager />
|
56
|
-
|
57
|
-
## Modern Doc
|
58
|
-
|
59
|
-
<PackageManager />
|
@@ -1,146 +0,0 @@
|
|
1
|
-
---
|
2
|
-
sidebar_position: 2
|
3
|
-
---
|
4
|
-
|
5
|
-
# CLI Options
|
6
|
-
|
7
|
-
`@modern-js/create` provides many configuration parameters to configure its behavior during execution, which can be viewed using the `--help` parameter:
|
8
|
-
|
9
|
-
```bash
|
10
|
-
npx @modern-js/create@latest --help
|
11
|
-
|
12
|
-
Usage: npx @modern-js/create@latest [projectDir]
|
13
|
-
|
14
|
-
create Modern.js solution project
|
15
|
-
|
16
|
-
Options:
|
17
|
-
--version show create tools version
|
18
|
-
--lang <lang> set create tools language(en or zh)
|
19
|
-
-c, --config <config> set default project config(json string) (default: "{}")
|
20
|
-
-d,--debug using debug mode to log something (default: false)
|
21
|
-
--mwa create mwa application using default config (default: false)
|
22
|
-
--module create module application using default config (default: false)
|
23
|
-
--generator <generator> run custom generator
|
24
|
-
-p, --plugin <plugin> use generator plugin to create new solution or customize Modern.js solution (default: [])
|
25
|
-
--dist-tag <distTag> use specified tag version for it\'s generator (default: "")
|
26
|
-
--packages <packages> set project specific dependency version information (default: "{}")
|
27
|
-
--registry <registry> set npm registry url to run npm command (default: "")
|
28
|
-
--no-need-install not run install command
|
29
|
-
-h, --help display help for command
|
30
|
-
|
31
|
-
Commands:
|
32
|
-
clean-cache clean locale generator cache
|
33
|
-
```
|
34
|
-
|
35
|
-
The following will provide a detailed introduction to these parameters:
|
36
|
-
|
37
|
-
## [projectDir]
|
38
|
-
|
39
|
-
The project directory name.
|
40
|
-
|
41
|
-
When executing `@modern-js/create`, a `projectDir` folder will be created in the current directory by default, and the project will be initialized in this folder. If this parameter is empty, the initialization project will be directly generated in the current directory.
|
42
|
-
|
43
|
-
:::info
|
44
|
-
If the contents of the directory where `projectDir` is located are not empty, a prompt will be given whether to continue creating. It is recommended to perform project initialization operations in an empty directory.
|
45
|
-
:::
|
46
|
-
|
47
|
-
## --version
|
48
|
-
|
49
|
-
Get the version of the `@modern-js/create` tool.
|
50
|
-
|
51
|
-
```bash
|
52
|
-
npx @modern-js/create@latest --version
|
53
|
-
|
54
|
-
[INFO] @modern-js/create v2.21.1
|
55
|
-
```
|
56
|
-
|
57
|
-
## --lang \<lang>
|
58
|
-
|
59
|
-
The execution language, supports `zh` and `en`.
|
60
|
-
|
61
|
-
By default, `@modern-js/create` will automatically identify the user's system language and choose to use Chinese or English. If the identification fails or does not meet usage habits, you can manually specify it using this parameter.
|
62
|
-
|
63
|
-
## -c, --config \<config>
|
64
|
-
|
65
|
-
Specify the default project configuration.
|
66
|
-
|
67
|
-
By default, `@modern-js/create` will prompt for interactive questions such as language selection and package managers during the execution process. When it is necessary to specify these configuration contents in advance, they can be passed in through this field.
|
68
|
-
|
69
|
-
This field is a JSON string. For example, when specifying a package manager:
|
70
|
-
|
71
|
-
```bash
|
72
|
-
npx @modern-js/create@latest --config '{"packageManager": "pnpm"}'
|
73
|
-
```
|
74
|
-
|
75
|
-
Supported parameters for `config` can be found at [Configuration Parameters](/guides/topic-detail/generator/create/config.html)。
|
76
|
-
|
77
|
-
## -d,--debug
|
78
|
-
|
79
|
-
Display debug logs.
|
80
|
-
|
81
|
-
When encountering problems during use, you can use this parameter to display debug logs, which is convenient for quickly locating the problem position and troubleshooting.
|
82
|
-
|
83
|
-
## --mwa
|
84
|
-
|
85
|
-
Quickly create a Web App project.
|
86
|
-
|
87
|
-
## --module
|
88
|
-
|
89
|
-
Quickly create a Npm Module project.
|
90
|
-
|
91
|
-
## -p, --plugin \<plugin>
|
92
|
-
|
93
|
-
Specify a generator plugin.
|
94
|
-
|
95
|
-
`@modern-js/create` supports customizing the default project solution type of Modern.js or adding project solution type scenarios using generator plugin. For details, please refer to [Developing Generator Plugin](/guides/topic-detail/generator/plugin/structure.html).
|
96
|
-
|
97
|
-
## --generator \<generator>
|
98
|
-
|
99
|
-
Specify a micro-generator.
|
100
|
-
|
101
|
-
<!-- TODO 详情可查看[开发微生成器]-->
|
102
|
-
`@modern-js/create` supports completely customizing the project generation process using micro-generator.
|
103
|
-
|
104
|
-
## --dist-tag \<distTag>
|
105
|
-
|
106
|
-
Specify the version of the generator and Modern.js-related dependencies.
|
107
|
-
|
108
|
-
During the execution of `@modern-js/create`, a smaller micro-generator will be executed by default, and the `latest` version of the micro-generator will be used by default. This parameter can be used to specify the version number of the micro-generator to be executed and the version of the installed Modern.js-related dependencies.
|
109
|
-
|
110
|
-
For example, use the `next` version:
|
111
|
-
|
112
|
-
```bash
|
113
|
-
npx @modern-js/create@next --dist-tag next
|
114
|
-
```
|
115
|
-
|
116
|
-
## --packages \<packages>
|
117
|
-
|
118
|
-
Specify specific package version dependencies when creating a project.
|
119
|
-
|
120
|
-
If you need to specify a specific package version when creating a project, you can use this parameter. This parameter will configure `pnpm.overrides` (if the package manager is pnpm) or `resolutions` to lock the package version number in the `package.json` file in the project root directory.
|
121
|
-
|
122
|
-
The parameter value is a JSON string.
|
123
|
-
|
124
|
-
For example, specify the react version:
|
125
|
-
|
126
|
-
```bash
|
127
|
-
npx @modern-js/create@latest --packages '{"react":"^17"}'
|
128
|
-
```
|
129
|
-
|
130
|
-
## --registry \<registry>
|
131
|
-
|
132
|
-
Specify the sub-generator to execute and the npm registry to fetch project dependencies version.
|
133
|
-
|
134
|
-
## --no-need-install
|
135
|
-
|
136
|
-
Ignore automatic installation of dependencies.
|
137
|
-
|
138
|
-
By default, `@modern-js/create` will automatically install dependencies after creating a project. Using this parameter can ignore the installation of dependencies.
|
139
|
-
|
140
|
-
## clean-cache
|
141
|
-
|
142
|
-
The `@modern-js/create` command generates sub-generators cache in the tmp directory of the execution machine by default to speed up the generator execution. This command can be used to delete the cache when it needs to be refreshed or when there are problems with the cache.
|
143
|
-
|
144
|
-
```bash
|
145
|
-
npx @modern-js/create@latest clean-cache
|
146
|
-
```
|
@@ -1,48 +0,0 @@
|
|
1
|
-
---
|
2
|
-
sidebar_position: 1
|
3
|
-
---
|
4
|
-
|
5
|
-
# Usage
|
6
|
-
|
7
|
-
Modern.js provides `@modern-js/create` tool for creating project templates provided by Modern.js, including [Web App](https://modernjs.dev/), [Npm Module](https://modernjs.dev/module-tools).
|
8
|
-
|
9
|
-
The following will introduce how to use `@modern-js/create`.
|
10
|
-
|
11
|
-
## Environment Preparation
|
12
|
-
|
13
|
-
import Prerequisites from "@site-docs-en/components/prerequisites"
|
14
|
-
|
15
|
-
<Prerequisites />
|
16
|
-
|
17
|
-
## Create a Project with `@modern-js/create`
|
18
|
-
|
19
|
-
You do not need to install `@modern-js/create` globally, just use npx to run it:
|
20
|
-
|
21
|
-
```bash
|
22
|
-
npx @modern-js/create@latest [projectDir]
|
23
|
-
```
|
24
|
-
|
25
|
-
:::info
|
26
|
-
`[projectDir]` is the project directory name. If it is not filled in, the project will be created in the current directory.
|
27
|
-
:::
|
28
|
-
|
29
|
-
During the execution, complete the interaction according to the prompt to create a project that meets your requirements.
|
30
|
-
|
31
|
-
### Create an Web APP Project
|
32
|
-
|
33
|
-
```bash
|
34
|
-
npx @modern-js/create@latest web-app
|
35
|
-
? Please select the type of project you want to create: Web App
|
36
|
-
? Please select the programming language: TS
|
37
|
-
? Please select the package manager: pnpm
|
38
|
-
```
|
39
|
-
|
40
|
-
### Create an Npm Module Project
|
41
|
-
|
42
|
-
```bash
|
43
|
-
npx @modern-js/create@latest npm-module
|
44
|
-
? Please select the type of project you want to create: Npm Module
|
45
|
-
? Please fill in the project name: npm-module
|
46
|
-
? Please select the programming language: TS
|
47
|
-
? Please select the package manager: pnpm
|
48
|
-
```
|
@@ -1 +0,0 @@
|
|
1
|
-
["use", "option", "config"]
|