@modern-js/main-doc 2.69.4 → 3.0.0-alpha.0

package/docs/zh/configure/app/tools/webpack.mdx

@@ -1,305 +0,0 @@
----
-title: webpack
----
-
-# tools.webpack
-
-import { Badge } from '@theme';
-
-<Badge type="danger" >仅支持 Webpack</Badge>
-
-- **类型：** `Object | Function | undefined`
-- **默认值：** `undefined`
-
-`tools.webpack` 选项用于配置原生的 [webpack](https://webpack.js.org/)。
-
-> `tools.bundlerChain` 同样可以修改 webpack 配置，并且功能更加强大，建议优先使用 `tools.bundlerChain`。
-
-### Object 类型
-
-`tools.webpack` 可以配置为一个对象，这个对象将会和内置的 webpack 配置通过 [webpack-merge](https://github.com/survivejs/webpack-merge) 进行深层合并。
-
-比如添加 `resolve.alias` 配置：
-
-```js
-export default {
-  tools: {
-    webpack: {
-      resolve: {
-        alias: {
-          '@util': 'src/util',
-        },
-      },
-    },
-  },
-};
-```
-
-### Function 类型
-
-`tools.webpack` 也可以配置为一个函数，这个函数的第一个入参为内置的 webpack 配置对象，你可以对这个对象进行修改，然后返回一份新的配置。比如：
-
-```js
-export default {
-  tools: {
-    webpack: config => {
-      config.resolve.alias['@util'] = 'src/util';
-      return config;
-    },
-  },
-};
-```
-
-:::tip
-`tools.webpack` 函数返回的对象会直接作为最终使用的 webpack 配置，不会再与内置的 webpack 配置进行合并。
-:::
-
-### 工具集合
-
-这个函数的第二个参数是一个对象，包含了一些工具函数和属性，详情如下：
-
-#### env
-
-- **类型：** `'development' | 'production' | 'test'`
-
-通过 env 参数可以判断当前环境为 development、production 还是 test。比如：
-
-```js
-export default {
-  tools: {
-    webpack: (config, { env }) => {
-      if (env === 'development') {
-        config.devtool = 'cheap-module-eval-source-map';
-      }
-      return config;
-    },
-  },
-};
-```
-
-#### isProd
-
-- **类型：** `boolean`
-
-通过 isProd 参数可以判断当前环境是否为 production。比如：
-
-```js
-export default {
-  tools: {
-    webpack: (config, { isProd }) => {
-      if (isProd) {
-        config.devtool = 'source-map';
-      }
-      return config;
-    },
-  },
-};
-```
-
-#### target
-
-- **类型：** `'web' | 'node' | 'modern-web' | 'web-worker'`
-
-通过 target 参数可以判断当前构建的目标运行时环境。比如：
-
-```js
-export default {
-  tools: {
-    webpack: (config, { target }) => {
-      if (target === 'node') {
-        // ...
-      }
-      return config;
-    },
-  },
-};
-```
-
-#### isServer
-
-- **类型：** `boolean`
-
-判断当前构建的目标运行时环境是否为 `node`，等价于 `target === 'node'`。
-
-```js
-export default {
-  tools: {
-    webpack: (config, { isServer }) => {
-      if (isServer) {
-        // ...
-      }
-      return config;
-    },
-  },
-};
-```
-
-#### isWebWorker
-
-- **类型：** `boolean`
-
-判断当前构建的目标运行时环境是否为 `web-worker`，等价于 `target === 'web-worker'`。
-
-```js
-export default {
-  tools: {
-    webpack: (config, { isWebWorker }) => {
-      if (isWebWorker) {
-        // ...
-      }
-      return config;
-    },
-  },
-};
-```
-
-#### webpack
-
-- **类型：** `typeof import('webpack')`
-
-通过这个参数你可以拿到 webpack 实例。比如：
-
-```js
-export default {
-  tools: {
-    webpack: (config, { webpack }) => {
-      config.plugins.push(new webpack.ProgressPlugin());
-      return config;
-    },
-  },
-};
-```
-
-#### HtmlWebpackPlugin
-
-- **类型：** `typeof import('html-webpack-plugin')`
-
-通过这个参数你可以拿到 HtmlWebpackPlugin 实例。
-
-```js
-export default {
-  tools: {
-    webpack: (chain, { HtmlWebpackPlugin }) => {
-      console.log(HtmlWebpackPlugin);
-    },
-  },
-};
-```
-
-#### addRules
-
-- **类型：** `(rules: RuleSetRule | RuleSetRule[]) => void`
-
-添加额外的 [webpack rules](https://webpack.js.org/configuration/module/#modulerules)。
-
-示例：
-
-```ts
-export default {
-  tools: {
-    webpack: (config, { addRules }) => {
-      // 添加单条规则
-      addRules({
-        test: /\.foo/,
-        loader: require.resolve('foo-loader'),
-      });
-
-      // 以数组形式添加多条规则
-      addRules([
-        {
-          test: /\.foo/,
-          loader: require.resolve('foo-loader'),
-        },
-        {
-          test: /\.bar/,
-          loader: require.resolve('bar-loader'),
-        },
-      ]);
-    },
-  },
-};
-```
-
-#### prependPlugins
-
-- **类型：** `(plugins: WebpackPluginInstance | WebpackPluginInstance[]) => void`
-
-在内部 webpack 插件数组头部添加额外的插件，数组头部的插件会优先执行。
-
-```ts
-export default {
-  tools: {
-    webpack: (config, { prependPlugins, webpack }) => {
-      // 添加单个插件
-      prependPlugins(
-        new webpack.BannerPlugin({
-          banner: 'hello world!',
-        }),
-      );
-
-      // 以数组形式添加多个插件
-      prependPlugins([new PluginA(), new PluginB()]);
-    },
-  },
-};
-```
-
-#### appendPlugins
-
-- **类型：** `(plugins: WebpackPluginInstance | WebpackPluginInstance[]) => void`
-
-在内部 webpack 插件数组尾部添加额外的插件，数组尾部的插件会在最后执行。
-
-```ts
-export default {
-  tools: {
-    webpack: (config, { appendPlugins, webpack }) => {
-      // 添加单个插件
-      appendPlugins([
-        new webpack.BannerPlugin({
-          banner: 'hello world!',
-        }),
-      ]);
-
-      // 以数组形式添加多个插件
-      appendPlugins([new PluginA(), new PluginB()]);
-    },
-  },
-};
-```
-
-#### removePlugin
-
-- **类型：** `(name: string) => void`
-
-删除内部的 webpack 插件，参数为该插件的 `constructor.name`。
-
-例如，删除内部的 [fork-ts-checker-webpack-plugin](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin)：
-
-```ts
-export default {
-  tools: {
-    webpack: (config, { removePlugin }) => {
-      removePlugin('ForkTsCheckerWebpackPlugin');
-    },
-  },
-};
-```
-
-#### mergeConfig
-
-- **类型：** `(...configs: WebpackConfig[]) => WebpackConfig`
-
-用于合并多份 webpack 配置，等价于 [webpack-merge](https://github.com/survivejs/webpack-merge)。
-
-```ts
-export default {
-  tools: {
-    webpack: (config, { mergeConfig }) => {
-      return mergeConfig(config, {
-        devtool: 'eval',
-      });
-    },
-  },
-};
-```

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

@@ -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

@@ -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

@@ -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) 一节学习如何开发微前端主子应用。