@modern-js/main-doc 2.0.2 → 2.1.0

package/zh/guides/basic-features/css/postcss.md

@@ -10,67 +10,63 @@ sidebar_position: 3
 
 1. [Autoprefixer](https://github.com/postcss/autoprefixer) 根据需要支持的浏览器范围，会自动为 CSS 规则添加需要的浏览器厂商前缀。Modern.js 默认支持的浏览器范围为：`['> 0.01%', 'not dead', 'not op_mini all']`。
 
-  :::info 注意
-    - 【支持的浏览器范围为：`> 0.01%`】是指浏览器市场份额大于 0.01%。
-    - `not dead` 是指不包含官方不再支持的浏览器和过去24个月没有更新的浏览器。
-    - `not op_mini all` 是指不包含 Opera Mini。
-  :::
-
-  :::info 补充信息
-    如果需要修改默认浏览器支持范围，可以在项目的 `package.json` 文件中配置 `browserslist`，设置规则参考 [Browserslist](https://github.com/browserslist/browserslist) 的使用，下面是一个示例：
-    ``` json title="package.json"
-    {
-      "browserslist": [
-        "last 1 version",
-        "> 1%",
-        "IE 10"
-      ]
-    }
-    ```
-  :::
+:::info 注意
+  - 【支持的浏览器范围为：`> 0.01%`】是指浏览器市场份额大于 0.01%。
+  - `not dead` 是指不包含官方不再支持的浏览器和过去24个月没有更新的浏览器。
+  - `not op_mini all` 是指不包含 Opera Mini。
+:::
+
+:::info 补充信息
+如果需要修改默认浏览器支持范围，可以在项目的 `package.json` 文件中配置 `browserslist`，设置规则参考 [Browserslist](https://github.com/browserslist/browserslist) 的使用，下面是一个示例：
+`json title="package.json" { "browserslist": [ "last 1 version", "> 1%", "IE 10" ] } `
+:::
 
 2. 提供 [CSS custom properties](https://www.w3.org/TR/css-variables-1/) 支持，可以在 CSS 中定义和使用自定义变量，如：
 
-  ```css
-  :root {
-    --main-bg-color: pink;
-  }
+```css
+:root {
+  --main-bg-color: pink;
+}
 
-  body {
-    background-color: var(--main-bg-color);
-  }
-  ```
+body {
+  background-color: var(--main-bg-color);
+}
+```
 
 3. 提供 [CSS Nesting](https://drafts.csswg.org/css-nesting-1/) 支持，可以在 CSS 中使用嵌套写法，如：
 
-  ```css
-  table.colortable td {
+```css
+table.colortable td {
+  text-align: center;
+}
+table.colortable td.c {
+  text-transform: uppercase;
+}
+```
+
+也可以改写成 CSS 嵌套写法：
+
+```css
+table.colortable {
+  & td {
     text-align: center;
-  }
-  table.colortable td.c {
-    text-transform: uppercase;
-  }
-  ```
-  也可以改写成 CSS 嵌套写法：
-  ```css
-  table.colortable {
-    & td {
-      text-align: center;
-      &.c { text-transform: uppercase }
+    &.c {
+      text-transform: uppercase;
     }
   }
-  ```
+}
+```
 
 4. 修复已知的 [Flexbugs](https://github.com/philipwalton/flexbugs) 。
 5. 对以下 CSS 特性提供兼容：
-    - [`initial` 属性值](https://developer.mozilla.org/en-US/docs/Web/CSS/initial_value)
-    - [`break-` 属性](https://developer.mozilla.org/en-US/docs/Web/CSS/break-after)
-    - [`font-variant`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant)
-    - [Media Query Ranges](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#syntax_improvements_in_level_4)
+   - [`initial` 属性值](https://developer.mozilla.org/en-US/docs/Web/CSS/initial_value)
+   - [`break-` 属性](https://developer.mozilla.org/en-US/docs/Web/CSS/break-after)
+   - [`font-variant`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant)
+   - [Media Query Ranges](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#syntax_improvements_in_level_4)
 
-  当需要修改 PostCSS 配置时，可以通过底层配置 [`tools.postcss`](/docs/configure/app/tools/postcss) 来实现，下面是一个示例：
+当需要修改 PostCSS 配置时，可以通过底层配置 [`tools.postcss`](/docs/configure/app/tools/postcss) 来实现，下面是一个示例：
 
-```typescript title="modern.config.ts"
+```ts title="modern.config.ts"
 export default defineConfig({
   tools: {
     postcss: {

package/zh/guides/basic-features/css/tailwindcss.md

@@ -16,11 +16,11 @@ sidebar_position: 2
 在 `modern.config.ts` 中注册 Tailwind 插件:
 
 ```ts title="modern.config.ts"
-import TailwindCSSPlugin from '@modern-js/plugin-tailwindcss';
+import tailwindcssPlugin from '@modern-js/plugin-tailwindcss';
+
 // https://modernjs.dev/docs/apis/app/config
 export default defineConfig({
-  ...,
-  plugins: [..., TailwindCSSPlugin()],
+  plugins: [..., tailwindcssPlugin()],
 });
 ```
 
@@ -68,7 +68,7 @@ Tailwind CSS v2 和 v3 均不支持 IE 11 浏览器，相关背景请参考：
 
 当需要自定义 Tailwind CSS 的 [theme](https://tailwindcss.com/docs/theme) 配置的时候，可以在配置 [`source.designSystem`](/docs/configure/app/source/design-system) 中修改，例如，颜色主题中增加一个 `primary`：
 
-```typescript title="modern.config.ts"
+```ts title="modern.config.ts"
 export default defineConfig({
   source: {
     designSystem: {
@@ -84,7 +84,7 @@ export default defineConfig({
 
 当需要对 Tailwind CSS 做 [theme](https://tailwindcss.com/docs/theme) 以外的其他特殊配置时，可以在 [`tools.tailwindcss`](/docs/configure/app/tools/tailwindcss) 中配置，例如设置 `variants`：
 
-```typescript title="modern.config.ts"
+```ts title="modern.config.ts"
 export default defineConfig({
   tools: {
     tailwindcss: {

package/zh/guides/basic-features/data-fetch.md

@@ -9,7 +9,7 @@ Modern.js 中提供了开箱即用的数据获取能力，开发者可以通过
 
 ## Data Loader(推荐)
 
-Modern.js 推荐使用约定式路由做路由的管理，通过 Modern.js 的[约定式（嵌套）路由](/docs/guides/basic-features/routes#约定式路由)，每个路由组件(`layout.ts` 或 `page.ts`)可以导出一个函数`loader`，该函数可以在组件渲染之前执行，为路由组件提供数据。
+Modern.js 推荐使用约定式路由做路由的管理，通过 Modern.js 的[约定式（嵌套）路由](/docs/guides/basic-features/routes#约定式路由)，每个路由组件(`layout.ts` 或 `page.ts`)可以有一个同名的 `loader` 文件，该 `loader` 文件需要导出一个函数，函数会在组件渲染之前执行，为路由组件提供数据。
 
 :::info
 Modern.js v1 支持通过 [useLoader](#useloader旧版) 获取数据，这已经不是我们推荐的用法，除迁移过程外，不推荐两者混用。
@@ -17,36 +17,7 @@ Modern.js v1 支持通过 [useLoader](#useloader旧版) 获取数据，这已经
 
 ### 基础示例
 
-每个路由组件可以导出一个 `loader` 函数，然后通过 `useLoaderData` 函数获得相应的数据:
-
-```ts
-// routes/user/page.tsx
-import { useLoaderData } from '@modern-js/runtime/router';
-
-export const loader = async(): ProfileData => {
-  const res = await fetch('https://api/user/profile');
-  return await res.json();
-}
-
-export default function UserPage() {
-  const profileData = useLoaderData() as ProfileData;
-  return <div>{profileData}</div>;
-}
-```
-
-在 CSR 环境下，`loader` 函数会在客户端执行，`loader` 函数内可以使用浏览器的 API（但通常不需要，也不推荐）。
-
-在 SSR 环境下，不管是首屏，还是在客户端的导航，`loader` 函数只会在服务端执行，这里可以调用任意的 Node.js API，同时这里使用的任何依赖和代码都不会包含在客户端的 bundle 中。
-
-:::info
-在以后的版本中，Modern.js 可能会支持在 CSR 环境下，`loader` 函数也在服务端运行，以提高性能和安全性，所以这里建议尽可能地保证 loader 的纯粹，只做数据获取的场景。
-:::
-
-当在客户端导航时，基于 Modern.js 的[约定式路由](/docs/guides/basic-features/routes)，所有的 loader 函数会并行执行（请求），即当访问 `/user/profile` 时，`/user` 和 `/user/profile` 下的 loader 函数都会并行执行（请求），以提高客户端的性能。
-
-### Loader 放在单独文件中
-
-除了支持 `loader` 函数从前端组件中导出，Modern.js 也支持将 `loader` 函数放在单独的文件中， 将 `loader` 函数放在单独的文件中，可以无需留意[副作用](#副作用处理)相关注意事项，但可以要注意的是，路由组件如 `layout.ts` 和 loader 文件 `layout.loader.ts` 不能引入彼此的代码，如果需要相关类型可以使用 `import type`，可以见下面的示例：
+路由组件如 `layout.ts` 或 `page.ts`，可以定义同名的 `loader` 文件，`loader` 文件中导出一个函数，该函数提供组件所需的数据，然后在路由组件中通过 `useLoaderData` 函数获取数据，如下面示例：
 
 ```
 .
@@ -59,20 +30,11 @@ export default function UserPage() {
         └── page.loader.ts
 ```
 
-如[基础示例](#基础示例)中的 `loader` 可以用以下代码替代：
-```tsx
-// routes/user/page.loader.tsx
-type ProfileData = { /* some type declarations */ }
-
-export const loader = async(): ProfileData => {
-  const res = await fetch('https://api/user/profile');
-  return await res.json();
-}
+在文件中定义以下代码：
 
-// routes/user/page.tsx
+```ts title="routes/user/page.tsx"
 import { useLoaderData } from '@modern-js/runtime/router';
-// 这里只能使用 import type，导入类型
-import type { ProfileData } from './page.loader';
+import type { ProfileData } from './page.loader.ts';
 
 export default function UserPage() {
   const profileData = useLoaderData() as ProfileData;
@@ -80,24 +42,48 @@ export default function UserPage() {
 }
 ```
 
+```ts title="routes/user/page.loader.ts"
+export type ProfileData = {
+  /*  some types */
+};
 
-### `loader` 函数
+export default async (): Promise<ProfileData> => {
+  const res = await fetch('https://api/user/profile');
+  return await res.json();
+};
+```
+
+:::caution
+这里路由组件和 `loader` 文件共享类型，要使用 `import type` 语法。
+:::
+
+在 CSR 环境下，`loader` 函数会在客户端执行，`loader` 函数内可以使用浏览器的 API（但通常不需要，也不推荐）。
 
+在 SSR 环境下，不管是首屏，还是在客户端的导航，`loader` 函数只会在服务端执行，这里可以调用任意的 Node.js API，同时这里使用的任何依赖和代码都不会包含在客户端的 bundle 中。
+
+:::info
+在以后的版本中，Modern.js 可能会支持在 CSR 环境下，`loader` 函数也在服务端运行，以提高性能和安全性，所以这里建议尽可能地保证 loader 的纯粹，只做数据获取的场景。
+:::
+
+当在客户端导航时，基于 Modern.js 的[约定式路由](/docs/guides/basic-features/routes)，所有的 loader 函数会并行执行（请求），即当访问 `/user/profile` 时，`/user` 和 `/user/profile` 下的 loader 函数都会并行执行（请求），以提高客户端的性能。
+
+### `loader` 函数
 
 `loader` 函数有两个入参：
+
 #### `Params`
 
 当路由文件通过 `[]` 时，会作为[动态路由](/docs/guides/basic-features/routes#动态路由)，动态路由片段会作为参数传入 loader 函数：
 
 ```tsx
-// routes/user/[id]/page.tsx
+// routes/user/[id]/page.loader.ts
 import { LoaderArgs } from '@modern-js/runtime/router';
 
-export const loader = async({ params }: LoaderArgs) => {
+export default async ({ params }: LoaderArgs) => {
   const { id } = params;
   const res = await fetch(`https://api/user/${id}`);
   return res.json();
-}
+};
 ```
 
 当访问 `/user/123` 时，`loader` 函数的参数为 `{ params: { id: '123' } }`。
@@ -107,15 +93,16 @@ export const loader = async({ params }: LoaderArgs) => {
 `request` 是一个 [Fetch Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) 实例。
 
 一个常见的使用场景是通过 `request` 获取查询参数：
+
 ```tsx
-// routes/user/[id]/page.tsx
+// routes/user/[id]/page.loader.ts
 import { LoaderArgs } from '@modern-js/runtime/router';
 
-export const loader = async({ request }: LoaderArgs) => {
+export default async ({ request }: LoaderArgs) => {
   const url = new URL(request.url);
-  const userId = url.searchParams.get("id");
+  const userId = url.searchParams.get('id');
   return queryUser(userId);
-}
+};
 ```
 
 #### 返回值
@@ -123,44 +110,47 @@ export const loader = async({ request }: LoaderArgs) => {
 `loader` 函数的返回值可以是任何可序列化的内容，也可以是一个 [Fetch Response](https://developer.mozilla.org/en-US/docs/Web/API/Response) 实例：
 
 ```tsx
-export const loader = async(): ProfileData => {
+const loader = async (): Promise<ProfileData> => {
   return {
     message: 'hello world',
-  }
-}
+  };
+};
+export default loader;
 ```
 
 默认情况下，`loader` 返回的响应 `Content-type` 是 `application/json`，`status` 为 200，你可以通过自定义 `Response` 来设置：
+
 ```tsx
-export const loader = async(): ProfileData => {
-  const data = {message: 'hello world'};
+const loader = async (): Promise<ProfileData> => {
+  const data = { message: 'hello world' };
   return new Response(JSON.stringify(data), {
     status: 200,
     headers: {
-      "Content-Type": "application/json; utf-8",
+      'Content-Type': 'application/json; utf-8',
     },
   });
-}
+};
 ```
 
 ### 请求 API
 
 Modern.js 对 `fetch` API 做了 polyfill, 用于发起请求，该 API 与浏览器的 `fetch` API 一致，但是在服务端也能使用该 API 发起请求，这意味着不管是 CSR 还是 SSR，都可以使用统一的 `fetch` API 进行数据获取：
+
 ```tsx
-export async function loader(){
+async function loader() {
   const res = await fetch('https://api/user/profile');
 }
 ```
 
-
 ### 错误处理
 
 在 `loader` 函数中，可以通过 `throw error` 或者 `throw response` 的方式处理错误，当 `loader` 函数中有错误被抛出时，Modern.js 会停止执行当前 loader 中的代码，并将前端 UI 切换到定义的 [`ErrorBoundary`](/docs/guides/basic-features/routes#错误处理) 组件：
+
 ```tsx
-// routes/user/profile/page.tsx
-export async function loader(){
+// routes/user/profile/page.loader.ts
+export default async function loader() {
   const res = await fetch('https://api/user/profile');
-  if(!res.ok){
+  if (!res.ok) {
     throw res;
   }
   return res.json();
@@ -184,12 +174,13 @@ export default ErrorBoundary;
 ### 获取上层组件的数据
 
 很多场景下，子组件需要获取到祖先组件 loader 中的数据，你可以通过 `useRouteLoaderData` 方便地获取到祖先组件的数据：
+
 ```tsx
 // routes/user/profile/page.tsx
 import { useRouteLoaderData } from '@modern-js/runtime/router';
 
 export default function UserLayout() {
-  // 获取 routes/user/layout.tsx 中 loader 返回的数据
+  // 获取 routes/user/layout.loader.ts 中 loader 返回的数据
   const data = useRouteLoaderData('user/layout');
   return (
     <div>
@@ -203,17 +194,19 @@ export default function UserLayout() {
 `userRouteLoaderData` 接受一个参数 `routeId`，在使用约定式路由时，Modern.js 会为你自动生成`routeId`，`routeId` 的值是对应组件相对于 `src/routes` 的路径，如上面的例子中，子组件想要获取 `routes/user/layout.tsx` 中 loader 返回的数据，`routeId` 的值就是 `user/layout`。
 
 在多 entry（MPA） 场景下，`routeId` 的值需要加上对应 entry 的 name，entry name 非指定情况下一般是 entry 目录名，如以下目录结构：
+
 ```bash
 .
 └── src
     ├── entry1
-    │   ├── layout.tsx
+    │     └── routes
+    │           └── layout.tsx
     └── entry2
-        └── layout.tsx
+          └── routes
+                └── layout.tsx
 ```
 
-如果想获取 `entry1/layout.tsx` 中 loader 返回的数据，`routeId` 的值就是 `entry1_layout`。
-
+如果想获取 `entry1/routes/layout.tsx` 中 loader 返回的数据，`routeId` 的值就是 `entry1_layout`。
 
 ### (WIP)Loading UI
 
@@ -222,34 +215,8 @@ export default function UserLayout() {
 目前仅支持 CSR，敬请期待 Streaming SSR。
 :::
 
-因为获取数据是异步的，在数据获取完成之前，常常需要展示一个 Loading UI，以下是一个基本的示例，假设有以下目录：
-```bash
-.
-└── routes
-    ├── layout.tsx
-    └── user
-        ├── layout.tsx
-        └── page.ts
-```
-
-我们在 `user/layout.tsx` 中获取用户的详细数据，在获取数据之前，希望展示一个 Loading UI。
-
-首先，在项目中在 `routes` 目录下增加一个 `loading.tsx` 组件，该 `loading` 组件会对子目录下的所有路由生效（如 user）：
-```bash
-.
-└── routes
-    ├── layout.tsx
-    ├── loading.tsx
-    └── user
-        ├── layout.tsx
-        └── page.ts
-```
-
-:::info
-loading 组件的具体用法，请查看[loading](/docs/guides/basic-features/routes#loading)
-:::
+在 `user/layout.tsx` 中添加以下代码：
 
-然后，在 `user/layout.tsx` 中添加以下代码：
 ```tsx title="routes/user/layout.tsx"
 import {
   Await,
@@ -269,14 +236,18 @@ export default function UserLayout() {
   const { userInfo } = useLoaderData() as {userInfo: Promise<UserInfo>};
   return (
     <div>
-      <Await resolve={userInfo} children={userInfo => (
-        <div>
-          <span>{userInfo.name}</span>
-          <span>{userInfo.age}</span>
-          <Outlet>
-        </div>
-      )}>
-      </Await>
+      <React.Suspense
+        fallback={<p>Loading...</p>}
+      >
+        <Await resolve={userInfo} children={userInfo => (
+          <div>
+            <span>{userInfo.name}</span>
+            <span>{userInfo.age}</span>
+            <Outlet>
+          </div>
+        )}>
+        </Await>
+      </React.Suspense>
     </div>
   );
 }
@@ -288,87 +259,8 @@ Await 组件的具体用法请查看 [Await](https://reactrouter.com/en/main/com
 defer 的具体用法请查看 [defer](https://reactrouter.com/en/main/guides/deferred)
 :::
 
-
 <!-- TODO 缓存相关 -->
 
-### 副作用处理
-
-如上面所述，Modern.js 会将服务端代码 `loader` 从客户端 bundle 中移除，有一些你需要注意的事项，如果不想受副作用的影响，可以使用[单独文件](#单独文件) 的方式定义 `loader`。
-
-:::info
-在 CSR 场景下，通常副作用对项目影响较小，但依然希望你能遵循以下约定。
-:::
-
-模块的副作用可以认为是在模块被加载时执行的代码，比如：
-```tsx
-// routes/user/page.tsx
-import { useLoaderData } from '@modern-js/runtime/router';
-// highlight-next-line
-import { transformProfile } from "./utils";
-// highlight-next-line
-console.log(transformProfile);
-
-export const loader = async(): ProfileData => {
-  const res = await fetch('https://api/user/profile');
-  const data = await res.json();
-  return transformProfile(data);
-}
-
-export default function UserPage() {
-  const profileData = useLoaderData() as ProfileData;
-  return <div>{profileData}</div>;
-}
-```
-
-因为 `console.log` 在 `routes/user/page.tsx` 加载时，就会被执行，编译器不会移除它，`transformProfile` 就会打包到客户端的 bundle 中。
-
-所以我们不推荐有任何代码在模块加载时执行，包括项目代码和使用的第三方模块，以下是一些我们不推荐的写法：
-
-```tsx
-// routes/user/page.tsx
-export default function UserPage() {
-  return <div>profile</div>;
-}
-
-UserPage.config = {}
-```
-
-```tsx
-// routes/init.ts
-document.title = 'Modern.js';
-
-// routes/layout.tsx
-import "./init.ts";
-
-export default function Layout() {
-  return <></>
-}
-```
-
-在 SSR 场景，通常你需要在 `loader` 函数中使用 Node.js 核心包和依赖，对于非 Node.js 核心包，需要使用一个特殊约定的文件做重新导出，如使用 `fs-extra`：
-
-```tsx
-// routes/user/avatar.tsx
-import { useLoaderData } from '@modern-js/runtime/router';
-import { readFile } from './utils.server';
-
-type ProfileData = { /* some type declarations */ }
-
-export const loader = async(): ProfileData => {
-  const profile = await readFile('profile.json');
-  return profile;
-}
-
-export default function UserPage() {
-  const profileData = useLoaderData() as ProfileData;
-  return <div>{profileData}</div>;
-}
-
-// routes/user/utils.server.ts
-export * from 'fs-extra';
-```
-
-
 ### 错误用法
 
 1. `loader` 中只能返回可序列化的数据，在 SSR 环境下，`loader` 函数的返回值会被序列化为 JSON 字符串，然后在客户端被反序列化为对象。因此，`loader` 函数中不能返回不可序列化的数据（如函数）。
@@ -379,31 +271,57 @@ export * from 'fs-extra';
 
 ```ts
 // This won't work!
-export const loader = () => {
+export default () => {
   return {
     user: {},
-    method: () => {
-
-    }
-  }
-}
+    method: () => {},
+  };
+};
 ```
 
 2. Modern.js 会帮你调用 `loader` 函数，你不应该自己调用 `loader` 函数：
+
 ```ts
 // This won't work!
-export const loader = async () => {
+export default async () => {
   const res = fetch('https://api/user/profile');
   return res.json();
 };
 
+import loader from './page.loader.ts';
 export default function RouteComp() {
   const data = loader();
 }
 ```
 
-3. 在服务端运行时，`loader` 函数会被打包为一个统一的 bundle，所以我们不推荐服务端的代码使用 `__filename` 和 `__dirname`。
+3. 不能从路由组件中引入 `loader` 文件，也不能从 `loader` 文件引入路由组件中的变量，如果需要共享类型的话，应该使用 `import type`
+
+```ts
+// Not allowed
+// routes/layout.tsx
+import { useLoaderData } from '@modern-js/runtime/router';
+import { ProfileData } from './page.loader.ts'; // should use "import type" instead
+
+export const fetch = wrapFetch(fetch);
+
+export default function UserPage() {
+  const profileData = useLoaderData() as ProfileData;
+  return <div>{profileData}</div>;
+}
+
+// routes/layout.loader.ts
+import { fetch } from './layout.tsx'; // should not be imported from the routing component
+export type ProfileData = {
+  /*  some types */
+};
+
+export default async (): Promise<ProfileData> => {
+  const res = await fetch('https://api/user/profile');
+  return await res.json();
+};
+```
 
+4. 在服务端运行时，`loader` 函数会被打包为一个统一的 bundle，所以我们不推荐服务端的代码使用 `__filename` 和 `__dirname`。
 
 ## useLoader（旧版）
 
@@ -439,7 +357,7 @@ export default () => {
 
 ```html
 <script>
-window._SSR_DATA = {};
+  window._SSR_DATA = {};
 </script>
 ```
 
@@ -456,4 +374,3 @@ Modern.js 在新版本中，设计了全新的 Loader 方案。新方案解决
 :::note
 详细 API 可以查看 [useLoader](/docs/apis/app/runtime/core/use-loader)。
 :::
-

package/zh/guides/basic-features/env-vars.md

@@ -31,15 +31,16 @@ MODERN_ENV 的优先级高于 NODE_ENV。
 function App() {
   if (process.env.MODERN_TARGET === 'browser') {
     console.log(window.innerHeight);
-  };
-};
+  }
+}
 ```
 
 开发环境打包后，可以看到 SSR 产物和 CSR 产物如下：
 
 ```js title="dist/bundles/main.js"
 function App() {
-  if (false) {}
+  if (false) {
+  }
 }
 ```
 
@@ -80,8 +81,8 @@ BAR=456
 
 `.env` 文件遵循以下规则加载规则：
 
-* `.env`：默认加载。
-* `.env.{ MODERN_ENV | NODE_ENV }`：针对具体环境设置环境变量，会覆盖 `.env` 中的设置。
+- `.env`：默认加载。
+- `.env.{ MODERN_ENV | NODE_ENV }`：针对具体环境设置环境变量，会覆盖 `.env` 中的设置。
 
 当需要根据环境使用不同的配置时，可以把环境变量定义到对应环境名称的 `.env` 文件中，并在启动项目时手动设置执行环境。例如使用以下命令启动项目时，将会加载 `.env` 和 `.env.staging`:
 
@@ -121,7 +122,7 @@ if (true) {
 
 如果需要在代码中使用任意名称的环境变量，可以在 [`source.globalVars`](/docs/configure/app/source/global-vars) 配置指定, 例如：
 
-```typescript title="modern.config.ts"
+```ts title="modern.config.ts"
 export default defineConfig({
   source: {
     globalVars: {