@modern-js/main-doc 2.0.0-beta.2 → 2.0.0-beta.4

package/zh/tutorials/first-app/c01-getting-started/1.6-create-repo.md

@@ -1,31 +0,0 @@
----
-title: 创建 Git 仓库
----
-
-经过以上操作，现在项目的目录结构变成了这样：
-
-```md
-.
-├── node_modules/
-├── dist/
-├── src/
-│   └── App.jsx
-├── package.json
-└── pnpm-lock.yaml
-```
-
-`dist` 和 `log` 都是框架生成的构建产物和运行产物，不应该进入仓库索引，需要在项目根目录下添加一个 `.gitignore`，内容：
-
-```txt
-node_modules/
-dist/
-*.log*
-```
-
-然后可以执行 `git init` 等命令创建仓库。
-
-虽然手动创建一个 Modern.js 项目也很简单，但如果用 Modern.js 开发套件提供的工具，自动创建项目还可以更方便，并且获得更多开箱即用的最佳实践（比如上面的 .gitignore 等等）。
-
----
-
-> 本章节的代码可以在[这里查看](https://github.com/modern-js-dev/modern-js-examples/tree/main/tutorials/c01/hello-modern)。

package/zh/tutorials/first-app/c01-getting-started/_category_.json

@@ -1,3 +0,0 @@
-{
-  "label": "1: 手动创建应用工程"
-}

package/zh/tutorials/first-app/c02-generator-and-studio/2.1-generator.md

@@ -1,79 +0,0 @@
----
-title: ​用命令行工具创建项目​​
----
-
-上一章节中，我们介绍了如何手动创建一个 Modern.js 应用工程。
-
-这一章节中，我们将会学习使用命令行工具，更方便的创建。
-
-可以用已存在的空目录来创建项目：
-
-```bash
-mkdir hello-modern
-
-cd hello-modern
-
-npx @modern-js/create
-```
-
-也可以用新目录来创建项目：
-
-```bash
-npx @modern-js/create hello-modern
-
-cd hello-modern
-```
-
-`@modern-js/create` 是 Modern.js 生成器。不要全局安装 `@modern-js/create`，用 npx 按需运行，可以始终运行最新版。
-
-生成器会提供一个可交互的问答界面，根据后续的问答结果，按需运行不同的【 微生成器（micro-generator）】，在生成项目之后也会自动安装依赖、创建 git 仓库。
-
-:::info 微生成器（micro-generator）
-
-传统脚手架通常提供整个项目级别的生成器，基于模板，一用即抛，生成完项目之后，对后续的业务迭代没有帮助。
-
-微生成器关注的是项目的整个生命周期，既可以生成项目中各种粒度各种类型的文件模块（比如教程后面会提到的 entry、component、model 等），也可以生成抽象的业务逻辑（可能不创建新文件，而是在现有文件上做自动重构）。微生成器不是只在最初创建项目的时候使用的一次性工具，而是伴随项目后续迭代过程的工具箱。Modern.js 也可以支持业务项目添加自己业务专用的微生成器。
-
-Modern.js 生成器是基于微生成器和应用工程（Universal App，不需要多套模板）的项目生成器，会在问答过程中，按需加载不同的微生成器，动态生成不同的初始文件和代码或修改重组已有的文件和代码。在这种模式下，业务开发者可以方便地对 Modern.js 生成器进行定制，实现个性化的业务工程方案生成器。
-:::
-
-### 初始化项目
-
-Modern.js 生成器会通过交互式的问题获取一些必要信息，动态生成最合适的项目内容，我们先按以下选择创建：
-
-```bash
-# 请选择你想创建的工程类型
-❯ 应用
-  模块
-  Monorepo
-
-# 请选择开发语言
-  TS
-❯ ES6+
-
-# 请选择包管理工具
-❯ pnpm
-  Yarn
-```
-
-项目生成后，在项目根目录执行 `pnpm run dev` 就可以直接进行调试了：
-
-![vsc-alert](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/init.png)
-
-### 扩展项目
-
-如上所述，微生成器是伴随项目后续迭代过程中的工具箱，可以使用 `pnpm run new` 在需要的时候来扩展项目。
-
-执行 `pnpm run new` 后，我们按照以下选择，开启可选的 Tailwind CSS 支持：
-
-```bash
-# 请选择你想要的操作
-  创建工程元素
-❯ 启用可选功能
-
-# 启用可选功能
-❯ 启用 Tailwind CSS 支持
-  ...
-```
-
-选择 **启用 Tailwind CSS 支持**，等待命令运行结束，可以看到在 `package.json` 中新增了 `@modern-js/plugin-tailwindcss` 依赖，并且依赖已经完成安装。

package/zh/tutorials/first-app/c02-generator-and-studio/2.2-boilerplates.md

@@ -1,36 +0,0 @@
----
-title: 样板文件
----
-
-生成的项目结构：
-
-```md
-.
-├── .eslintrc.js
-├── .gitignore
-├── .husky
-├── .idea
-├── .npmrc
-├── .nvmrc
-├── .prettierrc
-├── .vscode
-├── README.md
-├── modern.config.ts
-├── package.json
-├── pnpm-lock.yaml
-├── src
-│   ├── .eslintrc.js
-│   ├── modern-app-env.d.ts
-│   └── routes
-│       ├── index.css
-│       ├── layout.tsx
-│       └── page.tsx
-└── tsconfig.json
-```
-
-和上一章节手动创建出来的项目一样，仍然是零配置、极简和轻量的，但功能更完整，最佳实践开箱即用，比如：
-
-1. 提供了 IDE 相关支持，下一节会详细介绍。
-2. 集成了 Modern.js Lint 规则集，按照最佳实践启用，省去很多配置工作。
-3. 声明了 Node.js 版本。如果你按照[上一节的推荐](../c01-getting-started/1.1-prerequisites.md)，在系统里启用了[自动切换 node 版本的脚本](https://github.com/nvm-sh/nvm#automatically-call-nvm-use)，进入项目目录时，nvm 会自动安装和切换到项目声明的 Node.js 版本。
-4. 包含 Modern.js 框架的全套命令。

package/zh/tutorials/first-app/c02-generator-and-studio/2.3-configuration.md

@@ -1,21 +0,0 @@
----
-title: ​配置项目
----
-
-通过命令行工具创建的 Modern.js 项目，在 `package.json` 文件中，存在 `modernConfig` 字段。
-
-我们也可以创建 `modern.config.js` 配置文件。
-
-这两处都可以进行 Modern.js 项目的配置，并且 `modernConfig` 字段中的配置优先级高于 `modern.config.js` 中相同的内容。
-
-:::info 注
-
-如果配置为函数，则必须使用 `modern.config.js`。
-
-:::
-
-我们可以在 `modernConfig` 或 `modern.config.js` 中配置诸如 Server Port、Document 元信息、Webpack 选项等。
-
----
-
-> 本章节的代码可以在[这里查看](https://github.com/modern-js-dev/modern-js-examples/tree/main/tutorials/c02/hello-modern)。

package/zh/tutorials/first-app/c02-generator-and-studio/_category_.json

@@ -1,3 +0,0 @@
-{
-  "label": "2: 自动创建应用工程"
-}

package/zh/tutorials/first-app/c03-ide/3.1-setting-up.md

@@ -1,55 +0,0 @@
----
-title: ​初始化 IDE​​​​
----
-
-上一章节中，我们已经创建了一个新的 Modern.js 应用工程。
-
-在开始写代码之前，我们将会在这一章节里先确认 IDE 相关功能。
-
-Modern.js 框架默认提供了对 VS Code 和 WebStorm 的支持，本章以 VS Code 为例。
-
-## 用 VS Code 打开项目根目录
-
-```bash
-cd hello-modern/
-code .
-```
-
-![vsc-alert](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/vsc-mwa.png)
-
-:::info 补充信息
-必须打开项目根目录，不能打开其他子目录或父目录，否则 IDE 支持不会生效。
-:::
-
-## 安装插件
-
-点击左侧栏上的插件（Extensions）面板，过滤 `@recommended` 列表，可以看到这里分为工作区推荐插件（Workspace Recommendations）和其他推荐插件（Other Recommendations）。
-
-![vsc-alert](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/vsc-plugin.png)
-
-点击工作区推荐插件顶部的下载按钮，安装当前仓库推荐的（也就是 Modern.js 框架推荐的）所有 VS Code 插件，等待全部安装成功，重启 VS Code 让插件生效。
-
-如果 VS Code 弹出这个确认框，点击 Allow 即可：
-
-![vsc-alert](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/vsc-alert.png)
-
-也可以检查 VS Code 底栏右侧显示的 ESLint 状态，或 VS Code 的 Problem 面板，比如如果有下面这样的提示：
-
-![vsc-bottom-bar](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/vsc-bottom-bar.png)
-
-点击底栏上的 ESLint 就会弹出上面的对话框。
-
-到这里，不需要做任何配置，IDE 就已经准备就绪，可以开始写代码了。
-
-:::info 注
-这些 VS Code 插件不会影响性能，如果实在不想一键安装所有插件，至少要安装以下插件：
-
-- editorconfig
-- eslint
-- vscode-styled-components
-- language-postcss
-- eslint-disable-snippets
-:::
-
-本章节接下来的步骤，也起到检查 IDE 功能的作用，任一步骤不符合描述，都说明有问题。
-

package/zh/tutorials/first-app/c03-ide/3.2-hints-in-ide.md

@@ -1,66 +0,0 @@
----
-title: IDE 中的自动提示
----
-
-打开任意 JS/TS 文件（比如 `src/App.jsx`），底部状态栏右侧应该有显示 ESLint，点击可以看到运行 log，应该没有报错。
-
-接下来对 `App.jsx` 代码做如下修改（修改过程中不要保存），增加无用的函数参数、去掉换行、单引号改成双引号、增加缩进（可以直接复制下面的代码替换 App.jsx 的内容），注意修改过程中**先不要保存文件**。
-
-```js
-import { Switch, Route } from '@modern-js/runtime/router';
-
-import './App.css';
-
-const App = (a) => (
-  <Switch>
-    <Route exact={true} path="/">
-      <div className="container-box">
-        <main>
-          <div className='logo'>
-            <img
-              src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ylaelkeh7nuhfnuhf/modernjs-cover.png"
-              width="300"
-              alt="Modern.js Logo"
-            />
-          </div>
-          <p className="description">
-            Get started by editing <code className="code">src/App.tsx</code>
-          </p>
-          <div className="grid">
-            <a href="#" className="card">
-              <h2>Quick Start</h2>
-            </a>
-            <a href="#" className="card">
-              <h2>Handbook</h2>
-            </a>
-            <a href="#" className="card">
-              <h2>API Reference </h2>
-            </a>
-            <a
-              href="#"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="card">
-              <h2>Community </h2>
-            </a>
-          </div>
-        </main>
-        <footer className="footer">
-          <a href="#" target="_blank" rel="noopener noreferrer">
-            Powered by Modern.JS
-          </a>
-        </footer>
-      </div>
-    </Route>
-    <Route path="*">
-      <div>404</div>
-    </Route>
-  </Switch>
-);
-
-export default App;
-```
-
-可以在 VS Code 中看到修改过的代码出现了问题提示，点击底部界面中的 Problems 一栏，可以看到问题列表。
-
-![vsc-with-error](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/vsc-with-error.png)

package/zh/tutorials/first-app/c03-ide/3.3-autofix-in-ide.md

@@ -1,11 +0,0 @@
----
-title: IDE 中的自动修复
----
-
-直接保存当前文件（CMD/Ctrl + S），应该会看到代码风格相关的问题都自动被修复了（有时每次保存只能修复一部分，需要多保存几次，直到没变化）。
-
-只剩下**无用的函数参数**问题，需要人工修复：
-
-![vsc-how-to-fix](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/vsc-how-to-fix.png)
-
-问题提示中，显示了这个问题来自 ESLint 的 `no-unused-vars` 规则，带下划线的是 ESLint 规则名称，按住 CMD/Alt 键点击，可以打开这条规则的文档，查看问题的解释和解决方法。

package/zh/tutorials/first-app/c03-ide/3.4-autofix-in-cli.md

@@ -1,63 +0,0 @@
----
-title: 命令行中的自动修复
----
-
-提交前的自动准入检查，跟 VS Code 里的保存一样，会尽可能自动格式化代码和修复问题，只有遇到无法自动修复的问题，才会报错阻止提交。
-
-我们添加一段可自动修复的问题代码（如果在 VS Code 里添加，保存时会自动修复，所以用 CLI 来添加）：
-
-```bash
-echo ';' >> src/App.jsx
-```
-
-打开 `App.jsx`，可以看到末尾多了一个 ';'，有问题提示。
-
-提交代码：
-
-```bash
-git commit -am "test: 再次测试准入检查"
-git status
-```
-
-可以看到虽然仍然提交失败，但新增的问题被自动修复了。
-
-手动把参数 a 的问题修复（删除 a），再次添加 ';'，提交代码：
-
-```bash
-echo ';' >> src/App.jsx
-git commit -am "test: 再次测试准入检查"
-git log HEAD --stat --graph --name-status
-```
-
-可以看到提交成功了，新增的问题被自动修复，并且自动被 stage。
-
-:::info 注
-在真实项目的开发中，对于以下情况，可以在提交时增加 -n 或 --no-verify 参数，破例跳过准入检查：
-1. Hotfix
-2. merge 过程中解决了冲突，变更的文件里包含别人的代码
-3. 旧项目迁移到 Modern.js，最初做统一自动修复的提交
-:::
-
-提交前的自动准入检查，只会检查和修复这次提交中有变更的文件（已经 stage 的文件），也就是说，只会强制要求这次工作过程中修改过的文件没有问题，不会要求你去解决这次工作无关的文件的问题。
-
-如果要对整个仓库的所有文件做 lint 检查和自动修复，可以手动执行 `lint` 命令，比如：
-
-```bash
-echo ';' >> src/App.jsx
-pnpm run lint
-```
-
-:::info 注
-上述命令速度慢，不常用。旧项目刚迁移到 Modern.js 框架的时候，可以用这个命令对所有代码做一次自动修复，单独提交。
-:::
-
-本章节中，我们完成了编程环境的初始化和检查，熟悉了相关功能。下一章节开始，我们就可以开始写代码了。
-
-:::info 注
-Modern.js 是用 [Modern Lint](/docs/guides/advanced-features/eslint) 规则集来实现上述能力， 集成了 ESLint、TypeScript 支持、Prettier 等主流工具和最佳实践。
-:::
-
----
-
-> 本章节的代码可以在[这里查看](https://github.com/modern-js-dev/modern-js-examples/tree/main/tutorials/c03/hello-modern)。
-

package/zh/tutorials/first-app/c03-ide/_category_.json

@@ -1,3 +0,0 @@
-{
-  "label": "3: 确认编程环境"
-}

package/zh/tutorials/first-app/c04-es6-plus-and-ts/4.1-use-es6-plus.md

@@ -1,67 +0,0 @@
----
-title: 使用 ES6+ 语法
----
-
-上一章节中，我们确认了当前 IDE 的编程环境。
-
-这一章节中，我们沿用上一章节的项目和编码环境，实现一个最简单的联系人列表。
-
-Modern.js 支持 `src` 目录下直接使用 ES6+（ES2015+）语法，原则上包括：
-
-1. 已经进入 [Stage 4（完成阶段）](https://github.com/tc39/proposals/blob/master/finished-proposals.md)的语法，包括 ES2015（ES6）到 ES2020（ES11）以及后续版本。
-2. 部分很有用且确定性较强（重构也容易）的 [Stage 1（提案阶段）](https://github.com/tc39/proposals/blob/master/stage-1-proposals.md)、[Stage 2（草案阶段）](https://github.com/tc39/proposals#stage-2)、[Stage 3（候选阶段）](https://github.com/tc39/proposals#stage-3)语法，比如：
-
-     - [Decorators](https://babeljs.io/docs/en/babel-plugin-proposal-decorators)（默认使用 legacy 提案，可通过 `output.enableLatestDecorators` 使用新版提案）
-     - [Class Public Properties](https://babeljs.io/docs/en/babel-plugin-proposal-class-properties)
-     - [Class Private Properties](https://babeljs.io/docs/en/babel-plugin-proposal-private-property-in-object)、[Class Private Methods](https://babeljs.io/docs/en/babel-plugin-proposal-private-methods)
-     - [Pipeline Operator](https://babeljs.io/docs/en/babel-plugin-proposal-pipeline-operator)（默认为 minimal 提案）
-     - [Partial Application](https://babeljs.io/docs/en/babel-plugin-proposal-partial-application)
-     - [Bind Operator](https://babeljs.io/docs/en/babel-plugin-proposal-function-bind)
-     - [export default from](https://babeljs.io/docs/en/babel-plugin-proposal-export-default-from), [export namespace from](https://babeljs.io/docs/en/babel-plugin-proposal-export-namespace-from)
-     - [Optional Catch Binding](https://babeljs.io/docs/en/babel-plugin-proposal-optional-catch-binding)
-     - [Numeric Separator](https://babeljs.io/docs/en/babel-plugin-proposal-numeric-separator)
-
-我们把 `src/App.jsx` 改成：
-
-```js
-const getAvatar = users =>
-  users.map(user => ({
-    ...user,
-    avatar: `https://avatars.dicebear.com/v2/identicon/${user.name}.svg`,
-  }));
-
-const mockData =
-  [
-    { name: 'Thomas', email: 'w.kccip@bllmfbgv.dm' },
-    { name: 'Chow', email: 'f.lfqljnlk@ywoefljhc.af' },
-    { name: 'Bradley', email: 'd.wfovsqyo@gpkcjwjgb.fr' },
-    { name: 'Davis', email: '"t.kqkoj@utlkwnpwk.nu' },
-  ] |> getAvatar;
-
-function App() {
-  return (
-    <ul>
-      {mockData.map(({ name, avatar, email }) => (
-        <li key={name}>
-          <img src={avatar} width={60} height={60} /> ---
-          <span>{name}</span> ---
-          <span>{email}</span>
-        </li>
-      ))}
-    </ul>
-  );
-}
-
-export default App;
-```
-
-可以看到其中使用了多种 ES6+ 语法（注意生成 mockData 过程中使用了 [Pipeline Operator](https://babeljs.io/docs/en/babel-plugin-proposal-pipeline-operator) 语法），都不需要做任何配置。
-
-运行 `pnpm run dev`，查看运行结果：
-
-![result](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/contacts.png)
-
----
-
-> 本小节的代码可以在[这里查看](https://github.com/modern-js-dev/modern-js-examples/tree/main/tutorials/c04/hello-modern)。
-

package/zh/tutorials/first-app/c04-es6-plus-and-ts/4.2-use-typescript.md

@@ -1,111 +0,0 @@
----
-title: 使用 TypeScript 语法
----
-
-Modern.js 同样对 TypeScript 提供了一等公民、开箱即用的支持。
-
-这一小节，我们将当前为 ES6+ 语法的 Demo 修改为 TypeScript 语法。
-
-在项目根目录下执行：
-
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-<Tabs>
-<TabItem value="macOS" label="macOS" default>
-
-```bash
-mv src/App.jsx src/App.tsx
-
-pnpm add typescript @types/react @types/react-dom @types/node -D
-
-touch tsconfig.json
-```
-
-</TabItem>
-<TabItem value="Windows" label="Windows">
-
-```bash
-mv src/App.jsx src/App.tsx
-
-pnpm add typescript @types/react @types/react-dom @types/node -D
-
-ni tsconfig.json
-```
-
-</TabItem>
-</Tabs>
-
-:::info 注
-接下来所有章节的项目，都会使用 TS 来进行开发。
-:::
-
-`tsconfig.json` 内容如下：
-
-```json
-{
-  "extends": "@modern-js/tsconfig/base",
-  "compilerOptions": {
-    "declaration": false,
-    "jsx": "preserve",
-    "baseUrl": "./",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  },
-  "include": ["src", "shared", "config"]
-}
-```
-
-打开 `src/App.tsx`，把代码改成以下内容：
-
-```ts
-import React from 'react';
-
-const getAvatar = (users: Array<{ name: string; email: string }>) =>
-  users.map(user => ({
-    ...user,
-    avatar: `https://avatars.dicebear.com/v2/identicon/${user.name}.svg`,
-  }));
-
-const mockData = getAvatar([
-  { name: 'Thomas', email: 'w.kccip@bllmfbgv.dm' },
-  { name: 'Chow', email: 'f.lfqljnlk@ywoefljhc.af' },
-  { name: 'Bradley', email: 'd.wfovsqyo@gpkcjwjgb.fr' },
-  { name: 'Davis', email: '"t.kqkoj@utlkwnpwk.nu' },
-]);
-
-function App() {
-  return (
-    <ul>
-      {mockData.map(({ name, avatar, email }) => (
-        <li key={name}>
-          <img src={avatar} width={60} height={60} /> ---
-          <span>{name}</span> ---
-          <span>{email}</span>
-        </li>
-      ))}
-    </ul>
-  );
-}
-
-export default App;
-```
-
-可以看到，跟 ES6+ 的代码相比有以下不同：
-
-1. 由于 TS 还不支持 [Pipeline Operator](https://babeljs.io/docs/en/babel-plugin-proposal-pipeline-operator) 语法，需要把 mockData 的生成过程改成普通的函数调用语法。
-2. 需要声明 `getAvatar` 参数的类型。
-
-在 VS Code 里，把鼠标悬停在 `mockData` 上，可以看到它的类型已经被自动推导出来。如果把 `key={name}` 改成 `key={name * 2}`，可以看到 TS 的报错。
-
-运行 `pnpm run dev`，可以看到一样的运行结果。
-
-:::info 注
-更简单、开箱即用的方式，是在创建项目的时候，**开发语言**选择 TS，会自动生成上述样板代码，源代码文件也会自动默认采用 .ts 和 .tsx。
-:::
-
----
-
-> 本小节的代码可以在[这里查看](https://github.com/modern-js-dev/modern-js-examples/tree/main/tutorials/c04/hello-modern-2)。
-

package/zh/tutorials/first-app/c04-es6-plus-and-ts/4.3-compatibility.md

@@ -1,67 +0,0 @@
----
-title: 客户端兼容性
----
-
-前两个小节我们学习了如何使用 ES6+ 与 TypeScript 语法来编写应用。
-
-这一小节，我们来学习如何在 Modern.js 中解决客户端兼容性的问题。
-
-在实际项目中，往往会因为需要兼容老版本浏览器，而无法利用现代浏览器的最新特性与最佳实践。
-
-Modern.js 提供了开箱即用的解决客户端兼容性的能力，支持自动 Polyfill、Browserslist 配置、差异化分发。
-
-我们首先使用微生成器开启该功能：
-
-```bash
-? 请选择你想要的操作：启用可选功能
-? 启用可选功能：启用「基于 UA 的 Polyfill」功能
-```
-
-接着我们修改 `modern.config.ts`，添加以下配置：
-
-```typescript title="modern.config.ts"
-export default defineConfig({
-  output: {
-    polyfill: 'ua',
-  },
-});
-```
-
-以上配置将会开启「 自动 Polyfill 」，Modern.js 会根据浏览器对规范的支持程度，返回不同内容的 polyfill，我们不需要再担心低版本浏览器对新版本浏览器的拖累。
-
-执行 `pnpm run dev`，可以看到浏览器中请求了当前服务上 `/__polyfill__` 这一资源，但是当前请求到的资源是空的：
-
-![result](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/result1.png)
-
-我们切换到 Chrome Mobile 模式，选择设备为 iPhone 5/SE，重新刷新页面，可以看到请求到了有内容的资源：
-
-![result](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/result2.png)
-
-:::info 注
-如果遇到无法识别的浏览器，Modern.js 将会返回全量的 polyfill。
-:::
-
-接下里我们继续修改 `modern.config.ts`：
-
-```typescript title="modern.config.ts"
-export default defineConfig({
-  output: {
-    enableModernMode: true,
-    polyfill: 'ua',
-  },
-});
-```
-
-以上配置将会开启「 差异化分发 」，在原生支持模块功能的浏览器中，Modern.js 优先使用带有 ESM 模块语法静态资源的 HTML，浏览器能够最优化的加载模块，带来更好的页面性能。
-
-执行 `pnpm run build && pnpm run start`，打开页面，可以看到已经加载了带有 `-es6` 后缀的资源文件：
-
-![result](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/result3.png)
-
-:::info 注
-更多相关内容可以查看 [**客户端兼容性**](/docs/guides/advanced-features/compatibility)。
-:::
-
----
-
-> 本小节的代码可以在[这里查看](https://github.com/modern-js-dev/modern-js-examples/tree/main/tutorials/c04/hello-modern-3)。

package/zh/tutorials/first-app/c04-es6-plus-and-ts/_category_.json

@@ -1,3 +0,0 @@
-{
-  "label": "4: 写 JS 代码"
-}