@modern-js/main-doc 2.0.3-alpha.0 → 2.2.0

package/zh/tutorials/first-app/c08-entries.md

@@ -1,137 +0,0 @@
----
-title: 添加应用入口
----
-
-上一个章节中，我们基本完成了联系人列表应用的开发，介绍了 Modern.js 中部分功能的用法，以及推荐的最佳实践。
-
-这一章节中，我们将介绍如何为应用添加新的入口。
-
-## 新建入口
-
-一个完整的项目可能需要多个入口，Modern.js 支持自动创建新入口，前面的章节中提到过，`pnpm run new` 可以启用可选功能。
-
-我们也可以通过它来创建新的工程元素，在项目根目录下执行 `pnpm run new`：
-
-```bash
-? 请选择你想要的操作 创建工程元素
-? 创建工程元素 新建「应用入口」
-? 请填写入口名称 (entry) landing-page
-```
-
-创建完成，项目会变成这样：
-
-```md
-.
-├── README.md
-├── modern.config.ts
-├── node_modules
-├── package.json
-├── pnpm-lock.yaml
-├── src
-│   ├── modern-app-env.d.ts
-│   ├── landing-page
-│   │   └── routes
-│   │       ├── index.css
-│   │       ├── layout.tsx
-│   │       └── page.tsx
-│   └── myapp
-│       ├── components
-│       │   ├── Avatar
-│       │   │   └── index.tsx
-│       │   └── Item
-│       │       └── index.tsx
-│       ├── containers
-│       │   └── Contacts.tsx
-│       ├── models
-│       │   └── contacts.ts
-│       ├── routes
-│       │   ├── archives
-│       │   │   └── page.tsx
-│       │   ├── layout.tsx
-│       │   └── page.tsx
-│       └── styles
-│           └── utils.css
-└── tsconfig.json
-
-```
-
-可以看到联系人列表应用的文件，都被自动重构到 `src/myapp/` 里。
-
-同时新建了一个 `src/landing-page/`，里面同样有 `routes/*`（`pnpm run new` 命令只做了这些事，所以你也可以很容易的手动创建新入口或修改入口）
-
-执行 `pnpm run dev`，显示：
-
-![design](https://lf3-static.bytednsdoc.com/obj/eden-cn/nuvjhpqnuvr/modern-website/tutorials/c08-entries-myapp.png)
-
-访问 `http://localhost:8080/`，可以像之前一样看到应用程序。
-
-访问 `http://localhost:8080/landing-page`，可以看到刚创建的新入口 `landing-page` 的页面（Modern.js 自动生成的默认页面）。
-
-Modern.js 框架的设计原则之一是【[约定优于配置（Convention over Configuration）](https://en.wikipedia.org/wiki/Convention_over_configuration)】，多数情况下可以按约定直接写代码，不需要做任何配置，这里 `src/` 中的目录结构就是一种约定：
-
-`src/myapp/` 和 `src/landing-page/` 被自动识别为两个应用入口：myapp 和 landing-page。
-
-其中 `src/myapp/` 的目录名跟项目名（`package.json` 里的 `name`）一致，会被认为是项目**主入口**，项目 URL 的根路径（开发环境里默认是 `http://localhost:8080/`）会自动指向主入口。
-
-其他入口的 URL，是在根路径后追加入口名，比如 `http://localhost:8080/landing-page`。
-
-接下来，我们把 `src/myapp/` 重命名为 `src/contacts/`：
-
-```bash
-mv src/myapp src/contacts
-```
-
-再次执行 `pnpm run dev`，结果变成：
-
-![design](https://lf3-static.bytednsdoc.com/obj/eden-cn/nuvjhpqnuvr/modern-website/tutorials/c08-entries-contacts.png)
-
-现在不再有主入口，联系人列表现在是一个普通入口，需要用 `http://localhost:8080/contacts` 访问。
-
-
-## 按入口修改配置
-
-我们可以在 Modern.js 配置文件里，自己写代码来控制项目的配置。
-
-现在，修改 `modern.config.ts` 里面添加内容：
-
-```typescript
-import AppToolsPlugin, { defineConfig } from '@modern-js/app-tools';
-import TailwindCSSPlugin from '@modern-js/plugin-tailwindcss';
-
-// https://modernjs.dev/docs/apis/app/config
-export default defineConfig({
-  runtime: {
-    router: true,
-    state: true,
-  },
-  server: {
-    ssr: true,
-    ssrByEntries: {
-      'landing-page': false,
-    },
-  },
-  plugins: [AppToolsPlugin(), TailwindCSSPlugin()],
-});
-```
-
-执行 `pnpm run dev`，再用浏览器打开 `view-source:http://localhost:8080/landing-page`，可以看到 `landing-page` 网页内容是通过 js 动态加载的，且此页面的 SSR 功能被关闭。
-
-如果注释掉 `ssrByEntries` 和它的值，landing-page 的 SSR 功能就恢复开启了。
-
-还有一些时候，需要一些更复杂的逻辑来做设置，比如需要 JS 变量、表达式、导入模块等，例如在只在开发环境里开启 SSR：
-
-```js
-export default defineConfig({
-  server: {
-    ssrByEntries: {
-      'landing-page': process.env.NODE_ENV !== 'production',
-    },
-  },
-};
-```
-
-到底为止，我们的联系人列表应用的雏形就基本完成了 👏👏👏。
-
-## 下一步
-
-接下来你可以通过了解[指南](/docs/guides/get-started/quick-start)、[配置](/docs/configure/app/usage) 等更多教程，进一步完善你的应用。

package/zh/tutorials/foundations/introduction.md

@@ -1,43 +0,0 @@
----
-title: 介绍
-sidebar_position: 1
----
-
-欢迎来到 Modern.js 教程！
-
-阅读本栏目后，你将初步理解 Modern.js，并使用 Modern.js 创建第一个应用。
-
-:::note 关注
-加入我们的飞书群，咨询相关问题，了解最新动态。
-:::
-
-## Modern.js 是什么
-
-**Modern.js** 是基于 React 的渐进式现代 Web 开发框架。
-
-框架内置多种开箱即用的开发工具，拥有极致的构建性能，支持零配置的渲染范式切换，一体化的 API 调用。并从三种工程方案出发（应用工程方案、模块工程方案，Monorepo 工程方案），支持全链路的前端研发。
-
-Modern.js 是字节跳动的底层前端研发框架，已经直接或间接的服务上千个应用，包括中后台、PC Web、H5 等多种应用场景。框架覆盖完整的生命周期，拥有完善的插件体系，提供高度定制能力。支持通过生成器插件自定义业务线专属的工程方案，定制各种功能扩展和业务需求，帮助开发者更快速的搭建应用。
-
-## 为什么使用 Modern.js
-
-Modern.js 能为开发者提供极致的**开发体验（Development Experience）**，让应用拥有更好的**用户体验（User Experience）**。
-
-在开发 React 应用过程中，开发者通常需要去为某些功能去设计实现方案，或是使用其他的库、框架来解决这些问题。Modern.js 支持 React 应用所需要的所有配置和工具，并内置**额外的功能和优化**。开发者可以使用 React 构建应用的 UI，然后逐步采用 Modern.js 的功能来解决常见的应用需求，如路由、数据获取、状态管理等。
-
-它主要包含以下特点：
-
-- 🪜 **渐进式**：使用最精简的模板创建项目，通过生成器逐步开启插件功能，定制解决方案。
-- 🏠 **一体化**：开发与生产环境 Web Server 唯一，CSR 和 SSR 同构开发，函数即接口的 API 服务调用。
-- 📦 **开箱即用**：默认 TS 支持，内置构建、ESLint、调试工具，全功能可测试。
-- 🌏 **周边生态**：自研状态管理、微前端、模块打包、Monorepo 方案等周边需求。
-- 🕸 **多种路由模式**：包含自控路由、基于文件约定的路由（嵌套路由）等。
-- 🚀 **独立构建核心**：支持多种打包工具，深度优化构建产物。
-
-## 下一步
-
-<!-- 如果你是前端初学者，可能会觉得这些概念有些复杂。我们提供了一些 [JavaScript 和 React](/docs/tutorials/foundations/basic) 的学习资料，你可以先对它们做些了解。
-
-如果你是有经验的开发者，希望了解如何使用 Modern.js，你可以尝试[创建第一个应用](/docs/tutorials/first-app/c01-start)，或是阅读[指南](/docs/guides/get-started/quick-start)。 -->
-
-如果你希望了解如何使用 Modern.js，可以尝试[创建第一个应用](/docs/tutorials/first-app/c01-start)，或是阅读[指南](/docs/guides/get-started/quick-start)。