@modern-js/main-doc 2.7.0 → 2.9.0

package/en/configure/app/source/disable-entry-dirs.mdx

@@ -1,39 +0,0 @@
----
-title: source.disableEntryDirs
-
-sidebar_label: disableEntryDirs
----
-# disableEntryDirs
-
-- **Type:** `string[]`
-- **Default:** `[]`
-
-By default, application entries are identified based on the'src 'directory, you can disable some directories from being identified as application entries with this option.
-
-For example, when the configuration and directory structure is as follows：
-
-```ts title="modern.config.ts"
-export default defineConfig({
-  source: {
-    disableEntryDirs: './src/one',
-  },
-});
-```
-
-```bash title="Project directory structure"
-└── src/
-    ├── one/
-    |    └── App.tsx
-    ├── two/
-    |    └── routes/
-    └── env.d.ts
-```
-
-When this option is not set, Modern.js will generate two entries based on the project directory:
-
-- one
-- two
-
-When this option is set, `src/one` will not be recognized as an entry directory.
-
-A common usage is to configure the `src/common`, `src/components` directories to this option to avoid these directories being recognized as application entries.

package/en/configure/app/source/entries.mdx

@@ -1,123 +0,0 @@
----
-title: source.entries
-sidebar_label: entries
----
-# entries
-
-- **Type:** `Object = { [ entryName: string ]: string | Object }`
-- **Default:** Default entry object dynamically settled according to the current project directory structure.
-
-For most scenarios, Modern.js automatically generated entries according to the directory structure can meet most business requirements. For details, please refer to [Entries](/guides/concept/entries).
-
-If you need to customize the build entry, you can specify it with this option.
-
-## String
-
-When the value is of type `string`, the file path of the entry:
-
-```ts title="modern.config.ts"
-import { defineConfig } from '@modern-js/app-tools';
-
-export default defineConfig({
-  source: {
-    entries: {
-      // Specify a new entry named entry_customize
-      entry_customize: './src/home/test/index.js',
-    },
-  },
-});
-```
-
-By default, the configured entry is equivalent to `App.[jt]sx`, that is, the specified entry file only needs to export the root component of the application.
-
-For example the following directory structure:
-
-```bash
-.
-├── src
-│   └── entry
-│       ├── chat.tsx
-│       └── home.tsx
-└── package.json
-```
-
-With the content of the above default entry mechanism, Modern.js when analyzing the above directory, will not get any default entry.
-
-In cases where you do not want to change the directory structure (such as project migration), you can customize the entry through `source.entries`:
-
-```ts title="modern.config.js"
-export default defineConfig({
-  source: {
-    entries: {
-      home: './src/entry/home.tsx',
-      chat: './src/entry/chat.tsx',
-    },
-  },
-});
-```
-
-## Object
-
-When the value is `Object`, the following properties can be configured:
-
-- `entry`：`string`，entry file path.
-- `disableMount`：`boolean = false`，turn off Modern.js generate entry code.
-
-```ts title="modern.config.ts"
-import { defineConfig } from '@modern-js/app-tools';
-
-export default defineConfig({
-  source: {
-    entries: {
-      entry_customize: {
-        // entry file path
-        entry: './src/home/test/App.jsx',
-      },
-      // Use Conventional Routing
-      entry_spa: {
-        // The entry path of a conventional route must be set to a directory
-        entry: './src/about',
-      },
-    },
-  },
-});
-```
-
-By default, the configured entry is equivalent to `App.[jt]sx`. If you want the entry to be equivalent to the entry in build mode, you can set the value to'Object' and the property `disableMount` to `true`.
-
-## Combine Entry
-
-When `source.entries` is specified, the Modern.js merges the user-defined entry with the default entry obtained by analyzing the directory structure. The merging rule is:
-
-Compare the entry path set by the custom entry with the default entry path. When the entry paths are the same, the custom entry will override the default entry.
-
-For example the following directory structure:
-
-```bash
-.
-├── src
-│   ├── chat
-│   │   └── App.jsx
-│   └── home
-│       └── index.js
-└── package.json
-```
-
-Modern.js analyze the `src/` directory to get the default entries `chat` and `home`. When the user configures the following in the `modern.config.js` file:
-
-```ts title="modern.config.ts"
-import { defineConfig } from '@modern-js/app-tools';
-
-export default defineConfig({
-  source: {
-    entries: {
-      index: './src/home/index.js',
-    },
-  },
-};
-```
-
-You can see that the path of the custom entry `index` is the same as the path of the default entry `home`. During the merging process, `index` will override `home`, and the final entry is as follows:
-
-- `chat -> ./src/chat/App.jsx`
-- `index -> ./src/home/index.js`

package/en/guides/advanced-features/bff/_category_.json

@@ -1,8 +0,0 @@
-{
-  "label": "BFF",
-  "position": 1,
-  "link": {
-    "type": "doc",
-    "id": "guides/advanced-features/bff/index"
-  }
-}

package/en/guides/advanced-features/code-split.mdx

@@ -1,80 +0,0 @@
----
-title: Code Split
-sidebar_position: 6
----
-# Code Split
-
-Code Split is a common way to optimizing front-end resource loading. This doc will introduce three methods supported by Modern.js:
-
-:::info
-When you use Modern.js [Conventional routing](/guides/basic-features/routes#conventional-routing), by default it will do code splitting based on routing components, wrapping `Suspense` components, no need to do code splitting by yourself.
-
-:::
-
-- `import`
-- `React.lazy`
-- `loadable`
-
-## import
-
-use dynamic `import()`，`import` The JS modules pass to this API will be packaged into a separate JS file as a new packaging entry, for example:
-
-```ts
-import('./math').then(math => {
-  console.log(math.add(16, 26));
-});
-```
-
-The JS modules corresponding to the './math' path will be packaged in a separate JS file.
-
-## React.lazy
-
-The officially way provides by React to split component code.
-
-:::caution
-SSR is not supported in React 17 and below, and it is recommended that SSR applications for React 17 use loadable.
-
-:::
-
-```ts
-import React, { Suspense } from 'react';
-
-const OtherComponent = React.lazy(() => import('./OtherComponent'));
-const AnotherComponent = React.lazy(() => import('./AnotherComponent'));
-
-function MyComponent() {
-  return (
-    <div>
-      <Suspense fallback={<div>Loading...</div>}>
-        <section>
-          <OtherComponent />
-          <AnotherComponent />
-        </section>
-      </Suspense>
-    </div>
-  );
-}
-```
-
-For detail, see [React lazy](https://reactjs.org/docs/code-splitting.html#reactlazy).
-
-## loadable
-
-use `loadable` API，for example：
-
-```ts
-import loadable from '@modern-js/runtime/loadable';
-
-const OtherComponent = loadable(() => import('./OtherComponent'));
-
-function MyComponent() {
-  return <OtherComponent />;
-}
-```
-
-For detail, see [loadable API](/apis/app/runtime/utility/loadable).
-
-:::info
-SSR is supported out of the box by `loadable`.
-
-:::

package/en/guides/advanced-features/compatibility.mdx

@@ -1,78 +0,0 @@
----
-title: Compatibility
-sidebar_position: 5
----
-# Compatibility
-
-## Browserslist
-
-Modern.js supports the `browserslist` field in the `package.json` file, or a `.browserslistrc` file to specify the target browser range covered by the project.
-
-This value is used by ['@babel/preset-env'] (https://babeljs.io/docs/en/babel-preset-env) and ['autoprefixer'] (https://github.com/postcss/autoprefixer) to determine the JavaScript syntax features to be converted and the CSS browser prefix to be added.
-
-The default value in Modern.js as follow:
-
-```js
-['> 0.01%', 'not dead', 'not op_mini all'];
-```
-
-You can learn how to customize the browserslist [here](https://github.com/browserslist/browserslist).
-
-See Modern.js Builder docs to learn more [Browserslist](https://modernjs.dev/builder/en/guide/advanced/browserslist.html) info.
-
-:::note
-Modern.js also supports configuring [output.override Browserslist](/configure/app/output/override-browserslist) to override the default browserslist value.
-
-:::
-
-## Polyfill
-
-### Polyfill At Compile
-
-Modern.js inject the Polyfill code via [core-js] (https://github.com/zloirock/core-js) at compile time by default.
-
-By default, the required Polyfill code will be introduced according to the settings of the Browserslist, so there is no need to worry about the Polyfill problem of the project source code and third-party dependencies, but because it contains some Polyfill code that is not used, the final bundle size may be increased.
-
-:::info
-For case where Polyfill is not required for third-party dependencies, you can set ['output.polyfill'](/configure/app/output/polyfill) to `usage`, so that Babel compiles only Polyfill code based on the syntax used in the code.
-
-:::
-
-### Polyfill At Runtime
-
-Modern.js also provides a runtime Polyfill solution based on browser [UA](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/User-Agent) information, which has the following advantages over Babel:
-
-- It will not be inserted into the code, reducing the code .
-- The same browser will share a Polyfill code. Therefore, with more and more projects, the UA-based Polyfill code will be delivered faster and faster.
-
-exec `pnpm run new` to enable this features：
-
-```bash
-? Action Enable features
-? Enable features Enable UA-based Polyfill Feature
-```
-
-After executing the command, register the Polyfill plugin in `modern.config.ts`:
-
-```ts title="modern.config.ts"
-import polyfillPlugin from '@modern-js/plugin-polyfill';
-
-export default defineConfig({
-  plugins: [..., polyfillPlugin()],
-});
-```
-
-After configuring `output.polyfill` as `ua` and executing `pnpm run build & & pnpm run serve` to start the server, visiting the page can see that the HTML product contains the following script:
-
-```js
-<script src="/__polyfill__" crossorigin></script>
-```
-
-Visit the page `http://localhost:8080/__polyfill__` on Chrome 51 to see:
-
-![ua-polyfill](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/ua-polyfill.png)
-
-:::caution
-This feature only works when using Modern.js built-in Web Server.
-
-:::

package/en/guides/advanced-features/eslint.mdx

@@ -1,150 +0,0 @@
----
-title: ESLint
-sidebar_position: 8
----
-# ESLint
-
-**Modern.js ESLint Rules** Is the full set of **ESLint** rules，includes `@modern-js` （Lint rules for Node.js projects）and `@modern-js-app`（Lint rules for web projects）。
-
-More ESLint usage is described below with specific questions.
-
-## Q: How To Deal With Lint
-
-### Automatic Fix
-
-Most problems will be solved by the automatic fix of ESLint rules or the code formatting of [Prettier](https://prettier.io/) (which has been integrated into ESLint), and the developer does not need to care about the details of the problem and how to solve it.
-
-:::info
-This kind of automatic fix is mainly performed when the IDE saves the file, and a few will be automatically fix on submit.
-
-:::
-
-### Batch Automatic Fix
-
-在少数情况下，比如旧项目迁移的时候，可以执行以下命令，批量修复和检查所有文件：
-
-```bash
-pnpm run lint:error
-```
-
-### Manual Fix
-
-对于无法自动修复的问题，可以在 IDE 里点击问题提示框里的规则链接，打开这条规则的文档，查看问题的解释和解决方案。
-
-### 声明例外情况
-
-目前阶段，有些规则并不能做到足够智能，多数情况下会有很大收益，在少数情况下也许不适用。但如果为了这些少数情况就把整个规则关掉或改掉，得不偿失。
-
-这种情况下可以用 [eslint-disable](https://eslint.org/docs/user-guide/configuring/rules#disabling-rules) 注释，对符合**少数情况**的代码块做标注，声明这里是一个例外，应该忽略。比如：
-
-```js
-/* eslint-disable filenames/match-exported */
-...
-/* eslint-enable filenames/match-exported */
-```
-
-:::info
-在 VS Code 编辑器里输入 eslint，会自动出现关于 "eslint-disable" 的提示框，选择提示选项生成对应注释对。
-
-:::
-
-【Modern.js ESLint 规则集】要求 [eslint-disable](https://eslint.org/docs/user-guide/configuring/rules#disabling-rules) 必须成对使用，必须明确表达要影响的范围，以及在这个范围内明确表达要禁用什么规则，目的是让**例外**有明确的、最小化的范围，避免 [eslint-disable](https://eslint.org/docs/user-guide/configuring/rules#disabling-rules) 被滥用，导致不属于例外的代码也被禁用了规则。
-
-## Q: 如何自定义 ESLint 规则
-
-### 仓库根目录下 `package.json` 里的 "eslintConfig" 字段
-
-这个地方是整个仓库的默认 ESLint 配置，是针对纯 Node.js 代码（只能在 Node.js 里运行）设计的。
-
-如果项目在某些规则上确实有特殊要求或不可避免的兼容问题（不是例外），可以在这里增加规则配置。该配置会优先于默认的【Modern.js ESLint 规则集】，比如：
-
-```json
- "eslintConfig": {
-    "extends": [
-      "@modern-js"
-    ],
-    "rules": {
-      "filenames/match-exported": "off"
-    }
-  },
-
-```
-
-### `src/.eslintrc.js` 文件
-
-Modern.js 的应用工程、模块工程，源代码目录里都会默认有这个配置文件，是针对 Universal JS 代码设计的。
-
-:::info
-Universal JS 代码是既能浏览器端也能在服务器端运行的代码。
-
-:::
-
-如果项目在某些规则上确实有特殊要求或不可避免的兼容问题（不是例外），可以在这里增加规则配置，该配置会优先于默认的【Modern.js ESLint 规则集】，比如：
-
-```js
-// eslint-disable-next-line import/no-commonjs
-module.exports = {
-  root: true,
-  extends: ['@modern-js-app'],
-  parserOptions: {
-    tsconfigRootDir: __dirname,
-    project: ['../tsconfig.json'],
-  },
-  rules: {
-    'filenames/match-exported': 'off',
-  },
-};
-```
-
-如果有需要，还可以继续在不同的子目录里增加 `.eslintrc.js` 文件，针对这个子目录里的代码做特殊配置：
-
-```js
-module.exports = {
-  rules: {
-    'filenames/match-exported': 'off',
-  },
-};
-```
-
-:::tip
-注意：没有必要使用 `extends` 字段，会自动继承父目录的配置。
-
-:::
-
-### package.json 里的 `eslintIgnore` 字段
-
-把包含 `.js`、`.jsx`、`.ts`、`.tsx` 文件、但不需要做代码检查和自动修复的目录，添加到 `eslintIgnore` 里，可以优化 ESLint 检查的速度，比如：
-
-```json
- "eslintIgnore": [
-    "node_modules",
-    "dist",
-    "output"
-  ],
-```
-
-## Q: 如何升级 ESLint 插件的版本
-
-只要不是 Major 版本的变化（不符合 [Semver](https://semver.org/) 规则的 `^` 符号），就可以直接在业务项目的 `package.json` 里指定这个依赖，删除 Lock 文件（或尝试手动删除 Lock 文件中这个包名的内容），执行 `pnpm install` 重新安装依赖并且生成新的 Lock 文件。
-
-做完这些操作之后，在业务项目的 `./node_modules` 目录里，这个插件应该只存在一份，并且升级到了你指定的版本。
-
-:::tip
-- Major 版本就是主版本号。更多信息，请阅读【[Semantic Versioning](https://semver.org/#summary)】。
-- 所有被 Modern.js 封装的上游项目（比如 ESLint、[ESLint 插件](https://eslint.org/docs/user-guide/configuring/plugins#plugins)、[React Router](https://reactrouter.com/) 等），也都可以这样升级。
-- Modern.js 也会在每次发版中尽量及时的升级这些上游依赖。
-- Major 版本的升级需要由 Modern.js 来发版。
-
-:::
-
-## Q: WebStorm 有时候会报 ESLint 错误
-
-由于 WebStorm 认为 ESLint 执行目录是根据 `.eslintrc` 文件来决定的。因此 `src/.eslintrc` 文件位置的放置会导致 `tsconfig.json` 文件指定的位置（项目根目录下）在 `src/` 目录下找不到。
-
-此时需要手动配置一下：
-
-```json
---parser-options=project:../tsconfig.json
-```
-
-![webstorm-lint-error](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/webstorm-lint-error.png)

package/en/guides/advanced-features/low-level.mdx

@@ -1,45 +0,0 @@
----
-title: Low-Level Tools
-sidebar_position: 11
----
-# Low-Level Tools
-
-## Usage
-
-Modern.js internally integrates tools such as [Babel](https://babeljs.io/), [TypeScript](https://www.typescriptlang.org/), [Webpack](https://webpack.js.org/), [PostCSS](https://postcss.org/), [Tailwind CSS] (https://tailwindcss.com/) by default.
-
-Usually, the default configuration can meet most development needs. When there are special needs, it can be achieved through the underlying configuration.
-
-Take configuring Webpack as an example, just add [tools.webpack](/configure/app/tools/webpack) to the modern.config.ts:
-
-```ts title="modern.config.ts"
-export default defineConfig({
-  tools: {
-    webpack: config => {},
-  },
-});
-```
-
-Configurations in the `tools` can be set to `Object` or `Function`.
-
-When the value is `Object`, it will be merged with the default configuration. For the specific merging strategy, refer to the configuration options document (see table below).
-
-When the value is `Function`, the first parameter is the default configuration value. You can directly modify this object without returning it, or you can return a new object or a merged object as the final result.
-
-## Low-level Configuration Details
-
-Currently provided is as follows:
-
-| Tools             | Config                                                                |
-| ----------------- | --------------------------------------------------------------------- |
-| DevServer         | [tools.devServer](/configure/app/tools/dev-server)               |
-| Babel             | [tools.babel](/configure/app/tools/babel)                        |
-| styled-components | [tools.styledComponents](/configure/app/tools/styled-components) |
-| PostCSS           | [tools.postcss](/configure/app/tools/postcss)                    |
-| Less              | [tools.less](/configure/app/tools/less)                          |
-| Sass              | [tools.sass](/configure/app/tools/sass)                          |
-| webpack           | [tools.webpack](/configure/app/tools/webpack)                    |
-| Minify CSS        | [tools.minifyCss](/configure/app/tools/minify-css)               |
-| terser            | [tools.terser](/configure/app/tools/terser)                      |
-| Tailwind CSS      | [tools.tailwind](/configure/app/tools/tailwindcss)               |
-| Autoprefixer      | [tools.autoprefixer](/configure/app/tools/autoprefixer)          |

package/en/guides/advanced-features/rspack-start.mdx

@@ -1,69 +0,0 @@
----
-title: Rspack Start
-sidebar_position: 12
----
-
-# Rspack Start
-
-[Rspack](https://www.rspack.org/) is a Rust-based web bundler developed by the ByteDance Web Infra team. The core architecture of Rspack is aligned with the implementation of webpack, and provides out-of-the-box support for commonly used build features.
-
-Rspack optimizes compilation performance by:
-
-- Highly LTO optimized Native code.
-- Take full advantage of multi-core, and the entire compilation process is fully optimized for multi-threading.
-- On-demand compilation based on request (Lazy Compilation), reducing the number of modules per compilation to improve the speed of cold start.
-
-## Initializing an rspack project
-
-The Modern.js generator provides an interactive question-and-answer interface to initialize a project. To create an rspack project, simply select the **rspack** build tool by running:
-
-```bash
-$ npx @modern-js/create myapp
-? Please select the solution you want to create: Web App Solution
-? Development Language: TS
-? Package Management Tool: pnpm
-? Build Tools: rspack
-```
-
-After the project is created, you can experience the project by running `pnpm run dev`. For more project information, please refer to [Quick Start](/guides/get-started/quick-start.html).
-
-:::tip
-When using rspack as the bundler, the following features are currently not supported:
-
-- Server-side rendering (SSR)
-- Static Site Generation (SSG)
-- Micro Frontend.
-- Storybook debugging.
-
-:::
-
-## Migrating from webpack to rspack
-
-You can enable rspack build by running `pnpm run new`:
-
-```bash
-$ pnpm run new
-? Action： Enable features
-? Enable features： Enable rspack Build
-```
-
-After executing the command, enable the rspack build in `modern.config.ts`:
-
-```ts title=modern.config.ts
-import appTools, { defineConfig } from '@modern-js/app-tools';
-
-export default defineConfig<'rspack'>({
-  runtime: {
-    router: true,
-  },
-  plugins: [
-    appTools({
-      bundler: 'experimental-rspack',
-    }),
-  ],
-});
-```
-
-:::tip
-Migrating from webpack to rspack may have some differences in build and configuration capabilities. For more details, please refer to [Configuration Differences](https://modernjs.dev/builder/en/guide/advanced/rspack-start.html#migrating-from-webpack-to-rspack)
-:::