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

package/docs/zh/configure/app/source/resolve-main-fields.mdx

@@ -1,46 +0,0 @@
----
-title: resolveMainFields
----
-
-# source.resolveMainFields
-
-- **类型：**
-
-```ts
-type Fields = (string | string[])[];
-
-type ResolveMainFields = Fields | Record<BuilderTarget, Fields>;
-```
-
-- **默认值：** `undefined`
-
-该配置项将决定你使用 `package.json` 哪个字段导入 `npm` 模块。对应 webpack 的 [resolve.mainFields](https://webpack.js.org/configuration/resolve/#resolvemainfields) 配置。
-
-### 示例
-
-```js
-export default {
-  source: {
-    resolveMainFields: ['main', 'browser', 'exports'],
-  },
-};
-```
-
-#### 根据产物类型设置
-
-当你同时构建多种类型的产物时，你可以为不同的产物类型设置不同的 mainFields。此时，你需要把 `resolveMainFields` 设置为一个对象，对象的 key 为对应的产物类型。
-
-比如为 `web` 和 `node` 设置不同的 mainFields：
-
-```js
-export default {
-  output: {
-    source: {
-      resolveMainFields: {
-        web: ['main', 'browser', 'exports'],
-        node: ['main', 'node', 'exports'],
-      },
-    },
-  },
-};
-```

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

@@ -1,44 +0,0 @@
----
-title: esbuild
----
-
-# tools.esbuild
-
-- **类型：** `Object`
-- **默认值：** `undefined`
-
-:::warning
-**当前文档中的 esbuild 功能已停止迭代**，我们更推荐使用 Rspack + SWC 的方案，因为 Rspack + SWC 具备更好的构建性能、功能丰富度和产物兼容性。
-
-请参考[「使用 Rspack」](/guides/advanced-features/rspack-start.html)了解更多。
-
-:::
-
-## 介绍
-
-import Esbuild from '@site-docs/components/esbuild.mdx';
-
-<Esbuild />
-
-## 配置项
-
-你可以通过 `tools.esbuild` 配置项来设置 esbuild 编译行为。
-
-```js title="modern.config.ts"
-import { defineConfig } from '@modern-js/app-tools';
-
-export default defineConfig({
-  tools: {
-    esbuild: {
-      loader: {
-        target: 'chrome61',
-      },
-      minimize: {
-        target: 'chrome61',
-      },
-    },
-  },
-});
-```
-
-完整配置项请参考 [esbuild 插件配置](/plugin/official/rsbuild-plugins/plugin-esbuild#配置)。

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

@@ -1,54 +0,0 @@
----
-title: pug
----
-
-# tools.pug
-
-- **类型：** `true | Object | Function | undefined`
-- **默认值：** `false`
-
-配置 [Pug](https://pugjs.org/) 模板引擎。
-
-### Boolean 类型
-
-Modern.js 默认不启用 Pug 模板引擎，你可以将 `tools.pug` 设置为 `true` 来启用它。
-
-```ts
-export default {
-  tools: {
-    pug: true,
-  },
-};
-```
-
-启用后，你可以在 `html.template` 中指定使用 `index.pug` 作为模板文件。
-
-### Object 类型
-
-当 `tools.terser` 的值为 `Object` 类型时，可以配置 Pug 模板引擎的选项：
-
-```ts
-export default {
-  tools: {
-    pug: {
-      doctype: 'xml',
-    },
-  },
-};
-```
-
-详细参数请查看 [Pug API Reference](https://pugjs.org/api/reference.html#options)。
-
-### Function 类型
-
-当 `tools.pug` 配置为 `Function` 类型时，默认配置作为第一个参数传入，可以直接修改配置对象，也可以返回一个值作为最终结果。
-
-```ts
-export default {
-  tools: {
-    pug(config) {
-      config.doctype = 'xml';
-    },
-  },
-};
-```

package/docs/zh/configure/app/tools/styled-components.mdx

@@ -1,54 +0,0 @@
----
-title: styledComponents
----
-
-# tools.styledComponents
-
-- **类型：** `Object | Function | false`
-- **默认值：**
-
-```js
-{
-  displayName: true,
-  // 在 SSR 构建中 isSSR 为 true
-  ssr: isSSR,
-  // 在生产环境构建时启用 `pure` 来优化包体积
-  pure: isProd,
-  transpileTemplateLiterals: true,
-}
-```
-
-对应 [babel-plugin-styled-components](https://github.com/styled-components/babel-plugin-styled-components) 或使用 SWC 时 [@swc/plugin-styled-components](https://github.com/swc-project/plugins/tree/main/packages/styled-components) 的配置。 值为 `Object` 类型时，利用 Object.assign 函数与默认配置合并。比如:
-
-```js
-export default {
-  tools: {
-    styledComponents: {
-      pure: false,
-    },
-  },
-};
-```
-
-值为 `Function` 类型时，第一个参数为默认配置，第二个参数提供了一些可以直接调用的工具函数：
-
-```js
-export default {
-  tools: {
-    styledComponents(config) {
-      // 修改 pure 配置
-      config.pure = false;
-    },
-  },
-};
-```
-
-该特性默认启用，你可以配置 `tools.styledComponents` 为 `false` 来关闭该行为，关闭后可以提升编译性能：
-
-```js
-export default {
-  tools: {
-    styledComponents: false,
-  },
-};
-```

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

@@ -1,98 +0,0 @@
----
-title: tailwindcss
----
-
-# tools.tailwindcss
-
-- **类型：** `Object | Function`
-- **默认值：**
-
-```js
-const tailwind = {
-  content: [
-    './src/**/*.{js,jsx,ts,tsx}',
-    './config/html/**/*.{html,ejs,hbs}',
-    './storybook/**/*',
-  ],
-};
-```
-
-用于修改 [Tailwind CSS](https://tailwindcss.com/docs/configuration) 的配置项。
-
-### 启用 Tailwind CSS
-
-在使用 `tools.tailwindcss` 之前，你需要启用 Modern.js 的 Tailwind CSS 插件。
-
-请阅读[「使用 Tailwind CSS」](/guides/basic-features/css/tailwindcss) 章节来了解开启方式。
-
-### Function 类型
-
-当 `tools.tailwindcss` 为 Function 类型时，默认配置会作为第一个参数传入，你可以直接修改配置对象，也可以返回一个值作为最终结果：
-
-```ts title="modern.config.ts"
-export default {
-  tools: {
-    tailwindcss(config) {
-      config.content.push('./some-folder/**/*.{js,ts}');
-    },
-  },
-};
-```
-
-### Object 类型
-
-当 `tools.tailwindcss` 的值为 `Object` 类型时，会与默认配置通过 `Object.assign` 浅合并。
-
-```ts title="modern.config.ts"
-export default {
-  tools: {
-    tailwindcss: {
-      plugins: [
-        require('@tailwindcss/forms'),
-        require('@tailwindcss/aspect-ratio'),
-        require('@tailwindcss/typography'),
-      ],
-    },
-  },
-};
-```
-
-### 注意事项
-
-注意：
-
-- 如果你同时使用了 `tailwind.config.{ts,js}` 文件和 `tools.tailwindcss` 选项，那么 `tools.tailwindcss` 定义的配置会优先生效，并覆盖 `tailwind.config.{ts,js}` 中定义的内容。
-- 如果你同时使用了 `source.designSystem` 配置项，那么 Tailwind CSS 的 `theme` 配置将会被 `source.designSystem` 的值所覆盖。
-
-其他配置的使用方式与 Tailwind CSS 官方用法一致，请参考 [tailwindcss - Configuration](https://tailwindcss.com/docs/configuration)。
-
-### 关于 source.designSystem
-
-`source.designSystem` 是 Modern.js 中废弃的配置项。
-
-从 Modern.js vMAJOR_VERSION.33.0 版本开始，你可以使用 Tailwind CSS 的 `theme` 配置项来代替 `source.designSystem`，不再需要将 `theme` 配置拆分并设置到 `designSystem` 上。
-
-- 旧版本用法：
-
-```ts title="modern.config.ts"
-const { theme, ...rest } = tailwindConfig;
-
-export default {
-  tools: {
-    tailwindcss: rest,
-  },
-  source: {
-    designSystem: theme,
-  },
-};
-```
-
-- 当前版本用法：
-
-```ts title="modern.config.ts"
-export default {
-  tools: {
-    tailwindcss: tailwindConfig,
-  },
-};
-```

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

@@ -1,58 +0,0 @@
----
-title: terser
----
-
-# tools.terser
-
-import { Badge } from '@theme';
-
-<Badge type="danger" >仅支持 Webpack</Badge>
-
-- **类型：** `Object | Function | undefined`
-- **默认值：**
-
-```js
-const defaultTerserOptions = {
-  terserOptions: {
-    mangle: {
-      safari10: true,
-    },
-  },
-};
-```
-
-在生产环境构建时，Modern.js 会通过 [terser-webpack-plugin](https://github.com/webpack-contrib/terser-webpack-plugin) 对 JavaScript 代码进行压缩优化。可以通过 `tools.terser` 修改 [terser-webpack-plugin](https://github.com/webpack-contrib/terser-webpack-plugin) 的配置。
-
-### Object 类型
-
-当 `tools.terser` 的值为 `Object` 类型时，会与默认配置通过 `Object.assign` 合并。
-
-例如通过 `exclude` 排除部分文件的压缩：
-
-```js
-export default {
-  tools: {
-    terser: {
-      exclude: /\/excludes/,
-    },
-  },
-};
-```
-
-### Function 类型
-
-当 `tools.terser` 配置为 `Function` 类型时，默认配置作为第一个参数传入，可以直接修改配置对象，也可以返回一个值作为最终结果。
-
-```js
-export default {
-  tools: {
-    terser: opts => {
-      opts.exclude = /\/excludes/;
-    },
-  },
-};
-```
-
-:::tip 禁用代码压缩
-如果你需要禁用代码压缩，可以使用 [output.minify](/configure/app/output/minify) 配置项。
-:::

package/docs/zh/configure/app/tools/ts-loader.mdx

@@ -1,76 +0,0 @@
----
-title: tsLoader
----
-
-# tools.tsLoader
-
-import { Badge } from '@theme';
-
-<Badge type="danger" >仅支持 Webpack</Badge>
-
-- **类型：** `Object | Function | undefined`
-- **默认值：** `undefined`
-
-:::warning 废弃提示
-
-不推荐在项目中使用 ts-loader，原因如下：
-
-- 启用 ts-loader 时将无法使用 [source.transformImport](/configure/app/source/transform-import) 和 [tools.styledComponents](/configure/app/tools/styled-components) 等由 Babel 和 SWC 提供支持的能力。
-- Rspack 不支持使用 ts-loader。
-
-:::
-
-项目中默认不开启 ts-loader，当 `tools.tsLoader` 不为 undefined 则表示开启 ts-loader，同时禁用 babel-loader 对 TypeScript 的编译。
-
-### Object 类型
-
-当此值为 Object 类型时，与默认配置通过 Object.assign 合并。
-
-默认配置如下:
-
-```json
-{
-  "compilerOptions": {
-    "target": "es5",
-    "module": "ESNext"
-  },
-  "transpileOnly": true,
-  "allowTsInNodeModules": true
-}
-```
-
-你可以通过 `tools.tsLoader` 配置项来覆盖默认配置:
-
-```ts
-export default {
-  tools: {
-    tsLoader: {
-      allowTsInNodeModules: false,
-    },
-  },
-};
-```
-
-### Function 类型
-
-当此值为 Function 类型时，默认配置作为第一参数传入，可以直接修改配置对象，也可以返回一个对象作为最终配置；第二个参数为修改 `ts-loader` 配置工具函数集合：
-
-```ts
-export default {
-  tools: {
-    tsLoader: opts => {
-      opts.allowTsInNodeModules = false;
-    },
-  },
-};
-```
-
-### 工具函数
-
-#### addIncludes
-
-已废弃，请使用 [source.include](https://modernjs.dev/configure/app/source/include.html) 代替，两者功能完全一致。
-
-#### addExcludes
-
-已废弃，请使用 [source.exclude](https://modernjs.dev/configure/app/source/exclude.html) 代替，两者功能完全一致。

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

@@ -1,253 +0,0 @@
----
-title: webpackChain
----
-
-# tools.webpackChain
-
-import { Badge } from '@theme';
-
-<Badge type="danger">仅支持 Webpack</Badge>
-
-- **类型：** `Function | undefined`
-- **默认值：** `undefined`
-
-你可以通过 `tools.webpackChain` 来修改默认的 webpack 配置，它的值为 `Function` 类型，接收两个参数：
-
-- 第一个参数为 `webpack-chain` 对象实例，你可以通过这个实例来修改默认的 webpack 配置。
-- 第二个参数为一个工具集合，包括`env`、`isProd`、`CHAIN_ID` 等。
-
-相比于 `tools.webpack`，**webpack-chain 不仅支持链式调用，而且能够基于别名来定位到内置的 Rule 或 Plugin，从而实现精准的配置修改**。我们推荐使用 `tools.webpackChain` 来代替 `tools.webpack`。
-
-> `tools.webpackChain` 的执行时机早于 tools.webpack，因此会被 `tools.webpack` 中的修改所覆盖。
-
-### 工具集合
-
-#### env
-
-- **类型：** `'development' | 'production' | 'test'`
-
-通过 env 参数可以判断当前环境为 development、production 还是 test。比如：
-
-```js
-export default {
-  tools: {
-    webpackChain: (chain, { env }) => {
-      if (env === 'development') {
-        chain.devtool('cheap-module-eval-source-map');
-      }
-    },
-  },
-};
-```
-
-#### isProd
-
-- **类型：** `boolean`
-
-通过 isProd 参数可以判断当前环境是否为 production。比如：
-
-```js
-export default {
-  tools: {
-    webpackChain: (chain, { isProd }) => {
-      if (isProd) {
-        chain.devtool('source-map');
-      }
-    },
-  },
-};
-```
-
-#### target
-
-- **类型：** `'web' | 'node' | 'modern-web' | 'web-worker'`
-
-通过 target 参数可以判断当前构建的目标运行时环境。比如：
-
-```js
-export default {
-  tools: {
-    webpackChain: (chain, { target }) => {
-      if (target === 'node') {
-        // ...
-      }
-    },
-  },
-};
-```
-
-#### isServer
-
-- **类型：** `boolean`
-
-判断当前构建的目标运行时环境是否为 `node`，等价于 `target === 'node'`。
-
-```js
-export default {
-  tools: {
-    webpackChain: (chain, { isServer }) => {
-      if (isServer) {
-        // ...
-      }
-    },
-  },
-};
-```
-
-#### isWebWorker
-
-- **类型：** `boolean`
-
-判断当前构建的目标运行时环境是否为 `web-worker`，等价于 `target === 'web-worker'`。
-
-```js
-export default {
-  tools: {
-    webpackChain: (chain, { isWebWorker }) => {
-      if (isWebWorker) {
-        // ...
-      }
-    },
-  },
-};
-```
-
-#### webpack
-
-- **类型：** `typeof import('webpack')`
-
-通过这个参数你可以拿到 webpack 实例。比如：
-
-```js
-export default {
-  tools: {
-    webpackChain: (chain, { webpack }) => {
-      chain.plugin('my-progress').use(webpack.ProgressPlugin);
-    },
-  },
-};
-```
-
-#### HtmlWebpackPlugin
-
-- **类型：** `typeof import('html-webpack-plugin')`
-
-通过这个参数你可以拿到 HtmlWebpackPlugin 实例。
-
-```js
-export default {
-  tools: {
-    webpackChain: (chain, { HtmlWebpackPlugin }) => {
-      console.log(HtmlWebpackPlugin);
-    },
-  },
-};
-```
-
-#### CHAIN_ID
-
-Modern.js 中预先定义了一些常用的 Chain ID，你可以通过这些 ID 来定位到内置的 Rule 或 Plugin。
-
-:::tip
-请留意，下列的一部分 Rule 或 Plugin 并不是默认存在的，当你开启特定配置项、或是注册某些插件后，它们才会被包含在 webpack 配置中。
-
-比如，`RULE.STYLUS` 仅在注册了 Stylus 插件后才会存在。
-:::
-
-#### CHAIN_ID.RULE
-
-| ID            | 描述                                                                                         |
-| ------------- | -------------------------------------------------------------------------------------------- |
-| `RULE.MJS`    | 处理 `mjs` 的规则                                                                            |
-| `RULE.JS`     | 处理 `js` 的规则                                                                             |
-| `RULE.TS`     | 处理 `ts` 的规则                                                                             |
-| `RULE.CSS`    | 处理 `css` 的规则                                                                            |
-| `RULE.LESS`   | 处理 `less` 的规则                                                                           |
-| `RULE.SASS`   | 处理 `sass` 的规则                                                                           |
-| `RULE.STYLUS` | 处理 `stylus` 的规则（依赖 [Stylus 插件](https://rsbuild.rs/zh/plugins/list/plugin-stylus)） |
-| `RULE.SVG`    | Rule for `svg`                                                                               |
-| `RULE.PUG`    | 处理 `pug` 的规则                                                                            |
-| `RULE.TOML`   | 处理 `toml` 的规则                                                                           |
-| `RULE.YAML`   | 处理 `yaml` 的规则                                                                           |
-| `RULE.WASM`   | 处理 `wasm` 的规则                                                                           |
-| `RULE.NODE`   | 处理 `node` 的规则                                                                           |
-| `RULE.FONT`   | 处理字体的规则                                                                               |
-| `RULE.IMAGE`  | 处理图片的规则                                                                               |
-| `RULE.MEDIA`  | 处理媒体资源的规则                                                                           |
-
-#### CHAIN_ID.ONE_OF
-
-通过 `ONE_OF.XXX` 可以匹配到规则数组中的某一类规则。
-
-| ID                  | 描述                                                |
-| ------------------- | --------------------------------------------------- |
-| `ONE_OF.SVG`        | 处理 SVG 的规则，在 data URI 和单独文件之间自动选择 |
-| `ONE_OF.SVG_URL`    | 处理 SVG 的规则，输出为单独文件                     |
-| `ONE_OF.SVG_INLINE` | 处理 SVG 的规则，作为 data URI 内联到 bundle 中     |
-| `ONE_OF.SVG_ASSETS` | 处理 SVG 的规则，在 data URI 和单独文件之间自动选择 |
-
-#### CHAIN_ID.USE
-
-通过 `USE.XXX` 可以匹配到对应的 loader。
-
-| ID                                | 描述                                  |
-| --------------------------------- | ------------------------------------- |
-| `USE.TS`                          | 对应 `ts-loader`                      |
-| `USE.CSS`                         | 对应 `css-loader`                     |
-| `USE.LESS`                        | 对应 `less-loader`                    |
-| `USE.SASS`                        | 对应 `sass-loader`                    |
-| `USE.STYLUS`                      | 对应 `stylus-loader`                  |
-| `USE.PUG`                         | 对应 `pug-loader`                     |
-| `USE.VUE`                         | 对应 `vue-loader`                     |
-| `USE.TOML`                        | 对应 `toml-loader`                    |
-| `USE.YAML`                        | 对应 `yaml-loader`                    |
-| `USE.NODE`                        | 对应 `node-loader`                    |
-| `USE.URL`                         | 对应 `url-loader`                     |
-| `USE.SVGR`                        | 对应 `@svgr/webpack`                  |
-| `USE.BABEL`                       | 对应 `babel-loader`                   |
-| `USE.STYLE`                       | 对应 `style-loader`                   |
-| `USE.POSTCSS`                     | 对应 `postcss-loader`                 |
-| `USE.CSS_MODULES_TS`              | 对应 `css-modules-typescript-loader`  |
-| `USE.MINI_CSS_EXTRACT`            | 对应 `mini-css-extract-plugin.loader` |
-| `USE.RESOLVE_URL_LOADER_FOR_SASS` | 对应 `resolve-url-loader`             |
-
-#### CHAIN_ID.PLUGIN
-
-通过 `PLUGIN.XXX` 可以匹配到对应的 plugin。
-
-| ID                             | 描述                                                                               |
-| ------------------------------ | ---------------------------------------------------------------------------------- |
-| `PLUGIN.HMR`                   | 对应 `HotModuleReplacementPlugin`                                                  |
-| `PLUGIN.COPY`                  | 对应 `CopyWebpackPlugin`                                                           |
-| `PLUGIN.HTML`                  | 对应 `HtmlWebpackPlugin`，使用时需要拼接 entry 名称：`${PLUGIN.HTML}-${entryName}` |
-| `PLUGIN.DEFINE`                | 对应 `DefinePlugin`                                                                |
-| `PLUGIN.IGNORE`                | 对应 `IgnorePlugin`                                                                |
-| `PLUGIN.BANNER`                | 对应 `BannerPlugin`                                                                |
-| `PLUGIN.PROGRESS`              | 对应 `Webpackbar`                                                                  |
-| `PLUGIN.APP_ICON`              | 对应 `AppIconPlugin`                                                               |
-| `PLUGIN.MANIFEST`              | 对应 `WebpackManifestPlugin`                                                       |
-| `PLUGIN.TS_CHECKER`            | 对应 `ForkTsCheckerWebpackPlugin`                                                  |
-| `PLUGIN.INLINE_HTML`           | 对应 `InlineChunkHtmlPlugin`                                                       |
-| `PLUGIN.BUNDLE_ANALYZER`       | 对应 `WebpackBundleAnalyzer`                                                       |
-| `PLUGIN.MINI_CSS_EXTRACT`      | 对应 `MiniCssExtractPlugin`                                                        |
-| `PLUGIN.VUE_LOADER_PLUGIN`     | 对应 `VueLoaderPlugin`                                                             |
-| `PLUGIN.REACT_FAST_REFRESH`    | 对应 `ReactFastRefreshPlugin`                                                      |
-| `PLUGIN.NODE_POLYFILL_PROVIDE` | 对应处理 node polyfill 的 `ProvidePlugin`                                          |
-| `PLUGIN.SUBRESOURCE_INTEGRITY` | 对应 `webpack-subresource-integrity`                                               |
-| `PLUGIN.ASSETS_RETRY`          | 对应 webpack 静态资源重试插件 `WebpackAssetsRetryPlugin`                           |
-| `PLUGIN.AUTO_SET_ROOT_SIZE`    | 对应自动设置根字体大小插件 `AutoSetRootSizePlugin`                                 |
-
-#### CHAIN_ID.MINIMIZER
-
-通过 `MINIMIZER.XXX` 可以匹配到对应的压缩工具。
-
-| ID                  | 描述                             |
-| ------------------- | -------------------------------- |
-| `MINIMIZER.JS`      | 对应 `TerserWebpackPlugin`       |
-| `MINIMIZER.CSS`     | 对应 `CssMinimizerWebpackPlugin` |
-| `MINIMIZER.ESBUILD` | 对应 `ESBuildPlugin`             |
-| `MINIMIZER.SWC`     | 对应 `SwcWebpackPlugin`          |
-
-### 使用示例
-
-使用示例可参考：[Rsbuild - bundlerChain 使用示例](https://rsbuild.rs/zh/guide/basic/configure-rspack#%E7%A4%BA%E4%BE%8B)。