@modern-js/main-doc 2.8.0 → 2.10.0

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

@@ -0,0 +1,39 @@
+---
+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/docs/en/configure/app/source/entries.mdx

@@ -0,0 +1,123 @@
+---
+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/docs/en/configure/app/source/exclude.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: exclude
+---
+
+# source.exclude
+
+:::tip
+This config is provided by Modern.js Builder, more detail can see [source.exclude](https://modernjs.dev/builder/en/api/config-source.html#sourceexclude).
+:::
+
+import Main from '@modern-js/builder-doc/docs/en/config/source/exclude.md';
+
+<Main />

package/docs/en/configure/app/source/global-vars.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: globalVars
+---
+
+# source.globalVars
+
+:::tip
+This config is provided by Modern.js Builder, more detail can see [source.globalVars](https://modernjs.dev/builder/en/api/config-source.html#sourceglobalvars).
+:::
+
+import Main from '@modern-js/builder-doc/docs/en/config/source/globalVars.md';
+
+<Main />

package/docs/en/configure/app/source/include.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: include
+---
+
+# source.include
+
+:::tip
+This config is provided by Modern.js Builder, more detail can see [source.include](https://modernjs.dev/builder/en/api/config-source.html#sourceinclude).
+:::
+
+import Main from '@modern-js/builder-doc/docs/en/config/source/include.md';
+
+<Main />

package/docs/en/configure/app/source/module-scopes.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: moduleScopes
+---
+
+# source.moduleScopes
+
+:::tip
+This config is provided by Modern.js Builder, more detail can see [source.moduleScopes](https://modernjs.dev/builder/en/api/config-source.html#sourcemodulescopes).
+:::
+
+import Main from '@modern-js/builder-doc/docs/en/config/source/moduleScopes.md';
+
+<Main />

package/docs/en/configure/app/source/pre-entry.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: preEntry
+---
+
+# source.preEntry
+
+:::tip
+This config is provided by Modern.js Builder, more detail can see [source.preEntry](https://modernjs.dev/builder/en/api/config-source.html#sourcepreentry).
+:::
+
+import Main from '@modern-js/builder-doc/docs/en/config/source/preEntry.md';
+
+<Main />

package/docs/en/configure/app/source/resolve-extension-prefix.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: resolveExtensionPrefix
+---
+
+# source.resolveExtensionPrefix
+
+:::tip
+This config is provided by Modern.js Builder, more detail can see [source.resolveExtensionPrefix](https://modernjs.dev/builder/en/api/config-source.html#sourceresolveextensionprefix).
+:::
+
+import Main from '@modern-js/builder-doc/docs/en/config/source/resolveExtensionPrefix.md';
+
+<Main />

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

@@ -0,0 +1,13 @@
+---
+sidebar_label: resolveMainFields
+---
+
+# source.resolveMainFields
+
+:::tip
+This config is provided by Modern.js Builder, more detail can see [source.resolveMainFields](https://modernjs.dev/builder/en/api/config-source.html#sourceresolvemainfields).
+:::
+
+import Main from '@modern-js/builder-doc/docs/en/config/source/resolveMainFields.md';
+
+<Main />

package/docs/en/configure/app/tools/autoprefixer.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: autoprefixer
+---
+
+# tools.autoprefixer
+
+:::tip
+This config is provided by Modern.js Builder, more detail can see [tools.autoprefixer](https://modernjs.dev/builder/en/api/config-tools.html#toolsautoprefixer).
+:::
+
+import Main from '@modern-js/builder-doc/docs/en/config/tools/autoprefixer.md';
+
+<Main />

package/docs/en/configure/app/tools/babel.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: babel
+---
+
+# tools.babel
+
+:::tip
+This config is provided by Modern.js Builder, more detail can see [tools.babel](https://modernjs.dev/builder/en/api/config-tools.html#toolsbabel).
+:::
+
+import Main from '@modern-js/builder-doc/docs/en/config/tools/babel.md';
+
+<Main />

package/docs/en/configure/app/tools/css-extract.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: cssExtract
+---
+
+# tools.cssExtract
+
+:::tip
+This config is provided by Modern.js Builder, more detail can see [tools.cssExtract](https://modernjs.dev/builder/en/api/config-tools.html#toolscssextract).
+:::
+
+import Main from '@modern-js/builder-doc/docs/en/config/tools/cssExtract.md';
+
+<Main />

package/docs/en/configure/app/tools/css-loader.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: cssLoader
+---
+
+# tools.cssLoader
+
+:::tip
+This config is provided by Modern.js Builder, more detail can see [tools.cssLoader](https://modernjs.dev/builder/en/api/config-tools.html#toolscssloader).
+:::
+
+import Main from '@modern-js/builder-doc/docs/en/config/tools/cssLoader.md';
+
+<Main />

package/docs/en/configure/app/tools/dev-server.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: devServer
+---
+
+# tools.devServer
+
+:::tip
+This config is provided by Modern.js Builder, more detail can see [tools.devServer](https://modernjs.dev/builder/en/api/config-tools.html#toolsdevserver).
+:::
+
+import Main from '@modern-js/builder-doc/docs/en/config/tools/devServer.md';
+
+<Main />

package/docs/en/configure/app/tools/html-plugin.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: htmlPlugin
+---
+
+# tools.htmlPlugin
+
+:::tip
+This config is provided by Modern.js Builder, more detail can see [tools.htmlPlugin](https://modernjs.dev/builder/en/api/config-tools.html#toolshtmlplugin).
+:::
+
+import Main from '@modern-js/builder-doc/docs/en/config/tools/htmlPlugin.md';
+
+<Main />

package/docs/en/configure/app/tools/inspector.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: inspector
+---
+
+# tools.inspector
+
+:::tip
+This config is provided by Modern.js Builder, more detail can see [tools.inspector](https://modernjs.dev/builder/en/api/config-tools.html#toolsinspector).
+:::
+
+import Main from '@modern-js/builder-doc/docs/en/config/tools/inspector.md';
+
+<Main />

package/docs/en/configure/app/tools/less.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: less
+---
+
+# tools.less
+
+:::tip
+This config is provided by Modern.js Builder, more detail can see [tools.less](https://modernjs.dev/builder/en/api/config-tools.html#toolsless).
+:::
+
+import Main from '@modern-js/builder-doc/docs/en/config/tools/less.md';
+
+<Main />

package/docs/en/configure/app/tools/minify-css.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: minifyCss
+---
+
+# tools.minifyCss
+
+:::tip
+This config is provided by Modern.js Builder, more detail can see [tools.minifyCss](https://modernjs.dev/builder/en/api/config-tools.html#toolsminifycss).
+:::
+
+import Main from '@modern-js/builder-doc/docs/en/config/tools/minifyCss.md';
+
+<Main />

package/docs/en/configure/app/tools/postcss.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: postcss
+---
+
+# tools.postcss
+
+:::tip
+This config is provided by Modern.js Builder, more detail can see [tools.postcss](https://modernjs.dev/builder/en/api/config-tools.html#toolspostcss).
+:::
+
+import Main from '@modern-js/builder-doc/docs/en/config/tools/postcss.md';
+
+<Main />

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

@@ -0,0 +1,13 @@
+---
+sidebar_label: pug
+---
+
+# tools.pug
+
+:::tip
+This config is provided by Modern.js Builder, more detail can see [tools.pug](https://modernjs.dev/builder/en/api/config-tools.html#toolspug).
+:::
+
+import Main from '@modern-js/builder-doc/docs/en/config/tools/pug.md';
+
+<Main />

package/docs/en/configure/app/tools/rspack.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: rspack
+---
+
+# tools.rspack
+
+:::tip
+This config is provided by Modern.js Builder, more detail can see [tools.rspack](https://modernjs.dev/builder/en/api/config-tools.html#toolsrspack).
+:::
+
+import Main from '@modern-js/builder-doc/docs/en/config/tools/rspack.md';
+
+<Main />

package/docs/en/configure/app/tools/sass.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: sass
+---
+
+# tools.sass
+
+:::tip
+This config is provided by Modern.js Builder, more detail can see [tools.sass](https://modernjs.dev/builder/en/api/config-tools.html#toolssass).
+:::
+
+import Main from '@modern-js/builder-doc/docs/en/config/tools/sass.md';
+
+<Main />

package/docs/en/configure/app/tools/style-loader.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: styleLoader
+---
+
+# tools.styleLoader
+
+:::tip
+This config is provided by Modern.js Builder, more detail can see [tools.styleLoader](https://modernjs.dev/builder/en/api/config-tools.html#toolsstyleloader).
+:::
+
+import Main from '@modern-js/builder-doc/docs/en/config/tools/styleLoader.md';
+
+<Main />

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

@@ -0,0 +1,13 @@
+---
+sidebar_label: styledComponents
+---
+
+# tools.styledComponents
+
+:::tip
+This config is provided by Modern.js Builder, more detail can see [tools.styledComponents](https://modernjs.dev/builder/en/api/config-tools.html#toolsstyledcomponents).
+:::
+
+import Main from '@modern-js/builder-doc/docs/en/config/tools/styledComponents.md';
+
+<Main />

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

@@ -0,0 +1,13 @@
+---
+sidebar_label: terser
+---
+
+# tools.terser
+
+:::tip
+This config is provided by Modern.js Builder, more detail can see [tools.terser](https://modernjs.dev/builder/en/api/config-tools.html#toolsterser).
+:::
+
+import Main from '@modern-js/builder-doc/docs/en/config/tools/terser.md';
+
+<Main />

package/docs/en/configure/app/tools/ts-checker.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: tsChecker
+---
+
+# tools.tsChecker
+
+:::tip
+This config is provided by Modern.js Builder, more detail can see [tools.tsChecker](https://modernjs.dev/builder/en/api/config-tools.html#toolstschecker).
+:::
+
+import Main from '@modern-js/builder-doc/docs/en/config/tools/tsChecker.md';
+
+<Main />

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

@@ -0,0 +1,13 @@
+---
+sidebar_label: tsLoader
+---
+
+# tools.tsLoader
+
+:::tip
+This config is provided by Modern.js Builder, more detail can see [tools.tsLoader](https://modernjs.dev/builder/en/api/config-tools.html#toolstsloader).
+:::
+
+import Main from '@modern-js/builder-doc/docs/en/config/tools/tsLoader.md';
+
+<Main />

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

@@ -0,0 +1,13 @@
+---
+sidebar_label: webpackChain
+---
+
+# tools.webpackChain
+
+:::tip
+This config is provided by Modern.js Builder, more detail can see [tools.webpackChain](https://modernjs.dev/builder/en/api/config-tools.html#toolswebpackchain).
+:::
+
+import Main from '@modern-js/builder-doc/docs/en/config/tools/webpackChain.md';
+
+<Main />

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

@@ -0,0 +1,13 @@
+---
+sidebar_label: webpack
+---
+
+# tools.webpack
+
+:::tip
+This config is provided by Modern.js Builder, more detail can see [tools.webpack](https://modernjs.dev/builder/en/api/config-tools.html#toolswebpack).
+:::
+
+import Main from '@modern-js/builder-doc/docs/en/config/tools/webpack.md';
+
+<Main />

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

@@ -0,0 +1,80 @@
+---
+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`.
+
+:::