npm - @modern-js/main-doc - Versions diffs - 2.69.5 → 3.0.0-alpha.0 - Mend

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

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 (540) hide show

package/docs/zh/configure/app/html/template-parameters-by-entries.mdx DELETED Viewed

@@ -1,36 +0,0 @@
----
-title: templateParametersByEntries
----
-# html.templateParametersByEntries
-- **类型：** `Object`
-- **默认值：** `undefined`
-用于在多页面的场景下，为不同的页面设置不同的模板参数。
-整体用法与 `templateParameters` 一致，并且可以使用「入口名称」作为 key ，对各个页面进行单独设置。
-`templateParametersByEntries` 的优先级高于 `templateParameters`，因此会覆盖 `templateParameters` 中设置的值。
-:::warning
-**Deprecated**：该配置已废弃，请使用 `html.templateParameters` 的函数用法代替。
-:::
-### 示例
-```js
-export default {
-  html: {
-    templateParametersByEntries: {
-      foo: {
-        type: 'a',
-      },
-      bar: {
-        type: 'b',
-      },
-    },
-  },
-};
-```

package/docs/zh/configure/app/html/title-by-entries.mdx DELETED Viewed

@@ -1,37 +0,0 @@
----
-title: titleByEntries
----
-# html.titleByEntries
-- **类型：** `Record<string, string>`
-- **默认值：** `undefined`
-用于在多页面的场景下，为不同的页面设置不同的 `title`。
-整体用法与 `title` 一致，并且可以使用「入口名称」作为 key ，对各个页面进行单独设置。
-`titleByEntries` 的优先级高于 `title`，因此会覆盖 `title` 中设置的值。
-:::warning
-**Deprecated**：该配置已废弃，请使用 `html.title` 的函数用法代替。
-:::
-### 示例
-```js
-export default {
-  html: {
-    title: 'ByteDance',
-    titleByEntries: {
-      foo: 'TikTok',
-    },
-  },
-};
-```
-重新编译后，可以看到:
-- 页面 `foo` 的 title 为 `TikTok`。
-- 其他页面的 title 为 `ByteDance`。

package/docs/zh/configure/app/output/css-module-local-ident-name.mdx DELETED Viewed

@@ -1,21 +0,0 @@
----
-title: cssModuleLocalIdentName
----
-# output.cssModuleLocalIdentName
-- **类型：** `string`
-- **默认值：**
-```ts
-// isProd 表示生产环境构建
-const localIdentName = isProd
-  ? '[local]-[hash:base64:6]'
-  : '[path][name]__[local]-[hash:base64:6]';
-```
-设置 CSS Modules 编译后生成的 className 格式。
-:::warning
-**Deprecated**：该配置已废弃，请使用 `output.cssModules.localIdentName` 的代替。
-:::

package/docs/zh/configure/app/output/disable-css-extract.mdx DELETED Viewed

@@ -1,16 +0,0 @@
----
-title: disableCssExtract
----
-# output.disableCssExtract
-- **类型：** `boolean`
-- **默认值：** `false`
-是否禁用 CSS 提取逻辑，并将 CSS 文件内联到 JS 文件中。
-默认情况下，Modern.js 会把 CSS 提取为独立的 `.css` 文件，并输出到构建产物目录。设置该选项为 `true` 后，CSS 文件会被内联到 JS 文件中，并在运行时通过 `<style>` 标签插入到页面上。
-:::warning
-**Deprecated**：该配置已废弃，请使用 `output.injectStyles` 的代替。
-:::

package/docs/zh/configure/app/output/disable-filename-hash.mdx DELETED Viewed

@@ -1,16 +0,0 @@
----
-title: disableFilenameHash
----
-# output.disableFilenameHash
-- **类型：** `boolean`
-- **默认值：** `false`
-移除生产环境的构建产物名称中的 hash 值。
-在生产环境构建后，会自动在文件名中间添加 hash 值，如果不需要添加，可以通过 `output.disableFilenameHash` 配置来禁用该行为。
-:::warning
-**Deprecated**：该配置已废弃，请使用 `output.filenameHash` 的布尔用法代替。
-:::

package/docs/zh/configure/app/output/disable-minimize.mdx DELETED Viewed

@@ -1,14 +0,0 @@
----
-title: disableMinimize
----
-# output.disableMinimize
-- **类型：** `boolean`
-- **默认值：** `false`
-是否禁用生产环境下的代码压缩。
-:::warning
-**Deprecated**：该配置已废弃，请使用 `output.minify` 的布尔用法代替。
-:::

package/docs/zh/configure/app/output/disable-node-polyfill.mdx DELETED Viewed

@@ -1,22 +0,0 @@
----
-title: disableNodePolyfill
----
-# output.disableNodePolyfill
-- **类型：** `boolean`
-- **默认值：** `true`
-该配置项用于控制是否在代码中注入 Node 模块的 Polyfill。
-默认情况下，我们不会将 Node Polyfill 注入到代码中，以避免造成代码体积增大。如果你需要注入 Node Polyfill，可以将 `output.disableNodePolyfill` 设置为 `false`：
-```ts title="modern.config.ts"
-export default defineConfig({
-  output: {
-    disableNodePolyfill: false,
-  },
-});
-```
-该配置项基于 Rsbuild 的 Node Polyfill 插件实现，你可以阅读 [Rsbuild - Node Polyfill 插件](https://github.com/rspack-contrib/rsbuild-plugin-node-polyfill) 文档来了解详细信息。

package/docs/zh/configure/app/output/disable-source-map.mdx DELETED Viewed

@@ -1,31 +0,0 @@
----
-title: disableSourceMap
----
-# output.disableSourceMap
-- **类型：**
-```ts
-type DisableSourceMap =
-  | boolean
-  | {
-      js?: boolean;
-      css?: boolean;
-    };
-```
-- **默认值：**
-```ts
-const defaultDisableSourceMap = {
-  js: false,
-  css: process.env.NODE_ENV === 'production',
-};
-```
-是否禁用 Source Map 生成。
-:::warning
-**Deprecated**：该配置已废弃，请使用 `output.sourceMap` 的布尔用法代替。
-:::

package/docs/zh/configure/app/output/enable-asset-fallback.mdx DELETED Viewed

@@ -1,36 +0,0 @@
----
-title: enableAssetFallback
----
-# output.enableAssetFallback
-- **类型：** `boolean`
-- **默认值：** `false`
-开启该选项后，当编译过程中遇到无法识别的文件类型时，会直接将该文件直接输出到产物目录；否则会抛出一个异常。
-### 示例
-开启配置项：
-```js
-export default {
-  output: {
-    enableAssetFallback: true,
-  },
-};
-```
-在代码中引用一个未知类型的模块：
-```js
-import './foo.xxx';
-```
-编译后，`foo.xxx` 会被自动输出到 `dist/static/media` 目录下。
-你可以通过 `output.distPath.media` 和 `output.filename.media` 配置项来控制 fallback 后的输出路径和文件名称。
-:::tip
-开启该配置会导致 webpack 配置中的 rules 结构变化，增加一层额外的 `oneOf` 嵌套结构。大多数情况下，我们不推荐你使用此配置。
-:::

package/docs/zh/configure/app/output/enable-inline-scripts.mdx DELETED Viewed

@@ -1,22 +0,0 @@
----
-title: enableInlineScripts
----
-# output.enableInlineScripts
-- **类型：**
-```ts
-type EnableInlineScripts =
-  | boolean
-  | RegExp
-  | ((params: { size: number; name: string }) => boolean);
-```
-- **默认值：** `false`
-用来控制生产环境中是否用 `<script>` 标签将产物中的 script 文件（.js 文件）inline 到 HTML 中。
-:::warning
-**Deprecated**：该配置已废弃，请使用 `output.inlineScripts` 的布尔用法代替。
-:::

package/docs/zh/configure/app/output/enable-inline-styles.mdx DELETED Viewed

@@ -1,22 +0,0 @@
----
-title: enableInlineStyles
----
-# output.enableInlineStyles
-- **类型：**
-```ts
-type EnableInlineStyles =
-  | boolean
-  | RegExp
-  | ((params: { size: number; name: string }) => boolean);
-```
-- **默认值：** `false`
-用来控制生产环境中是否用 `<style>` 标签将产物中的 style 文件（.css 文件）inline 到 HTML 中。
-:::warning
-**Deprecated**：该配置已废弃，请使用 `output.inlineStyles` 的布尔用法代替。
-:::

package/docs/zh/configure/app/output/enable-latest-decorators.mdx DELETED Viewed

@@ -1,14 +0,0 @@
----
-title: enableLatestDecorators
----
-# output.enableLatestDecorators
-- **类型：** `boolean`
-- **默认值：** `false`
-是否要使用 [新版 decorator 提案](https://github.com/tc39/proposal-decorators/tree/7fa580b40f2c19c561511ea2c978e307ae689a1b) 进行编译。
-:::warning
-**Deprecated**：该配置已废弃，请使用 `source.decorators` 配置项代替。
-:::

package/docs/zh/configure/app/performance/transform-lodash.mdx DELETED Viewed

@@ -1,52 +0,0 @@
----
-title: transformLodash
----
-# performance.transformLodash
-import { Badge } from '@theme';
-<Badge type="danger" ><div>仅支持 Webpack</div></Badge>
-- **类型：** `boolean`
-- **默认值：** `true`
-是否模块化 [lodash](https://www.npmjs.com/package/lodash) 的导入，删除未使用的 lodash 模块，从而减少 lodash 代码体积。
-这项优化基于 [babel-plugin-lodash](https://www.npmjs.com/package/babel-plugin-lodash) 和 [swc-plugin-lodash](https://github.com/web-infra-dev/swc-plugins/tree/main/crates/plugin_lodash) 实现。
-### 示例
-该选项默认开启，Modern.js 会自动将 `lodash` 的代码引用指向子路径。
-比如：
-```ts title="input.js"
-import _ from 'lodash';
-import { add } from 'lodash/fp';
-const addOne = add(1);
-_.map([1, 2, 3], addOne);
-```
-转换后的代码为：
-```ts title="output.js"
-import _add from 'lodash/fp/add';
-import _map from 'lodash/map';
-const addOne = _add(1);
-_map([1, 2, 3], addOne);
-```
-### 关闭转换
-在个别情况下，`lodash` 的 import 转换可能会生成不符合预期的代码，此时你可以手动关闭这项优化：
-```js
-export default {
-  performance: {
-    transformLodash: false,
-  },
-};
-```

package/docs/zh/configure/app/runtime/master-app.mdx DELETED Viewed

@@ -1,38 +0,0 @@
-# masterApp
-- **类型：** `Object`
-:::info
-需要先通过 `pnpm run new` 启用「微前端」 功能。
-:::
-## 示例
-import EnableMicroFrontend from "@site-docs/components/enable-micro-frontend";
-import MasterManifestAppConfig from "@site-docs/components/micro-master-manifest-config";
-<EnableMicroFrontend />
-<MasterManifestAppConfig />
-### apps
-当 `apps` 为对象类型的时候，表示子应用模块的信息 `Array<AppInfo>`
-```ts
-interface AppInfo {
-  name: string;
-  entry: string;
-  activeWhen?: string | ()=> boolean;
-}
-```
-- name: 子应用的名称。
-- entry: 子应用的入口。
-- activeWhen?: 子应用激活路径。
-### 其他配置项
-在 `masterApp` 配置下，开发者可以透传 Garfish 的配置项。
-所有支持的配置项[点此查看](https://www.garfishjs.org/api/run.html)。

package/docs/zh/configure/app/runtime/state.mdx DELETED Viewed

@@ -1,52 +0,0 @@
----
-title: state
----
-# state
-- **类型：** `boolean | object`
-- **默认值：** `false`
-开启 `state` 后就可以使用 [Model](/guides/topic-detail/model/quick-start) 来做状态管理。
-## models
-- **类型：** `Array<Model>`
-- **默认值：** `[]`
-注册提前挂载的 model 对象，这些 model 会在 Reduck store 创建完成后立即执行挂载。一般使用无需提前挂载。
-## initialState
-- **类型：** `Object`
-- **默认值：** `{}`
-用于设置全局 store 的初始状态。一般用于 SSR 在 hydration 阶段初始化数据。
-## immer
-- **类型：** `boolean`
-- **默认值：** `true`
-是否启用以 mutable 更新 state 的方式，默认启用，若想禁用则设置为 `false`。
-## effects
-- **类型：** `boolean`
-- **默认值：** `true`
-是否启用副作用管理特性，默认启用，若想禁用则设置为 `false`。
-## autoActions
-- **类型：** `boolean`
-- **默认值：** `true`
-是否启用自动生成 actions 特性，默认启用，若想禁用则设置为 `false`。
-## devtools
-- **类型：** `boolean | EnhancerOptions`
-- **默认值：** `true`
-是否启用 devtools，默认启用，同时支持 [redux-devtools-extension](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md) 的所有参数，若想禁用则设置为 `false`。

package/docs/zh/configure/app/source/disable-entry-dirs.mdx DELETED Viewed

@@ -1,38 +0,0 @@
----
-title: disableEntryDirs
----
-# source.disableEntryDirs
-- **类型：** `string[]`
-- **默认值：** `[]`
-Modern.js 默认会根据 `src` 目录识别应用入口，你可以通过该选项禁止某些目录被识别为应用入口。
-例如，当配置与目录结构如下时：
-```ts title="modern.config.ts"
-export default defineConfig({
-  source: {
-    disableEntryDirs: ['./src/one'],
-  },
-});
-```
-```bash title="项目目录结构"
-└── src/
-    ├── one/
-    |    └── App.tsx
-    ├── two/
-    |    └── routes/
-    └── env.d.ts
-```
-在未设置该配置项时，Modern.js 会根据项目目录产出两个 entry:
-- one
-- two
-当设置该配置项后，`src/one` 不会作为 entry 目录被识别。
-常见的用法是，将 `src/common`、`src/components` 目录配置到该选项中，避免这些目录被识别为应用入口。

package/docs/zh/configure/app/source/enable-custom-entry.mdx DELETED Viewed

@@ -1,67 +0,0 @@
----
-title: enableCustomEntry
----
-# source.enableCustomEntry
-- **类型：** `boolean`
-- **默认值：** `false`
-该选项用于使用 Modern.js 自定义入口场景。开启此选项后，Modern.js 将尝试使用 `src/entry.[jt]sx` 与 `src/entry.server.[jt]sx` 文件作为项目的入口。
-## 示例
-首先，在配置文件中开启此选项：
-```ts title="modern.config.ts"
-export default defineConfig({
-  source: {
-    enableCustomEntry: true,
-  },
-});
-```
-创建 `src/entry.tsx` 文件，在渲染前执行某些行为：
-```tsx
-import { createRoot } from '@modern-js/runtime/react';
-import { render } from '@modern-js/runtime/browser';
-const ModernRoot = createRoot();
-async function beforeRender() {
-   // todo
-}
-beforeRender().then(() => {
-  render(<ModernRoot />);
-});
-```
-:::info
-更多浏览器端入口相关内容可参考[页面入口](/guides/concept/entries.html)。
-:::
-创建 `src/entry.server.tsx` 文件，为渲染响应添加自定义行为：
-```tsx
-import { renderString, createRequestHandler } from '@modern-js/runtime/ssr/server';
-import type { HandleRequest } from '@modern-js/runtime/ssr/server';
-const handleRequest: HandleRequest = async (request, ServerRoot, options) => {
-  // do something before rendering
-  const body = await renderString(request, <ServerRoot />, options);
-  const newBody = body + '<div>Byte-Dance</div>';
-  return new Response(newBody, {
-    headers: {
-      'content-type': 'text/html; charset=UTF-8',
-      'x-custom-header': 'abc',
-    },
-  });
-};
-export default createRequestHandler(handleRequest);
-```

package/docs/zh/configure/app/source/module-scopes.mdx DELETED Viewed

@@ -1,72 +0,0 @@
----
-title: moduleScopes
----
-# source.moduleScopes
-import { Badge } from '@theme';
-<Badge type="danger" >仅支持 Webpack</Badge>
-- **类型：** `Array<string | Regexp> | Function`
-- **默认值：** `undefined`
-限制源代码的引用路径。配置该选项后，所有源文件只能从约定的目录下引用代码，从其他目录引用代码会产生对应的报错提示。
-### 示例
-首先我们配置 `moduleScopes` 仅包含 `src` 目录：
-```js
-export default {
-  source: {
-    moduleScopes: ['./src'],
-  },
-};
-```
-然后在 `src/App.tsx` 中导入 `src` 目录外部的 `utils/a` 模块:
-```js
-import a from '../utils/a';
-```
-在编译时，会提示引用路径错误:
-![scopes-error](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/module-scopes-error.png)
-通过该选项配置 `utils` 目录，再进行编译，则不会出现错误提示。
-```js
-export default {
-  source: {
-    moduleScopes: ['./src', './utils'],
-  },
-};
-```
-### Array 类型
-当 `moduleScopes` 的值为 `Array` 类型时，可以直接设置若干个代码路径，比如添加以下配置：
-```js
-export default {
-  source: {
-    moduleScopes: ['./src', './shared', './utils'],
-  },
-};
-```
-### Function 类型
-`moduleScopes` 也支持通过函数的形式来进行修改，避免覆盖默认值：
-```js
-export default {
-  source: {
-    moduleScopes: scopes => {
-      scopes.push('./shared');
-    },
-  },
-};
-```

package/docs/zh/configure/app/source/resolve-extension-prefix.mdx DELETED Viewed

@@ -1,57 +0,0 @@
----
-title: resolveExtensionPrefix
----
-# source.resolveExtensionPrefix
-- **类型：** `string | Record<BuilderTarget, string>`
-- **默认值：** `undefined`
-用于为 [resolve.extensions](https://webpack.js.org/configuration/resolve/#resolveextensions) 添加统一的前缀。
-如果多个文件拥有相同的名称，但具有不同的文件后缀，Modern.js 会根据 extensions 数组的顺序进行识别，解析数组中第一个被识别的文件，并跳过其余文件。
-### 示例
-下面是配置 `.web` 前缀的例子。
-```js
-export default {
-  source: {
-    resolveExtensionPrefix: '.web',
-  },
-};
-```
-配置完成后，extensions 数组会发生以下变化：
-```js
-// 配置前
-const extensions = ['.js', '.ts', ...];
-// 配置后
-const extensions = ['.web.js', '.js', '.web.ts' , '.ts', ...];
-```
-在代码中 `import './foo'` 时，会优先识别 `foo.web.js` 文件，再识别 `foo.js` 文件。
-#### 根据产物类型设置
-当你同时构建多种类型的产物时，你可以为不同的产物类型设置不同的 extension 前缀。此时，你需要把 `resolveExtensionPrefix` 设置为一个对象，对象的 key 为对应的产物类型。
-比如为 `web` 和 `node` 设置不同的 extension 前缀：
-```js
-export default {
-  output: {
-    source: {
-      resolveExtensionPrefix: {
-        web: '.web',
-        node: '.node',
-      },
-    },
-  },
-};
-```
-在代码中 `import './foo'` 时，对于 node 产物，会优先识别 `foo.node.js` 文件，而对于 web 产物，则会优先识别 `foo.web.js` 文件。