npm - @modern-js/main-doc - Versions diffs - 2.69.7 → 3.0.0-alpha.1 - Mend

@modern-js/main-doc 2.69.7 → 3.0.0-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (618) hide show

package/docs/zh/guides/advanced-features/rspack-start.mdx DELETED Viewed

@@ -1,154 +0,0 @@
----
-sidebar_position: 1
----
-# 使用 Rspack
-import Rspack from '@site-docs/components/rspackTip.mdx';
-<Rspack />
-**Modern.js 提供开箱即用的 Rspack 支持**，你可以在成熟的 webpack 和更快的 Rspack 之间进行切换。
-这篇文档会向你介绍如何在 Modern.js 中开启 Rspack 构建模式。
-## 初始化 Rspack 项目
-Modern.js 新项目已默认启用 Rspack 构建，只需执行 [初始化项目](/guides/get-started/quick-start.html#初始化项目)，即可创建一个 Rspack 项目:
-import InitRspackApp from '@site-docs/components/init-rspack-app';
-<InitRspackApp />
-项目创建完成后，在项目中执行 `pnpm run dev` 即可体验项目，更多信息可参考[快速上手](/guides/get-started/quick-start.html)。
-## 开启 Rspack 构建
-从 Modern.js MAJOR_VERSION.59.0 版本起，在一个已有的 Modern.js 项目中，你仅需在 `modern.config.ts` 中添加以下配置，即可启用 Rspack 构建：
-```diff title=modern.config.ts
-import { appTools, defineConfig } from '@modern-js/app-tools';
-export default defineConfig({
-  plugins: [
-    appTools({
-+     bundler: 'rspack',
-    }),
-  ],
-});
-```
-:::tip
-如果你当前版本低于 MAJOR_VERSION.59.0，可通过执行 `npx modern upgrade` 进行升级。
-:::
-import RspackPrecautions from '@site-docs/components/rspackPrecautions.mdx';
-<RspackPrecautions />
-## 配置迁移
-Modern.js 中 [tools.webpack](/configure/app/tools/webpack) 和 [tools.webpackChain](/configure/app/tools/webpack-chain) 配置仅在 webpack 模式下生效，开启 Rspack 构建能力后，可根据实际使用场景决定是否修改为 [tools.rspack](/configure/app/tools/rspack) 或 [tools.bundlerChain](/configure/app/tools/bundler-chain)。
-```diff
-export default {
-  tools: {
--   webpack: (config, { env }) => {
-+   rspack: (config, { env }) => {
-      if (env === 'development') {
-        config.devtool = 'cheap-module-eval-source-map';
-      }
-      return config;
-    },
--   webpackChain: (chain, { env }) => {
-+   bundlerChain: (chain, { env }) => {
-      if (env === 'development') {
-        chain.devtool('cheap-module-eval-source-map');
-      }
-    },
-  },
-};
-```
-## 修改转译配置
-Modern.js 在 Rspack 模式下使用 Rspack [builtin:swc-loader](https://rspack.rs/zh/guide/features/builtin-swc-loader) 进行代码转译。
-Modern.js 已对 `builtin:swc-loader` 的常见配置提供了更方便的配置方式，如：通过 [source.transformImport](/configure/app/source/transform-import) 配置组件库按需引入。如果对 `builtin:swc-loader` 有自定义配置的需求，可通过 [tools.swc](/configure/app/tools/swc) 进行配置：
-```ts
-import { defineConfig } from '@modern-js/app-tools';
-export default defineConfig<'rspack'>({
-  tools: {
-    swc: {
-      jsc: {
-        externalHelpers: false,
-      },
-    },
-  },
-});
-```
-:::tip
-在启用 Rspack 构建时，babel-loader 默认不会被启用。如需添加 babel 插件，可通过 [tools.babel](/configure/app/tools/babel) 配置，此时会产生额外的编译开销，在一定程度上拖慢 Rspack 构建速度。
-:::
-## Rspack 和 Modern.js 的版本关系
-通常情况下，Modern.js 内会集成 Rspack 的最新版本，通过 `npx modern upgrade` 即可将当前项目中的 Modern.js 相关依赖以及内置的 Rspack 更新至最新版本。
-但 Modern.js 对于 Rspack 的依赖方式为锁版本方式（非自动升级），由于发版周期不同步等原因，可能会出现 Modern.js 内集成的 Rspack 版本落后于 Rspack 最新版本的情况。
-当你执行 dev / build 命令时，Modern.js 会在[开启调试模式时](https://rsbuild.rs/zh/guide/debug/debug-mode)自动打印当前使用的 Rspack 版本：
-![rspack_version_log](https://lf3-static.bytednsdoc.com/obj/eden-cn/6221eh7uhbfvhn/modern/20240110-155444.png)
-### 修改内置 Rspack 版本
-可以使用 pnpm / yarn / npm 等包管理工具自带的依赖升级功能来将 Rspack 强制升级到指定版本。
-以 pnpm 为例，可通过 `overrides` 修改内置的 Rspack 版本。假设需要指定 Rspack 的版本为 0.7.5:
-```json title=package.json
-{
-  "pnpm": {
-    "overrides": {
-      "@rspack/binding": "0.7.5",
-      "@rspack/core": "0.7.5",
-      "@rspack/plugin-react-refresh": "0.7.5"
-    }
-  }
-}
-```
-如果需要使用 Rspack 的 nightly/canary 版本，Rspack 的 nightly/canary 版本的包名会在增加 `-canary` 后缀之后发布，需要修改为:
-```json title=package.json
-{
-  "pnpm": {
-    "overrides": {
-      "@rspack/binding": "npm:@rspack/binding-canary@nightly",
-      "@rspack/core": "npm:@rspack/core-canary@nightly",
-      "@rspack/plugin-react-refresh": "npm:@rspack/plugin-react-refresh@nightly"
-    },
-    "peerDependencyRules": {
-      "allowAny": ["@rspack/*"]
-    }
-  }
-}
-```
-Rspack 提供了 [install-rspack](https://github.com/rspack-contrib/install-rspack) 工具来快速修改 Rspack 版本:
-```sh
-npx install-rspack --version nightly # nightly npm tag
-npx install-rspack --version 0.7.5-canary-d614005-20240625082730 # A specific canary version
-```
-:::tip Nightly 版本介绍
-每天，Rspack 会自动构建基于最新代码的 nightly 版本，用于测试和及早发现错误。
-通常情况下，这些版本是可用的。如果发现问题，我们会及时进行修复。但如果 Rspack 有一些 breaking change、需要 Modern.js 同步修改代码，那么我们建议等待下一个 Modern.js 版本再进行更新。
-:::
-如果想了解其他包管理工具锁定依赖版本的示例，可以参考：[锁定子依赖](/guides/get-started/upgrade.html#%E9%94%81%E5%AE%9A%E5%AD%90%E4%BE%9D%E8%B5%96)。

package/docs/zh/guides/deprecated.md DELETED Viewed

@@ -1,19 +0,0 @@
----
-sidebar_position: 10
----
-# 已下线功能
-本文将介绍 Modern.js 之前支持，但是现在已下线的功能及推荐替代方案。
-## 使用 @modern-js/create 创建 Monorepo
-Modern.js 之前提供的 Monorepo 方案是基于 [pnpm Workspace](https://pnpm.io/workspaces) 实现的，并未提供实质性的 Monorepo 管理能力。在 [v2.53.0](https://github.com/web-infra-dev/modern.js/releases/tag/v2.53.0) 版本中，移除了使用 `@modern-js/create` 创建 Monorepo 项目的功能。推荐直接使用社区提供的 Monorepo 方案。
-## new 命令开启 test 能力
-Modern.js 之前提供的测试能力是基于 Jest 的简单封装。该封装导致 Jest 配置不直观、用户配置更加复杂等问题。在 [v2.53.0](https://github.com/web-infra-dev/modern.js/releases/tag/v2.53.0) 版本中，移除了在应用项目和模块项目中开启 test 功能的选项。推荐直接使用社区提供的测试方案。
-## Eslint 规则集
-Modern.js 之前提供了 ESLint 的完整规则集，涵盖了 @modern-js（针对 Node.js 项目的 Lint 规则）和 @modern-js-app（针对前端项目的 Lint 规则）。在 [v2.60.0](https://github.com/web-infra-dev/modern.js/releases/tag/v2.60.0) 版本中，我们正式移除了这些规则集。我们鼓励开发者根据自身需求选择合适的代码规范工具，直接使用 ESLint 并结合社区推荐的规则，或使用 Biome 以提升代码格式化的性能。

package/docs/zh/guides/topic-detail/micro-frontend/c01-introduction.mdx DELETED Viewed

@@ -1,26 +0,0 @@
----
-sidebar_position: 1
----
-# 微前端介绍
-import MicroFrontend from '@site-docs/components/micro-frontend.mdx';
-<MicroFrontend />
-## 微前端关键词
-在微前端研发模式中，应用会被分成 **主应用**、和 **子应用**。
-- 主应用：微前端项目的基座工程，所有子应用都会由它来加载。
-- 子应用：独立开发、独立部署的应用，最终会被主应用加载。
-## 功能简介
-- 基于 [Garfish](https://www.garfishjs.org/guide)
-- 生成器支持微前端应用
-- 支持 React 组件式引用微前端子应用
-- 支持 loading
-- 支持主应用线上、子应用线下调试模式
-可以在 [体验微前端](/guides/topic-detail/micro-frontend/c02-development) 一节学习如何开发微前端主子应用。

package/docs/zh/guides/topic-detail/micro-frontend/c02-development.mdx DELETED Viewed

@@ -1,332 +0,0 @@
----
-sidebar_position: 2
-title: 体验微前端
----
-# 体验微前端
-通过本章你可以了解到：
-- 如何创建微前端项目的主应用、子应用。
-- 微前端项目开发的基本流程。
-## 创建应用
-目前项目的路由模式分为以下三种
-- [约定式路由](/guides/concept/entries.html#约定式路由)
-- [自控式路由](/guides/concept/entries.html#自控式路由)
-- 其他 (项目自行安装和使用 `react-router-dom`)
-在本教程中我们会为主应用创建两个子应用 Table 和 Dashboard (Table 为约定式路由，Dashboard 为自控式路由)
-### 创建约定式路由主应用
-通过命令行工具初始化项目：
-```bash
-mkdir masterApp && cd masterApp
-npx @modern-js/create@latest
-```
-import DefaultMWAGenerate from '@site-docs/components/default-mwa-generate';
-<DefaultMWAGenerate />
-完成项目创建后我们可以通过 `pnpm run new` 来开启 `微前端` 功能：
-```bash
-? 请选择你想要的操作 启用可选功能
-? 请选择功能名称 启用「微前端」模式
-```
-接下来，让我们注册微前端插件并添加开启微前端主应用，并增加子应用列表：
-import EnableMicroFrontend from '@site-docs/components/enable-micro-frontend';
-<EnableMicroFrontend />
-然后我们在 routes 文件夹下新建两个目录
-- table (用于加载约定式路由子应用)
-- dashboard (用于加载自控式路由子应用)
-在这两个目录下我们需要新建一个 `$.tsx` 文件作为主应用约定式路由的入口($ 代表模糊匹配，即 `/table` 和 `/table/test` 都会匹配到这个 `$.tsx` 作为该路由的入口文件，这会保证在微前端场景下正确加载子应用路由)
-#### 加载约定式路由子应用
-```js title="src/routes/table/$.tsx"
-import { useModuleApps } from '@modern-js/plugin-garfish/runtime';
-const Index = () => {
-  const { Table } = useModuleApps();
-  return (
-    <div>
-      <Table />
-    </div>
-  );
-};
-export default Index;
-```
-#### 加载自控式路由子应用
-```js title="src/routes/dashboard/$.tsx"
-import { useModuleApps } from '@modern-js/plugin-garfish/runtime';
-const Index = () => {
-  const { Dashboard } = useModuleApps();
-  return (
-    <div>
-      <Dashboard />
-    </div>
-  );
-};
-export default Index;
-```
-#### 路由跳转
-此时主应用配置已经完成，通过路由即可加载子应用，修改主应用的 `layout.tsx` 来跳转路由
-```js title="src/route/layout.tsx"
-import { Outlet, Link } from '@modern-js/runtime/router';
-const Layout = () => (
-  <div>
-    <div>
-      <Link to={'/table'}>加载约定式路由子应用</Link>
-    </div>
-    <div>
-      <Link to={'/dashboard'}>加载自控式路由子应用</Link>
-    </div>
-    <div>
-      <Link to={'/'}>卸载子应用</Link>
-    </div>
-    <Outlet />
-  </div>
-);
-export default Layout;
-```
-### 创建自控式路由主应用
-通过命令行工具初始化项目：
-```bash
-mkdir masterApp && cd masterApp
-npx @modern-js/create@latest
-```
-<DefaultMWAGenerate />
-完成项目创建后我们可以通过 `pnpm run new` 来开启 `微前端` 功能：
-```bash
-? 请选择你想要的操作 启用可选功能
-? 请选择功能名称 启用「微前端」模式
-```
-接下来，让我们注册微前端插件并添加开启微前端主应用，并增加子应用列表：
-<EnableMicroFrontend />
-由于是自控式路由，我们删除掉 `routes` 文件夹并在 `src` 目录下增加 `App.tsx` 文件，此处如果使用的 `非 MApp` 组件，需要通过 `React Router v6` 的 `createBrowserRouter` API 来创建路由
-#### 加载子应用
-import CustomRouterMicroFrontend from '@site-docs/components/custom-router-micro-frontend';
-<CustomRouterMicroFrontend />
-### 创建其他主应用
-项目内自己安装和使用 `react-router-dom` , 与自控式路由唯一的区别是, 设置 `router: false` 后 plugin-garfish 无法获得 `useLocation` `useHref` 等 hook 来辅助计算 basename 和主子应用路由同步
-import { Tab, Tabs } from 'rspress/theme';
-<Tabs>
-<Tab label="react-router-dom@6">
-```tsx
-import { useLocation, useHref } from 'react-router-dom';
-const App = () => {
-  const basename = useHref('/table');
-  const { Table } = useModuleApps();
-  return <Table useLocation={useLocation} basename={basename} />;
-};
-```
-</Tab>
-<Tab label="react-router-dom@5">
-```tsx
-import { useLocation, useHistory } from 'react-router-dom';
-const App = () => {
-  const history = useHistory();
-  const basename = history.createHref({ pathname: '/table' });
-  const { Table } = useModuleApps();
-  return <Table useLocation={useLocation} basename={basename} />;
-};
-```
-</Tab>
-</Tabs>
-### 创建约定式路由子应用
-通过命令行工具初始化项目：
-```bash
-mkdir table && cd table
-npx @modern-js/create@latest
-```
-按照如下选择，生成项目：
-<DefaultMWAGenerate />
-我们执行 `pnpm run new` 来开启 `微前端` 功能：
-```bash
-? 请选择你想要的操作 启用可选功能
-? 请选择功能名称 启用「微前端」模式
-```
-接下来，让我们注册微前端插件并修改 `modern.config.ts`，添加微前端子应用的配置 `deploy.microFrontend`：
-```js title="modern.config.ts"
-import { appTools, defineConfig } from '@modern-js/app-tools';
-import { garfishPlugin } from '@modern-js/plugin-garfish';
-export default defineConfig({
-  dev: {
-    port: 8081,
-  },
-  runtime: {
-    router: true,
-  },
-  deploy: {
-    microFrontend: true,
-  },
-  plugins: [appTools(), garfishPlugin()],
-});
-```
-添加 `src/routes/page.tsx` 代码
-```js title="src/routes/page.tsx"
-const Index = () => {
-  return (
-    <div className="container-box">subApp: 约定式路由的子应用的根路由</div>
-  );
-};
-export default Index;
-```
-### 创建自控式路由子应用
-通过命令行工具初始化项目：
-```bash
-mkdir dashboard && cd dashboard
-npx @modern-js/create@latest
-```
-按照如下选择，生成项目：
-<DefaultMWAGenerate />
-我们执行 `pnpm run new` 来开启 `微前端`：
-```bash
-? 请选择你想要的操作 启用可选功能
-? 请选择功能名称 启用「微前端」模式
-```
-接下来，让我们注册微前端插件并修改 `modern.config.ts`，添加微前端子应用的配置 `deploy.microFrontend`：
-```js title="modern.config.ts"
-import { appTools, defineConfig } from '@modern-js/app-tools';
-import { garfishPlugin } from '@modern-js/plugin-garfish';
-export default defineConfig({
-  dev: {
-    port: 8082,
-  },
-  runtime: {
-    router: true,
-  },
-  deploy: {
-    microFrontend: true,
-  },
-  plugins: [appTools(), garfishPlugin()],
-});
-```
-自控式路由需要删除掉 `routes` 文件夹并在 `src` 目录下新建 `App.tsx`
-并在 `src/App.tsx` 添加代码，注意需要从 `props` 中解析并传递 `basename` 给 `BrowserRouter`
-```js title="src/App.tsx"
-import { BrowserRouter, Route, Routes } from '@modern-js/runtime/router';
-export default (props: { basename: string }) => {
-  const { basename } = props;
-  return (
-    <BrowserRouter basename={basename}>
-      <Routes>
-        <Route index element={<div>自控式路由子应用根路由</div>} />
-        <Route path={'path'} element={<div>自控式路由子应用子路由</div>} />
-      </Routes>
-    </BrowserRouter>
-  );
-};
-```
-## 调试
-按顺序在目录执行 `pnpm run dev` 命令启动应用：
-- masterApp 主应用 `http://localhost:8080`
-- table 子应用(约定式路由) `http://localhost:8081`
-- dashboard 子应用(自控式路由) `http://localhost:8082`
-访问主应用地址 `http://localhost:8080`
-在完成了微前端整体开发流程的体验后，你可以进一步了解如何 [开发主应用](/guides/topic-detail/micro-frontend/c03-main-app)
-## Modern.js 微前端和直接使用 Garfish 的区别
-使用纯 `Garfish` API 开发微前端应用时
-- 主应用：
-  - 安装 Garfish 依赖并使用 `Garfish.run` 注册子应用 [参考](https://www.garfishjs.org/api/run.html)
-  - 提供一个常驻的 `DOM` 节点供子应用挂载 [参考](https://www.garfishjs.org/api/registerApp.html)
-- 子应用：
-  - 导出 `provider` [参考](https://www.garfishjs.org/guide/quick-start/start.html#2%E5%AF%BC%E5%87%BA-provider-%E5%87%BD%E6%95%B0)
-  - 设置应用的 `basename` [参考](https://www.garfishjs.org/guide/quick-start/start.html#3-%E8%AE%BE%E7%BD%AE%E5%BA%94%E7%94%A8%E8%B7%AF%E7%94%B1-basename)
-区别于直接使用 `Garfish` 运行时 API 开发微前端项目，`Modern.js` 的微前端方案更加开箱即用。
-使用 `pnpm new` 启用微前端模式后会自动在 `Modern.js` 应用中集成 `Garfish` 插件，在 `Garfish`
-插件的加持下，你只需要
-- 主应用：
-  - 配置 `runtime.masterApp.apps` 参数注册子应用
-  - 使用 `useModuleApps` API 获取子应用实例并在组件中完成渲染
-- 子应用：
-  - 配置 `deploy.microFrontend`
-所以插件中为你做了如下事情
-- 帮助你通过 `Garfish` 运行时 API 自动注册子应用（主应用）
-- `useModulesApps` 函数的返回值提供了一个常驻的 `DOM` 节点供子应用挂载（主应用）
-- 帮助你正确导出了 `provider`（子应用）
-- 帮助你正确设置了 `basename` 给 `Modern.js` 运行时提供 `Router` 实例，如果是`自控式路由`或`手动引入的 react-router-dom` 那么需要从 `App.tsx` 的 `props` 中获取 `basename` 手动传递给引入的 `Router 实例`（子应用）
-## 常见问题
-自查手册: https://www.garfishjs.org/issues/