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

package/zh/guides/topic-detail/framework-plugin/abstract.md

@@ -1,27 +0,0 @@
----
-sidebar_position: 1
----
-
-# 插件可以做什么
-
-Modern.js 内置了一套插件系统，并基于这套插件系统来管理各个运行流程，Modern.js 的所有工程方案都是通过这套插件实现的，同时也支持开发者通过编写插件来扩展更多功能，适配复杂场景。
-
-由于 Modern.js 是基于这套插件系统实现的，因此可以说，Modern.js 中的所有能力是都对开发者开放的。包括但不限于：
-
-- 注册命令
-- 修改 Modern.js 配置、配置校验 Schema
-- 修改编译时的 Webpack/Babel/Less/Sass/Tailwind CSS/... 配置
-- 修改运行时需要渲染的 React 组件、Element
-- 修改页面路由
-- 修改服务器路由
-- 自定义控制台输出
-- 自定义动态 HTML 模版
-- 自定义 Node.js 服务器框架
-- 自定义 React 组件客户端/服务器端渲染
-- ...
-
-因此，当 Modern.js 暂时没有覆盖到你所需要的功能或场景时，可以开发一个自定义插件，来实现适配特殊场景的相关功能。
-
-:::info 补充信息
-关于 Modern.js 插件 API 的详细介绍，请参考 【[插件 API](/docs/apis/app/runtime/plugin/abstract)】。
-:::

package/zh/guides/topic-detail/monorepo/deploy.md

@@ -1,43 +0,0 @@
----
-sidebar_position: 5
----
-
-# 应用项目的部署
-
-本章将要介绍如何在 Monorepo 中对应用项目进行部署。
-
-所谓的 “在 Monorepo 中对应用项目进行部署” 更像是应用项目部署到服务器的前置工作。应用项目的功能一般来自以下部分
-
-- 自身的代码逻辑功能
-- 第三方的依赖
-- Monorepo 中其他子项目提供的逻辑功能
-
-而在将应用项目放到部署服务器之前，需要对应用项目、第三方依赖以及它所依赖的子项目做整合处理。
-
-Modern.js 为 Monorepo 工程提供了部署功能，该功能可以为要部署的项目生成一个最小集合的 Monorepo，在这个 Monorepo 当中包含应用项目以及其依赖的子项目。
-
-我们以 [子项目联调](/docs/guides/topic-detail/monorepo/sub-project-interface) 章节的例子为例，如果要发布 `apps/app` 应用项目，那么在 Monorepo 根目录下执行：
-
-```
-pnpm deploy app
-```
-
-:::info 补充信息
-`app` 为应用项目的项目名称，或者说是 `package.json` 的 `name` 对应的值。
-:::
-
-执行命令之后，首先会在 Monorepo 根目录下生成 `output` 目录，其中包含了应用项目 `apps/app`、`features/internal-lib`、`packages/components`。
-
-:::info 补充信息
-`output` 目录就是需要部署到服务器上的目录，可以通过命令参数进行路径修改。可以查看 [deploy 命令](/docs/apis/monorepo/commands/deploy)。
-:::
-
-![](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/guides/monorepo-output.png)
-
-然后会自动进行依赖的安装。
-
-最后当 deploy 命令运行完成后，我们可以将 `output` 放到部署项目的服务器上。
-
-:::tip 提示
-在使用 Yarn 的 Monorepo 中，推荐全局安装 [Lerna](https://github.com/lerna/lerna) 作为 Monorepo 子项目额外的管理工具。由于 [Yarn 1 (Classic) ](https://classic.yarnpkg.com/lang/en/) 在安装依赖的时候，不会触发子项目的 [Life Cycle Scripts](https:/docs.npmjs.com/cli/v7/using-npm/scripts#life-cycle-scripts)，因此还需要使用 Lerna 完成这类事情。
-:::

package/zh/guides/troubleshooting/compile.md

@@ -1,379 +0,0 @@
----
-sidebar_position: 1
----
-
-# 编译构建问题
-
-### 如何配置 Webpack/Babel/PostCSS 等工具？
-
-请参考 [配置底层工具](/docs/guides/advanced-features/low-level)。
-
-### 如何自定义 HTML 模板？
-
-请参考 [自定义 HTML 模板](/docs/guides/basic-features/html)。
-
-### 如何提升编译构建速度？
-
-请参考 [提升编译速度](/docs/guides/topic-detail/compile-speed)。
-
-### 如何查看最终生效的 webpack 配置？
-
-可以通过 [modern inspect](/docs/apis/app/commands/inspect) 命令来查看最终生效的 webpack 配置。
-
----
-
-### 如何配置组件库按需引入？
-
-默认情况下，Modern.js 内置了 antd 组件库的按需引入配置。
-
-如果需要配置其他组件库的按需引入，可以通过 [tools.babel](/docs/configure/app/tools/babel) 配置 [babel-plugin-import](https://github.com/umijs/babel-plugin-import) 插件。
-
-```ts title="modern.config.ts"
-export default defineConfig({
-  tools: {
-    babel: (config, { addPlugins }) => {
-      addPlugins([
-        [
-          'babel-plugin-import',
-          {
-            libraryName: 'xxx-components',
-            libraryDirectory: 'es',
-            style: true,
-          },
-        ],
-      ]);
-    },
-  },
-});
-```
-
----
-
-### 如何移除代码中的 console？
-
-在生产环境构建时，我们可以移除代码中的 `console`，从而避免开发环境的日志被输出到生产环境。
-
-由于 Modern.js 默认在生产环境使用 [terser](https://github.com/terser/terser) 进行代码压缩，因此我们可以通过 [tools.terser](/docs/configure/app/tools/terser) 配置项来移除 `console`：
-
-```js title="modern.config.ts"
-export default defineConfig({
-  tools: {
-    terser: opt => {
-      if (typeof opt.terserOptions?.compress === 'object') {
-        opt.terserOptions.compress.drop_console = true;
-      }
-    },
-  },
-});
-```
-
-如果只希望移除 `console.log` 和 `console.warn`，保留 `console.error`，可以配置为：
-
-```js title="modern.config.ts"
-export default defineConfig({
-  tools: {
-    terser: opt => {
-      if (typeof opt.terserOptions?.compress === 'object') {
-        opt.terserOptions.compress.pure_funcs = ['console.log', 'console.warn'];
-      }
-    },
-  },
-});
-```
-
----
-
-### 如何清空 webpack 编译缓存？
-
-默认情况下，Modern.js 的 webpack 编译缓存生成在 `./node_modules/.cache/webpack` 目录下。
-
-如果需要清空本地的编译缓存，可以执行以下命令：
-
-```bash
-rm -rf ./node_modules/.cache
-```
-
----
-
-### 如何配置静态资源的 CDN 路径？
-
-如果需要将 JS、CSS 等静态资源上传到 CDN 使用，那么可以通过 [output.assetPrefix](/docs/configure/app/output/asset-prefix) 配置来设置静态资源的 URL 前缀。
-
-```typescript title="modern.config.ts"
-import { defineConfig } from '@modern-js/app-tools';
-
-export default defineConfig({
-  output: {
-    assetPrefix: 'https://cdn.example.com/assets/',
-  },
-});
-```
-
----
-
-### 如何在编译过程中进行 ESLint 代码校验？
-
-出于编译性能的考虑，Modern.js 默认不会在编译过程中进行 ESLint 校验，如果需要该功能，可以手动安装并注册社区中的 [eslint-webpack-plugin](https://github.com/webpack-contrib/eslint-webpack-plugin)。
-
-注册该插件的示例代码如下，更详细的用法请参考 [eslint-webpack-plugin](https://github.com/webpack-contrib/eslint-webpack-plugin) 文档。
-
-```typescript title="modern.config.ts"
-import { defineConfig } from '@modern-js/app-tools';
-import ESLintPlugin from 'eslint-webpack-plugin';
-
-export default defineConfig({
-  tools: {
-    webpackChain(chain) {
-      chain.plugin('eslint-plugin').use(ESLintPlugin, [
-        {
-          extensions: ['.js', '.ts', '.jsx', 'tsx', '.mjs'],
-        },
-      ]);
-    },
-  },
-});
-```
-
----
-
-### 如何配置 SRI 校验？
-
-在 Modern.js 中，需要自主引入社区中的 [webpack-subresource-integrity](https://github.com/waysact/webpack-subresource-integrity) 插件来开启 SRI 校验。
-
-配置 [webpack-subresource-integrity](https://github.com/waysact/webpack-subresource-integrity) 的示例如下：
-
-```typescript title="modern.config.ts"
-import { defineConfig } from '@modern-js/app-tools';
-import { SubresourceIntegrityPlugin } from 'webpack-subresource-integrity';
-
-export default defineConfig({
-  tools: {
-    webpackChain(chain) {
-      chain.output.crossOriginLoading('anonymous');
-      chain.plugin('subresource-integrity').use(SubresourceIntegrityPlugin);
-    },
-  },
-});
-```
-
-:::info SRI
-子资源完整性 Subresource Integrity（SRI）是专门用来校验资源的一种方案，它读取资源标签中的 integrity 属性，将其中的信息摘要值，和资源实际的信息摘要值进行对比，如果发现无法匹配，那么浏览器就会拒绝执行资源。
-
-对于 script 标签来说，结果为拒绝执行其中的代码；对于 CSS link 来说，结果为不加载其中的样式。
-:::
-
----
-
-### Less/Sass 代码没有被正确编译？
-
-Modern.js 通过插件来编译 Less/Sass 代码，请确认你是否启用了对应的插件。
-
-- [启用 Less 插件教程](/docs/configure/app/tools/less#启用)
-- [启用 Sass 插件教程](/docs/configure/app/tools/sass#启用)
-
----
-
-### 在 Monorepo 中引用其他模块，代码没有被正确编译？
-
-出于编译性能的考虑，默认情况下，Modern.js 不会通过 `babel-loader` 或 `ts-loader` 来编译 `node_modules` 下的文件，也不会编译当前工程目录外部的文件。
-
-通过 `source.include` 配置项，可以指定需要额外进行编译的目录或模块。
-
-详见 [source.include 用法介绍](/docs/configure/app/source/include/)。
-
----
-
-### 打包时出现 JavaScript heap out of memory?
-
-该报错表示打包过程中出现了内存溢出问题，大多数情况下是由于打包的内容较多，超出了 Node.js 默认的内存上限。
-
-如果出现 OOM 问题，最简单的方法是通过增加内存上限来解决，Node.js 提供了 `--max-old-space-size` 选项来对此进行设置。你可以在 `modern build` 命令前添加 [NODE_OPTIONS](http://nodejs.cn/api/cli/node_options_options.html) 来设置此参数：
-
-```bash
-NODE_OPTIONS=--max_old_space_size=16384 modern build
-```
-
-参数的值代表内存上限大小（MB)，一般情况下设置为 `16384`（16GB）即可。
-
-Node.js 官方文档中有对以下参数更详细的解释：
-
-- [NODE_OPTIONS](http://nodejs.cn/api/cli/node_options_options.html)
-- [--max-old-space-size](http://nodejs.cn/api/cli/max_old_space_size_size_in_megabytes.html)
-
-除了增加内存上限，通过开启一些编译策略来提升效率也是一个解决方案，详见 [提升编译速度](/docs/guides/topic-detail/compile-speed)。
-
----
-
-### webpack 编译出现 'compilation' argument 报错？
-
-如果编译时出现以下报错，通常是由于项目中安装了错误的 webpack 版本，或者安装了多个 webpack 版本引起：
-
-```bash
-TypeError: The 'compilation' argument must be an instance of Compilation
-```
-
-webpack 版本问题有以下几种情况：
-
-1. 项目的 package.json 中直接声明了 webpack 依赖，并且与 Modern.js 依赖的 webpack 版本范围不同，无法匹配到同一个版本。
-2. 项目里安装的多个 npm 包都依赖了 webpack，并且它们依赖的 webpack 版本范围不同，无法匹配到同一个版本。
-3. 由于包管理器的 lock 机制，导致 lock 文件中产生了多个 webpack 版本。
-
-如果是第一种情况，建议从项目的 package.json 中移除 webpack 依赖。因为 Modern.js 默认封装了 webpack 相关能力，并且会在 `tools.webpack` 配置项中传入 webpack 对象。因此在大多数情况下，不建议在项目中额外安装 webpack 依赖。
-
-如果是第二种情况，建议看看能否升级某个 npm 包，使其依赖的 webpack 版本范围与 Modern.js 保持一致。也可以通过包管理器的能力来手动统一版本，比如使用 [yarn resolutions](https://classic.yarnpkg.com/lang/en/docs/selective-version-resolutions/) 或 [pnpm overrides](https://pnpm.io/package_json#pnpmoverrides)。
-
-如果是第三种情况，可以使用第二种情况中提到的两种方法，也可以尝试删除 lock 文件后重新安装来解决。
-
-:::info
-删除 lock 文件会使项目中的依赖版本自动升级到指定范围下的最新版，请进行充分的测试。
-:::
-
----
-
-### Less 文件中的除法不生效？
-
-Less v4 版本与 v3 版本相比，除法的写法有一些区别：
-
-```less
-// Less v3
-.math {
-  width: 2px / 2; // 1px
-  width: 2px ./ 2; // 1px
-  width: (2px / 2); // 1px
-}
-
-// Less v4
-.math {
-  width: 2px / 2; // 2px / 2
-  width: 2px ./ 2; // 1px
-  width: (2px / 2); // 1px
-}
-```
-
-Modern.js 内置的 Less 版本为 v4，低版本的写法不会生效，请注意区分。
-
-Less 中除法的写法也可以通过配置项来修改，详见 [Less - Math](https://lesscss.org/usage/#less-options-math)。
-
----
-
-### 编译产物中存在未编译的 ES6+ 代码？
-
-默认情况下，Modern.js 不会通过 `babel-loader` 或 `ts-loader` 来编译 `node_modules` 下的文件。如果项目引入的 npm 包中含有 ES6+ 语法，会被打包进产物中。
-
-遇到这种情况时，可以通过 [source.include](/docs/configure/app/source/include) 配置项来指定需要额外进行编译的目录或模块。
-
----
-
-### 编译时报错 `You may need additional loader`？
-
-如果编译过程中遇到了以下报错提示，表示存在个别文件无法被正确编译。
-
-```bash
-Module parse failed: Unexpected token
-File was processed with these loaders:
- * some-loader/index.js
-
-You may need an additional loader to handle the result of these loaders.
-```
-
-解决方法：
-
-- 如果是引用了当前工程外部的 `.ts` 文件，或者是 node_modules 下的 `.ts` 文件，请添加 [source.include](/docs/configure/app/source/include) 配置项，指定需要额外进行编译的文件。
-- 如果是引用了 Modern.js 不支持的文件格式，请自行配置对应的 webpack loader 进行编译。
-
----
-
-### 打开页面后报错，提示 exports is not defined？
-
-如果编译正常，但是打开页面后出现 `exports is not defined` 报错，通常是因为在项目中使用 babel 编译了一个 CommonJS 模块，导致 babel 出现异常。
-
-在正常情况下，Modern.js 是不会使用 babel 来编译 CommonJS 模块的。如果项目中使用了 `source.include` 配置项，或使用了 `tools.babel` 的 `addIncludes` 方法，则可能会把一些 CommonJS 模块加入到 babel 编译中。
-
-该问题有两种解决方法：
-
-1. 避免将 CommonJS 模块加入到 babel 编译中。
-2. 将 babel 的 `sourceType` 配置项设置为 `unambiguous`，示例如下：
-
-```js
-export default defineConfig({
-  tools: {
-    babel(config) {
-      config.sourceType = 'unambiguous';
-    },
-  },
-});
-```
-
-将 `sourceType` 设置为 `unambiguous` 可能会产生一些其他影响，请参考 [babel 官方文档](https://babeljs.io/docs/en/options#sourcetype)。
-
----
-
-### 打包后发现 Tree Shaking 没有生效？
-
-Modern.js 在生产构建时会默认开启 webpack 的 Tree Shaking 功能，Tree Shaking 是否能够生效，取决于业务代码能否满足 webpack 的 Tree Shaking 条件。
-
-如果你遇到了 Tree Shaking 不生效的问题，可以检查下相关 npm 包的 `sideEffects` 配置是否正确，如果不了解 `sideEffects` 是什么，可以阅读以下两篇文档：
-
-- [webpack 官方文档 - Tree Shaking](https://webpack.docschina.org/guides/tree-shaking/)
-- [Tree Shaking 问题排查指南](https://bytedance.feishu.cn/docs/doccn8E1ldDct5uv1EEDQs8Ycwe)
-
----
-
-### 热更新后 React 组件的 state 丢失？
-
-Modern.js 使用 React 官方的 [Fast Refresh](https://github.com/pmmmwh/react-refresh-webpack-plugin) 能力来进行组件热更新。
-
-在使用 Fast Refresh 时，要求组件不能为匿名函数，否则热更新后无法保留 React 组件的 state。
-
-以下写法都是不正确的：
-
-```js
-// 错误写法 1
-export default function () {
-  return <div>Hello World</div>;
-}
-
-// 错误写法 2
-export default () => <div>Hello World</div>;
-```
-
-正确的写法为：
-
-```js
-// 正确写法 1
-export default function MyComponent() {
-  return <div>Hello World</div>;
-}
-
-// 正确写法 2
-const MyComponent = () => <div>Hello World</div>
-
-export default MyComponent;
-```
-
----
-
-### webpack 编译缓存未生效，应该如何排查？
-
-Modern.js 默认开启了 webpack 的持久化缓存。
-
-首次编译完成后，会自动生成缓存文件，并输出到 `./node_modules/.cache/webpack` 目录下。执行第二次编译时，会命中缓存，并大幅度提高编译速度。
-
-当 `modern.config.ts` 或 `package.json` 等配置文件被修改时，缓存会自动失效。
-
-如果项目中 webpack 编译缓存一直未生效，可以添加以下配置进行排查：
-
-```ts
-export default defineConfig({
-  tools: {
-    webpack(config) {
-      config.infrastructureLogging = {
-        ...config.infrastructureLogging,
-        debug: true,
-      };
-    },
-  },
-});
-```
-
-添加以上配置后，webpack 会输出日志用于 debug，请参考 `PackFileCacheStrategy` 相关的日志来了解缓存失效的原因。

package/zh/tutorials/first-app/c01-getting-started/1.1-prerequisites.md

@@ -1,25 +0,0 @@
----
-title: 环境准备
----
-
-从本章节开始，我们将进入实战教程部分。
-
-在实战教程中，我们将会从环境准备开始，从简单到复杂，一步一步搭建一个真实的项目。
-
-基于 Modern.js 框架的项目，自带全套工程环境和工程能力，对仓库目录之外的环境几乎没有任何依赖，只需要安装以下少数几个最基本的工具。
-
-## 1. Node.js
-
-需要 [Node.js LTS](https://github.com/nodejs/Release)，并确保 Node 版本大于等于 14.19.0, 推荐使用 16.x 版本。
-
-Modern.js 推荐在开发环境里先安装 [nvm](https://github.com/nvm-sh/nvm#install--update-script)，在 shell 里集成[自动切换 node 版本的脚本](https://github.com/nvm-sh/nvm#deeper-shell-integration)。
-
-然后只要仓库根目录下有内容为 `lts/fermium` 或 `lts/gallium` 的 `.nvmrc` 文件，进入这个仓库时就会自动安装或切换到正确的 Node.js 版本。
-
-## 2. pnpm
-
-推荐使用 [pnpm](https://pnpm.io/installation) 来管理项目依赖：
-
-```bash
-npm install -g pnpm
-```

package/zh/tutorials/first-app/c01-getting-started/1.2-minimal-mwa.md

@@ -1,118 +0,0 @@
----
-title: 创建最简单的应用工程
----
-
-## 开始创建
-
-### 1. 创建项目根目录和源代码目录
-
-我们创建名为 `hello-modern` 的项目：
-
-```bash
-mkdir -p hello-modern/src
-cd hello-modern
-```
-
-接下来都在项目根目录下执行命令。
-
-### 2. 在 src 目录下，创建 App.jsx
-
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-<Tabs>
-<TabItem value="macOS" label="macOS" default>
-
-```bash
-touch src/App.jsx
-```
-
-</TabItem>
-<TabItem value="Windows" label="Windows" >
-
-```bash
-ni src/App.jsx
-```
-
-</TabItem>
-</Tabs>
-
-在 App.jsx 里默认导出一个 React 组件，作为应用的根组件。
-
-```js title="src/App.jsx"
-export default function App() {
-  return <div>Hello World!</div>;
-}
-```
-
-### 3. 添加框架依赖
-
-在项目根目录下创建 `package.json`：
-
-<Tabs>
-<TabItem value="macOS" label="macOS" default>
-
-```bash
-touch package.json
-```
-
-</TabItem>
-<TabItem value="Windows" label="Windows">
-
-```bash
-ni package.json
-```
-
-</TabItem>
-</Tabs>
-
-
-复制以下内容到文件里：
-```json
-{
-  "name": "hello-modern",
-  "scripts": {},
-  "dependencies": {
-    "react": "^17",
-    "react-dom": "^17",
-    "@modern-js/runtime": "^1.0.0"
-  },
-  "devDependencies": {
-    "@modern-js/app-tools": "^1.0.0"
-  }
-}
-```
-
-### 4. 添加框架命令
-
-添加本章节要用的 3 个命令到 `package.json` 的 npm scripts 里：
-
-```json
-"scripts": {
-  "new": "modern new",
-  "dev": "modern dev",
-  "build": "modern build",
-  "start": "modern start"
-},
-```
-
-## 创建完成
-
-一个基于 Modern.js 框架的应用工程，到这里就已经创建完成了。
-
-目录结构如下：
-
-```md
-.
-├── src/
-│   └── App.jsx
-└── package.json
-```
-
-可以看到，由于 Modern.js 框架的**默认零配置、约定优于配置、开箱即用、避免样板文件、Universal App** 等设计，即使不借助任何脚手架、生成器、项目模板等工具，纯手动搭建一个项目，整个过程也是极其简单的。
-
-## 安装依赖
-
-```bash
-pnpm install
-```

package/zh/tutorials/first-app/c01-getting-started/1.3-dev-command.md

@@ -1,29 +0,0 @@
----
-title: 调试项目
----
-
-我们已经创建了一个最简单的应用工程，接下来执行 `pnpm run dev` 命令进入开发调试：
-
-```bash
-pnpm run dev
-```
-
-执行后，控制台出现以下提示：
-
-```bash
-App running at:
-
-  > Local:    http://localhost:8080/
-```
-
-访问运行结果中的 URL 可以看到应用工程的运行效果：
-
-![bash](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/display.png)
-
-:::info 注
-在 iTerm2 这样的现代终端里，按住 CMD/Alt 键，上面的 URL 会显示为链接，可以点击访问。
-:::
-
-保持命令继续运行，修改 `src/App.jsx`，把 Hello World 改成 Hello Modern.js。
-
-因为框架默认支持 [HMR](https://webpack.js.org/concepts/hot-module-replacement/)，可以看到 `http://localhost:8080/` 里的内容会自动变成 Hello Modern.js。

package/zh/tutorials/first-app/c01-getting-started/1.4-enable-ssr.md

@@ -1,44 +0,0 @@
----
-title: 启用 SSR
----
-
-上一小节我们学习了如何使用 Modern.js 调试项目，本小节我们将学习如何快速开启 SSR（服务端渲染）。
-
-在项目根目录下创建 `modern.config.js`：
-
-<Tabs>
-<TabItem value="macOS" label="macOS" default>
-
-```bash
-touch modern.config.js
-```
-
-</TabItem>
-<TabItem value="Windows" label="Windows">
-
-```bash
-ni modern.config.js
-```
-
-</TabItem>
-</Tabs>
-
-在 `modern.config.ts` 中添加如下配置：
-
-```typescript title="modern.config.ts"
-import { defineConfig } from '@modern-js/app-tools';
-
-export default defineConfig({
-  server: {
-    ssr: true,
-  },
-});
-```
-
-这样项目的 SSR 就已经开启了，重新执行 `pnpm run dev` 看看效果吧。
-
-用 Chrome 打开 `view-source:http://localhost:8080/`，查看 HTML 文件源代码，可以看到 root 根元素下存在已经在服务器端渲染好的 HTML。
-
-:::info 注
-Modern.js 框架使用 SSR 不需要自建 Web Server，开发者可以专注于 App 的开发。
-:::

package/zh/tutorials/first-app/c01-getting-started/1.5-start-command.md

@@ -1,18 +0,0 @@
----
-title: 运行项目
----
-
-`dev` 命令只是专用于开发环境中的调试运行。要正式（生产环境水平）的运行项目，可以先后运行 `build` 和 `start` 命令：
-
-```bash
-pnpm run build
-pnpm run start
-```
-
-用 Chrome 打开 `view-source:http://localhost:8080/`，查看 HTML 文件源代码，可以看到 HTML 本身和所有静态文件都符合生产环境标准。
-
-:::info 注
-基于 Modern.js 框架的项目，不需要借助其他服务器（比如 Nginx），可以直接运行。
-
-由于在任意机器、实例或容器上都能等价的运行，所以在本地机器上就能及时发现和调试线上环境中的很多问题。
-:::