@modern-js/main-doc 2.33.1 → 2.35.0

package/docs/en/tutorials/examples/csr-auth.mdx

@@ -0,0 +1,214 @@
+---
+title: Route Authorization
+---
+
+# Route Authorization
+
+Modern.js defaults to the convention-based routing based on React Router 6. For more details, please refer to [Routing](/guides/basic-features/routes.html#routing-scheme).
+
+In a web application, if there are multiple routes, we may need to authorize access to some of them before accessing them. For example, in the following scenario:
+
+- Access to the `/` route does not require authorization and can be accessed directly.
+- Access to the `/protected` route requires authorization. If there is no authorization, it will automatically redirect to the `/login` route. After successful login, it returns to `/protected`.
+
+import Sandpack from '@site/src/components/Sandpack';
+
+<Sandpack template="web-app">
+```tsx title="src/routes/page.tsx"
+import { Helmet } from '@modern-js/runtime/head';
+import './index.css';
+
+const PublicPage = (): JSX.Element => (
+  <div className="container-box">
+    <Helmet>
+      <link
+        rel="icon"
+        type="image/x-icon"
+        href="https://lf3-static.bytednsdoc.com/obj/eden-cn/uhbfnupenuhf/favicon.ico"
+      />
+    </Helmet>
+    <h3>Public</h3>
+  </div>
+);
+
+export default PublicPage;
+
+```
+```tsx title="src/routes/layout.tsx"
+import { Link, Outlet } from '@modern-js/runtime/router';
+import { AuthProvider, AuthStatus } from './Auth';
+
+export default function Layout() {
+  return (
+    <AuthProvider>
+      <AuthStatus />
+
+      <ul>
+        <li>
+          <Link to="/">Public Page</Link>
+        </li>
+        <li>
+          <Link to="/protected">Protected Page</Link>
+        </li>
+      </ul>
+
+      <Outlet />
+    </AuthProvider>
+  );
+}
+
+```
+```ts title="src/routes/fakeAuth.ts"
+/**
+ * This represents some generic auth provider API, like Firebase.
+ */
+const fakeAuthProvider = {
+  isAuthenticated: false,
+  signin(callback: VoidFunction) {
+    fakeAuthProvider.isAuthenticated = true;
+    setTimeout(callback, 100); // fake async
+  },
+  signout(callback: VoidFunction) {
+    fakeAuthProvider.isAuthenticated = false;
+    setTimeout(callback, 100);
+  },
+};
+
+export { fakeAuthProvider };
+
+```
+```ts title="src/routes/Auth.tsx"
+import React from 'react';
+import { useNavigate, Navigate, useLocation } from '@modern-js/runtime/router';
+import { fakeAuthProvider } from './fakeAuth';
+
+interface AuthContextType {
+  user: any;
+  signin: (user: string, callback: VoidFunction) => void;
+  signout: (callback: VoidFunction) => void;
+}
+
+const AuthContext = React.createContext<AuthContextType>(null!);
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  const [user, setUser] = React.useState<any>(null);
+
+  const signin = (newUser: string, callback: VoidFunction) =>
+    fakeAuthProvider.signin(() => {
+      setUser(newUser);
+      callback();
+    });
+
+  const signout = (callback: VoidFunction) =>
+    fakeAuthProvider.signout(() => {
+      setUser(null);
+      callback();
+    });
+
+  const value = { user, signin, signout };
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+}
+
+export function useAuth() {
+  return React.useContext(AuthContext);
+}
+
+export function AuthStatus() {
+  const auth = useAuth();
+  console.log('auth', auth);
+  const navigate = useNavigate();
+
+  if (!auth.user) {
+    return <p>You are not logged in.</p>;
+  }
+
+  return (
+    <p>
+      Welcome {auth.user}!{' '}
+      <button
+        type="button"
+        onClick={() => {
+          auth.signout(() => navigate('/'));
+        }}
+      >
+        Sign out
+      </button>
+    </p>
+  );
+}
+
+export function RequireAuth({ children }: { children: JSX.Element }) {
+  const auth = useAuth();
+  const location = useLocation();
+
+  if (!auth.user) {
+    // Redirect them to the /login page, but save the current location they were
+    // trying to go to when they were redirected. This allows us to send them
+    // along to that page after they login, which is a nicer user experience
+    // than dropping them off on the home page.
+    return <Navigate to="/login" state={{ from: location }} replace />;
+  }
+
+  return children;
+}
+
+```
+```ts title="src/routes/protected/page.tsx"
+import { RequireAuth } from '../Auth';
+
+export default function ProtectedPage() {
+  return (
+    <div className="container-box">
+      <RequireAuth>
+        <h3>Protected</h3>
+      </RequireAuth>
+    </div>
+  );
+}
+
+```
+```ts title="src/routes/login/page.tsx"
+import { useLocation, useNavigate } from '@modern-js/runtime/router';
+import { useAuth } from '../Auth';
+
+export default function Login() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const auth = useAuth();
+
+  const from = location.state?.from?.pathname || '/';
+
+  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+
+    const formData = new FormData(event.currentTarget);
+    const username = formData.get('username') as string;
+
+    auth.signin(username, () => {
+      // Send them back to the page they tried to visit when they were
+      // redirected to the login page. Use { replace: true } so we don't create
+      // another entry in the history stack for the login page.  This means that
+      // when they get to the protected page and click the back button, they
+      // won't end up back on the login page, which is also really nice for the
+      // user experience.
+      navigate(from, { replace: true });
+    });
+  }
+
+  return (
+    <div>
+      <p>You must log in to view the page at {from}</p>
+
+      <form onSubmit={handleSubmit}>
+        <label>
+          Username: <input name="username" type="text" />
+        </label>{' '}
+        <button type="submit">Login</button>
+      </form>
+    </div>
+  );
+}
+
+```
+</Sandpack>

package/docs/en/tutorials/foundations/introduction.mdx

@@ -24,5 +24,14 @@ We have prepared a tutorial on creating a "contact list app" that you can follow
 - Data fetching
 - State Management
 - Container components
-- New portal
+- New entry
 - ...
+
+## Case Studies
+
+We offer some commonly used case studies for your reference during the development process. Here you can find some usage patterns of the feature combinations provided by Modern.js. We will continue to improve the case studies here.
+
+- [Route Authorization](/tutorials/examples/csr-auth.html)
+- ...
+
+Let's start from [creating a project](tutorials/first-app/c01-start) now!

package/docs/zh/community/blog/2022-0708-updates.md

@@ -10,7 +10,7 @@ Modern.js 7 ~ 8 月的最新版本为 v1.17.0，本双月的主要更新有：
 
 - **支持 React 18**：完成框架和插件对 React 18 的适配。
 - **包版本统一**：Modern.js 所有组成包的版本号进行统一，提供升级命令。
-- **模块工程支持 bundle 构建**：模块工程类型的项目，支持对产物做 bundle 构建。
+- **Modern.js Module 支持 bundle 构建**：Modern.js Module 项目，支持对产物做 bundle 构建。
 - **Reduck v1.1**：发布 Reduck v1.1，使用文档全面更新。
 
 ## 支持 React 18
@@ -33,11 +33,11 @@ Modern.js 框架和相关插件完成对 React 18 的适配。现在，只需要
 npx @modern-js/upgrade
 ```
 
-## 模块工程支持 bundle 构建
+## Modern.js Module 支持 bundle 构建
 
-模块工程（ `@modern-js/module-tools` ）对底层实现进行重构，新增 [`output.buildConfig`](https://modernjs.dev/v1/docs/apis/module/config/output/build-config/) 配置，用于提供更加丰富的构建功能。
+Modern.js Module 对底层实现进行重构，新增 [`output.buildConfig`](https://modernjs.dev/v1/docs/apis/module/config/output/build-config/) 配置，用于提供更加丰富的构建功能。
 
-新的模块工程项目，不仅支持对产物做 bundless 构建，也支持 bundle 构建。通过配置 `buildConfig` 下的 [`buildType`](https://modernjs.dev/v1/docs/apis/module/config/output/build-config/build-type) ，即可进行 bundle 构建：
+新的 Modern.js Module 项目，不仅支持对产物做 bundless 构建，也支持 bundle 构建。通过配置 `buildConfig` 下的 [`buildType`](https://modernjs.dev/v1/docs/apis/module/config/output/build-config/build-type) ，即可进行 bundle 构建：
 
 ```ts title="modern.config.ts"
 import { defineConfig } from '@modern-js/module-tools';

package/docs/zh/community/blog/overview.md

@@ -80,7 +80,7 @@ Modern.js 7 ~ 8 月的最新版本为 v1.17.0，本双月的主要更新有：
 
 - **支持 React 18**：完成框架和插件对 React 18 的适配。
 - **包版本统一**：Modern.js 所有组成包的版本号进行统一，提供升级命令。
-- **模块工程支持 bundle 构建**：模块工程类型的项目，支持对产物做 bundle 构建。
+- **Modern.js Module 支持 bundle 构建**：Modern.js Module 项目，支持对产物做 bundle 构建。
 - **Reduck v1.1**：发布 [Reduck v1.1](https://github.com/web-infra-dev/reduck)，使用文档全面更新。
 
 [了解更多 →](/community/blog/2022-0708-updates)

package/docs/zh/components/tech-stack-node-framework.mdx

@@ -0,0 +1 @@
+Modern.js 支持 [Express.js](https://expressjs.com/) 和 [Koa.js](https://koajs.com/) 作为可选的 BFF 运行时框架，请参考[「BFF - 运行时框架」](/guides/advanced-features/bff/frameworks.html)。

package/docs/zh/configure/app/server/ssr.mdx

@@ -28,6 +28,8 @@ export default defineConfig({
 - `mode`：`string = 'string'`，默认为使用 `renderToString` 渲染。配置为 `stream` 开启流式渲染。
 - `forceCSR`：`boolean = false`，默认关闭强制 CSR 渲染。配置为 `true` 后，在页面访问时添加 `?csr=true` 或添加请求头 `x-modern-ssr-fallback` 即可强制 CSR。
 - `inlineScript`：`boolean = true`，默认情况下，SSR 的数据会以内联脚本的方式注入到 HTML 中，并且直接赋值给全局变量。配置为 `false` 后，会下发 JSON，而不是赋值给全局变量。
+- `disablePrerender`: `boolean = fasle`, 为了兼容旧数据请求方式 - `useLoader`, 默认情况下 Modern.js 会对组件进行一次预渲染即有两次渲染。
+  开发者在保证项目中没有使用 useLoader Api 情况下, 可通过配置 `disablePrerender=true`来减少一次渲染。
 
 ```ts title="modern.config.ts"
 export default defineConfig({
@@ -36,6 +38,7 @@ export default defineConfig({
       forceCSR: true,
       mode: 'stream',
       inlineScript: false,
+      disablePrerender: true,
     },
   },
 });

package/docs/zh/guides/advanced-features/eslint.mdx

@@ -74,7 +74,7 @@ pnpm run lint:error
 
 ### `src/.eslintrc.js` 文件
 
-Modern.js 的应用工程、模块工程，源代码目录里都会默认有这个配置文件，是针对 Universal JS 代码设计的。
+Modern.js Framework、Modern.js Module 的源代码目录里都会默认有这个配置文件，是针对 Universal JS 代码设计的。
 
 :::info
 Universal JS 代码是既能浏览器端也能在服务器端运行的代码。

package/docs/zh/guides/basic-features/alias.mdx

@@ -4,64 +4,25 @@ sidebar_position: 3
 
 # 路径别名
 
-Modern.js 允许在 JS 和 CSS 中使用别名导入自定义目录下的模块，并内置了以下别名:
+import Alias from '@modern-js/builder-doc/docs/zh/shared/alias';
 
-```js
-{
-  '@': '<appDirectory>/src',
-  '@shared': '<appDirectory>/shared',
-}
-```
-
-:::info
-在开启可选功能时，new 命令也会动态的添加内置别名，例如启用 BFF 时默认会添加 `@api` 别名。
+<Alias />
 
-:::
+## 默认别名
 
-例如从 `src/App.tsx` 文件中导入 `src/common` 目录下的模块：
-
-```bash
-.
-├── common
-│   ├── styles
-│   │   └── base.css
-│   └── utils
-│       └── index.ts
-└── App.tsx
-```
-
-`src/App.tsx` 中写法如下：
-
-```ts
-import utils from '@/src/common/utils';
-import '@/src/common/styles/base.css';
-```
-
-Modern.js 也提供了自定义别名的方式，以添加 `@common` 别名为例：
-
-对于 TypeScript 项目，只需要在项目根目录 `tsconfig.json` 下配置 `compilerOptions.paths`：
+Modern.js 框架内置了以下别名:
 
 ```json
 {
-  "compilerOptions": {
-    "paths": {
-      "@/*": ["./src/*"],
-      "@/common/*": ["./src/common/*"]
-    }
-  }
+  "@": "./src",
+  "@shared": "./shared"
 }
 ```
 
-JavaScript 项目可以在 `modern.config.js` 中配置 [`source.alias`](/configure/app/source/alias)：
+此外，在启用框架的 BFF 插件时，默认会添加 `@api` 别名。
 
-```ts title="modern.config.ts"
-export default defineConfig({
-  source: {
-    alias: {
-      '@common': './src/common',
-    },
-  },
-});
+```json
+{
+  "@api": "./api"
+}
 ```
-
-对于别名配置的具体用法，请参考 [source.alias 文档](/configure/app/source/alias)。

package/docs/zh/guides/basic-features/routes.mdx

@@ -207,7 +207,7 @@ export default () => {
     └── page.tsx
 ```
 
-`routes/user/[id$]/page.tsx` 文件会转为 `/user/:id?` 路由。`/user` 下的所有路由都会匹配到该路由，并且 `id` 参数可选存在。通常在区分**创建**于**编辑**时，可以使用该路由。
+`routes/user/[id$]/page.tsx` 文件会转为 `/user/:id?` 路由。`/user` 下的所有路由都会匹配到该路由，并且 `id` 参数可选存在。通常在区分**创建**与**编辑**时，可以使用该路由。
 
 在组件中，可以通过 [useParams](/apis/app/runtime/router/router#useparams) 获取对应命名的参数。
 

package/docs/zh/guides/get-started/introduction.mdx

@@ -66,6 +66,26 @@ Modern.js 能为开发者提供极致的**开发体验（Development Experience
 - 🌏 **周边生态**：自研状态管理、微前端、模块打包、Monorepo 方案等周边需求。
 - 🕸 **多种路由模式**：包含自控路由、基于文件约定的路由（嵌套路由）等。
 
+## 和其他框架的对比
+
+### Next.js
+
+Next.js 是社区中最流行的 React 框架之一，由 Vercel 开发。
+
+Next.js 默认使用了 React Server Components，这意味着**你需要在服务端渲染你的 Web 应用，并为服务器产生的开销付费**；并且 Server Components 目前不是一项稳定的技术，社区中很多流行的 React 库尚未完成对 RSC 的适配。在目前阶段，你可能需要使用 Next.js 旧版的 Pages Router 来避免 Server Components 带来的问题。
+
+当你想构建一个单页面应用（SPA），并通过客户端渲染时，Next.js 可能不是一个好的选择，因为它的很多功能都是围绕 Server 优先来设计的。如果你需要使用客户端渲染，只能通过 Next.js 提供的 "static exports" 来使用有限的功能。
+
+而 Modern.js 将客户端渲染（CSR）和服务端渲染（SSR）视为同样重要的场景。当你创建一个 Modern.js 应用时，它默认是在客户端渲染的，你不需要了解 Server Components 的用法和局限性。你也可以在任何有需要的时候开启 SSR，甚至可以为一部分页面开启 SSR，整个过程是完全渐进式的。请注意，Modern.js 目前不支持 Server Components，我们会持续观察它的潜力，并在合适的时候支持它。
+
+### Umi
+
+Umi 是中文社区中非常流行的 React 框架，也是蚂蚁集团的底层前端框架。Modern.js 和 Umi 有许多相似之处，比如都支持插件系统、约定式路由、微生成器等。
+
+**Modern.js 和 Umi 的主要区别在于构建优化方式不同**。Umi 采用了 MFSU 技术来提升构建速度，而 Modern.js 则使用 Rspack 来提升 5 ~ 10 倍构建速度。在我们看来，类似 Rspack 这样的 Rust 工具更符合前端工具链的长期发展趋势，它可以在性能、稳定性和生态兼容性之间取得较好的平衡。
+
+此外，Modern.js 的服务端能力更加丰富，包括完备的 SSR 能力、一体化 BFF 开发能力和自定义 Web Server 支持。这些能力经过了字节跳动大量线上应用的验证，可以直接用于生产环境。
+
 ## 下一步
 
 如果你希望了解如何使用 Modern.js 框架，可以尝试 [创建第一个应用](/tutorials/first-app/c01-start)，或是阅读 [快速上手](/guides/get-started/quick-start)。

package/docs/zh/guides/get-started/tech-stack.mdx

@@ -0,0 +1,138 @@
+---
+sidebar_position: 4
+---
+
+# 技术栈
+
+Modern.js 框架默认集成了一些社区中流行的库和开发工具。
+
+在这篇文档中，你可以了解到 Modern.js 框架涉及的主要技术栈，以及一些可选的库和工具。
+
+---
+
+## UI 库
+
+Modern.js 使用 [React 18](https://react.dev/) 来构建用户界面，同时也兼容 React 17。
+
+Modern.js 底层的 Builder 也支持构建 Vue 应用，如果你需要使用 Vue，可以参考[「构建 Vue 应用」](https://modernjs.dev/builder/guide/framework/vue3.html)。
+
+---
+
+## 路由
+
+Modern.js 的路由基于 [React Router 6](https://reactrouter.com/en/main)，同时也兼容 React Router 5。
+
+Modern.js 支持约定式路由、自控式路由或其他路由方案，请参考[「路由方案」](/guides/basic-features/routes) 进行选择。
+
+---
+
+## 微前端
+
+Modern.js 提供对 [Garfish](https://www.garfishjs.org/) 微前端框架开箱即用的支持。
+
+同时，我们也正在与 [Module Federation](https://webpack.js.org/concepts/module-federation/) 的作者 Zack Jackson 合作，以提供更完整的解决方案。
+
+---
+
+## 状态管理
+
+Modern.js 可以与社区中任意的状态管理库搭配使用，比如 [Redux](https://redux.js.org/)、[Jotai](https://jotai.org/)、[Zustand](https://docs.pmnd.rs/zustand)、[Valtio](https://valtio.pmnd.rs/) 等。
+
+Modern.js 也基于 Redux 封装了 Reduck 状态管理库，你可以参考 [「Reduck 状态管理」](/guides/topic-detail/model/quick-start)来使用。
+
+---
+
+## 包管理器
+
+Modern.js 可以与社区中任意的包管理器搭配使用，比如 [npm](https://www.npmjs.com/package/npm)、[yarn](https://classic.yarnpkg.com/lang/en/)、[pnpm](https://pnpm.io/) 或 [Bun](https://bun.sh/)。
+
+我们推荐使用 pnpm 来获得更快的安装速度。
+
+---
+
+## 打包工具
+
+Modern.js 使用 [Webpack 5](https://webpack.js.org/) 或 [Rspack](https://www.rspack.dev/) 来打包你的 Web 应用。
+
+默认使用的打包工具为 Webpack 5，你可以参考[「使用 Rspack」](/guides/advanced-features/rspack-start) 来切换到更快的 Rspack。
+
+---
+
+## 转译工具
+
+Modern.js 使用 [Babel](https://babeljs.io/)、[SWC](https://swc.rs/) 或 [esbuild](https://esbuild.github.io/) 作为 JS 转译工具，将 TypeScript 或 JSX 转义为可以在浏览器上运行的 JavaScript 代码，并进行语法降级。
+
+- 使用 Webpack 打包时，默认为 Babel，支持切换到 SWC 或 esbuild。
+- 使用 Rspack 打包时，默认为 SWC，支持切换到 Babel。
+
+---
+
+## 压缩工具
+
+在生产环境构建时，Modern.js 使用 [Terser](https://github.com/terser/terser)、[SWC](https://swc.rs/) 或 [esbuild](https://esbuild.github.io/) 来压缩 JavaScript 代码，使用 [cssnano](https://cssnano.co/) 来压缩 CSS 代码。
+
+- 使用 Webpack 打包时，默认使用 Terser 压缩 JS 代码，支持切换到 SWC 或 esbuild。
+- 使用 Rspack 打包时，默认使用 SWC 压缩 JS 代码，暂不支持切换到其他工具。
+
+---
+
+## CSS 转换
+
+Modern.js 使用 [PostCSS](https://postcss.org/) 来转换 CSS 代码，并默认开启 [autoprefixer](https://github.com/postcss/autoprefixer) 来补全 CSS 前缀。
+
+Modern.js 支持[「启用 Tailwind CSS」](/guides/basic-features/css.html#使用-tailwind-css)，并同时兼容 Tailwind CSS v2 和 v3 版本。
+
+---
+
+## CSS 预处理器
+
+Modern.js 支持 [Sass](https://sass-lang.com/)、[Less](https://lesscss.org/) 和 [Stylus](https://stylus-lang.com/) 三种 CSS 预处理器：
+
+- 默认支持 Sass 和 Less，开箱即用。
+- 可选支持 Stylus，请参考[「Stylus 插件」](https://modernjs.dev/builder/plugins/plugin-stylus.html) 来使用。
+
+---
+
+## CSS Modules
+
+Modern.js 对 [CSS Modules](https://github.com/css-modules/css-modules) 提供了开箱即用的支持，内部基于 [css-loader](https://www.npmjs.com/package/css-loader) 实现。
+
+请参考[「使用 CSS Modules」](https://modernjs.dev/builder/guide/basic/css-modules.html) 来使用。
+
+---
+
+## CSS-in-JS
+
+Modern.js 支持使用 [styled-components](https://styled-components.com/)，请参考[「使用 CSS-in-JS」](/guides/basic-features/css.html#使用-css-in-js) 来使用。
+
+如果你需要使用其他 CSS-in-JS 方案，可以自行集成到你的项目中。
+
+---
+
+## 测试框架
+
+Modern.js 支持使用 [Jest](https://jestjs.io/) 进行单元测试或集成测试。该功能为可选功能，请参考[「使用 Jest 测试」](/guides/advanced-features/testing) 启用。
+
+如果你需要使用 [Vitest](https://vitest.dev/) 或其他测试框架，可以自行集成到你的项目中。
+
+---
+
+## 组件库
+
+Modern.js 可以与社区中任意的 React 组件库搭配使用，比如 [MUI](https://mui.com/)、[Ant Design](https://ant.design/)、[Arco Design](https://github.com/arco-design/arco-design)、[Semi Design](https://semi.design/)、[Radix UI](https://www.radix-ui.com/) 等。
+
+同时，Modern.js 内置了对 Ant Design 和 Arco Design 的 [按需引入](/configure/app/source/transform-import) 支持。
+
+---
+
+## 组件开发
+
+Modern.js 支持使用 [Storybook](https://storybook.js.org/) 来开发 UI 组件。该功能为可选功能，请参考[「使用 Storybook」](/guides/advanced-features/using-storybook) 启用。
+
+---
+
+## Node.js 框架
+
+import TechStackNodeFramework from '@site-docs/components/tech-stack-node-framework';
+
+<TechStackNodeFramework />

package/docs/zh/guides/topic-detail/changesets/add.mdx

@@ -23,7 +23,7 @@ sidebar_position: 2
 
 :::
 
-### 模块工程方案
+### Modern.js Module
 
 #### 在根目录执行 change 命令
 

package/docs/zh/guides/topic-detail/changesets/changelog.mdx

@@ -160,11 +160,11 @@ module.exports = {
 }
 ```
 
-### 使用模块工程方案
+### 使用 Modern.js Module
 
-自定义 changelog 还可以使用模块工程方案进行管理，提供通用方案。
+自定义 changelog 还可以使用 Modern.js Module 方案进行管理，提供通用方案。
 
-#### 使用 `npx @modern-js/create@latest` 创建模块工程方案
+#### 使用 `npx @modern-js/create@latest` 创建 Modern.js Module
 
 ```md
 ? 请选择你想创建的工程类型：Npm 模块

package/docs/zh/guides/topic-detail/changesets/commit.mdx

@@ -191,11 +191,11 @@ commit 配置为 ./my-commit-config.js 即可:
 }
 ```
 
-### 使用模块工程方案
+### 使用 Modern.js Module
 
-自定义 commit 还可以使用模块工程方案进行管理，提供通用方案。
+自定义 commit 还可以使用 Modern.js Module 进行管理，提供通用方案。
 
-#### 使用 `npx @modern-js/create@latest` 创建模块工程方案
+#### 使用 `npx @modern-js/create@latest` 创建 Modern.js Module
 
 ```md
 ? 请选择你想创建的工程类型：Npm 模块

package/docs/zh/guides/topic-detail/changesets/release-note.mdx

@@ -204,11 +204,11 @@ pnpm run gen-release-note --custom ./scripts/my-release-note-config.js
 
 直接执行命令 `pnpm run gen-release-note` 即可。
 
-### 使用模块工程方案
+### 使用 Modern.js Module
 
-custom 参数值还可以使用模块工程方案进行管理，提供通用方案。
+custom 参数值还可以使用 Modern.js Module 进行管理，提供通用方案。
 
-#### 使用 `npx @modern-js/create@latest` 创建模块工程方案
+#### 使用 `npx @modern-js/create@latest` 创建 Modern.js Module
 
 ```md
 ? 请选择你想创建的工程类型：Npm 模块

package/docs/zh/guides/topic-detail/changesets/release.mdx

@@ -13,7 +13,7 @@ sidebar_position: 3
 
 :::
 
-### 模块工程方案
+### Modern.js Module
 
 #### 在根目录执行 bump 命令
 

package/docs/zh/guides/topic-detail/framework-plugin/implement.mdx

@@ -36,13 +36,13 @@ const myPlugin = {
 
 ### 插件类型
 
-Modern-js 支持多种工程开发，如应用工程(app-tools), 模块工程(module-tools)等。
+Modern.js 支持多种工程开发，如应用开发（Modern.js Framework）, 模块开发（Modern.js Module）等。
 
-为了兼顾不同工程开发的差异和通性，Modern-js 将插件如下图进行组织:
+为了兼顾不同工程开发的差异和通性，Modern.js 将插件如下图进行组织:
 
 ![plugin-relationship](https://lf3-static.bytednsdoc.com/obj/eden-cn/eeeh7uhbepxlpe/modern-website/plugin-relationship.jpg)
 
-从图可以看出，Modern-js 将插件大致分为两类:
+从图可以看出，Modern.js 将插件大致分为两类:
 
 1. 通用插件: 插件只会包含一些基础的 Hooks
 
@@ -210,9 +210,9 @@ export default defineConfig({
 
 ### 在 npm 上发布插件
 
-如果需要将 Modern.js 插件发布到 npm，推荐使用 Modern.js 中的模块工程方案来管理和构建。
+如果你需要将 Modern.js 插件发布到 npm，推荐使用 [Modern.js Module](https://modernjs.dev/module-tools) 来管理和构建。
 
-首先创建一个空的模块工程方案项目，调整 npm 包名称：
+首先创建一个空的 Modern.js Module 项目，调整 npm 包名称：
 
 ```json
 {

package/docs/zh/guides/topic-detail/generator/create/use.mdx

@@ -48,14 +48,6 @@ npx @modern-js/create@latest npm-module
 ? 请选择包管理工具 pnpm
 ```
 
-### 创建文档站项目
-
-```bash
-npx @modern-js/create@latest doc-website
-? 请选择你想创建的工程类型 文档站
-? 请选择包管理工具 pnpm
-```
-
 ### 创建 Monorepo
 
 ```bash