From 428761623bd96a35e984f4b42fba1e3fd1205478 Mon Sep 17 00:00:00 2001 From: neverland Date: Fri, 30 Jun 2023 15:25:51 +0800 Subject: [PATCH] docs(module-tools): update plugins and api doc title (#4101) --- .../docs/zh/configure/app/builder-plugins.mdx | 7 ++- .../docs/en/api/config/build-config.md | 57 ++++++++++-------- .../docs/en/api/config/build-preset.mdx | 6 +- .../docs/en/api/config/design-system.md | 6 +- .../module-doc/docs/en/api/config/dev.md | 47 +++++++-------- .../module-doc/docs/en/api/config/plugins.md | 55 +++++++++++++++-- .../module-doc/docs/en/api/config/testing.md | 6 +- .../docs/en/guide/advance/build-umd.mdx | 2 +- .../docs/en/guide/basic/command-preview.md | 4 +- .../en/guide/basic/modify-output-product.md | 20 +++++-- .../en/guide/best-practices/components.mdx | 6 +- .../docs/en/plugins/guide/setup-function.mdx | 2 +- .../en/plugins/official-list/plugin-banner.md | 2 +- .../plugins/official-list/plugin-import.mdx | 59 +++++++++++-------- .../docs/zh/api/config/build-config.md | 57 ++++++++++-------- .../docs/zh/api/config/build-preset.mdx | 2 +- .../docs/zh/api/config/design-system.md | 6 +- .../module-doc/docs/zh/api/config/dev.md | 49 ++++++++------- .../module-doc/docs/zh/api/config/plugins.md | 55 +++++++++++++++-- .../module-doc/docs/zh/api/config/testing.md | 6 +- .../docs/zh/guide/advance/build-umd.mdx | 2 +- .../zh/guide/basic/before-getting-started.md | 2 +- .../docs/zh/guide/basic/command-preview.md | 6 +- .../zh/guide/basic/modify-output-product.md | 25 +++++--- .../zh/guide/best-practices/components.mdx | 6 +- .../docs/zh/plugins/guide/setup-function.mdx | 2 +- .../zh/plugins/official-list/plugin-banner.md | 2 +- .../plugins/official-list/plugin-import.mdx | 51 +++++++++------- 28 files changed, 349 insertions(+), 201 deletions(-) diff --git a/packages/document/main-doc/docs/zh/configure/app/builder-plugins.mdx b/packages/document/main-doc/docs/zh/configure/app/builder-plugins.mdx index 0e7c818d5e85..a76cd744e7b0 100644 --- a/packages/document/main-doc/docs/zh/configure/app/builder-plugins.mdx +++ b/packages/document/main-doc/docs/zh/configure/app/builder-plugins.mdx @@ -2,6 +2,7 @@ title: builderPlugins (构建插件) sidebar_position: 10 --- + # builderPlugins (构建插件) - **类型：** `BuilderPlugin[]` @@ -36,7 +37,7 @@ Modern.js Builder 是 Modern.js 底层的构建引擎，请阅读 [构建能力] 使用 npm 上的插件，需要通过包管理器安装插件，并通过 import 引入。 ```ts title="modern.config.ts" -import myBuilderPlugin from 'my-builder-plugin'; +import { myBuilderPlugin } from 'my-builder-plugin'; export default defineConfig({ builderPlugins: [myBuilderPlugin()], @@ -48,7 +49,7 @@ export default defineConfig({ 使用本地代码仓库中的插件，直接通过相对路径 import 引入即可。 ```ts title="modern.config.ts" -import myBuilderPlugin from './plugin/myBuilderPlugin'; +import { myBuilderPlugin } from './plugin/myBuilderPlugin'; export default defineConfig({ builderPlugins: [myBuilderPlugin()], @@ -60,7 +61,7 @@ export default defineConfig({ 如果插件提供了一些自定义的配置项，可以通过插件函数的参数传入配置。 ```ts title="modern.config.ts" -import myBuilderPlugin from 'my-builder-plugin'; +import { myBuilderPlugin } from 'my-builder-plugin'; export default defineConfig({ builderPlugins: [ diff --git a/packages/document/module-doc/docs/en/api/config/build-config.md b/packages/document/module-doc/docs/en/api/config/build-config.md index a7bc4ed7ae62..4a445e3494c6 100644 --- a/packages/document/module-doc/docs/en/api/config/build-config.md +++ b/packages/document/module-doc/docs/en/api/config/build-config.md @@ -2,9 +2,20 @@ sidebar_position: 1 --- -# BuildConfig +# buildConfig -This section describes all the configuration of Module Tools for building +`buildConfig` is a configuration option that describes how to compile and generate build artifacts. It contains all the configurations related to the build process. + +- **Type**: `object | object[]` +- **Default**: `undefined` + +:::tip +Before start using `buildConfig`, please read the following documentation to understand its purpose: + +- [Modifying Output Artifacts](/guide/basic/modify-output-product.html) +- [In-Depth Understanding of the Build Process](/guide/advance/in-depth-about-build.html) + +::: ## alias @@ -110,7 +121,7 @@ At this point, all static resources will be prefixed with `https://xxx/` Packaged to handle svg as a React component, options reference [svgr](https://react-svgr.com/docs/options/), plus support for two configuration items `include` and `exclude` to match the svg file to be handled -- **Type**: `boolean | Object` +- **Type**: `boolean | object` - **Default**: `false` When svgr feature is enabled, you can use svg as a component using the default export. @@ -160,7 +171,7 @@ Set unmatched svg files Automatically externalize project dependencies and peerDependencies and not package them into the final bundle -- **Type**: `boolean | Object` +- **Type**: `boolean | object` - **Default**: `true` When we want to turn off the default handling behavior for third-party dependencies, we can do so by: @@ -212,7 +223,7 @@ The build type, `bundle` will package your code, `bundleless` will only do the c Copies the specified file or directory into the build output directory -- **Type**: `Array` +- **Type**: `object[]` - **Default**: `[]` ```js @@ -295,7 +306,7 @@ The use of SWC Transform can reduce the impact of auxiliary functions on the vol The dts file generates the relevant configuration, by default it generates. -- **Type**: `false | Object` +- **Type**: `false | object` - **Default**: ```js @@ -612,7 +623,7 @@ After executing the build, a `metafile-[xxx].json` file will be generated in the Use esbuild or terser to compress code, also pass [terserOptions](https://github.com/terser/terser#minify-options) -- **Type**: `'terser' | 'esbuild' | false | Object` +- **Type**: `'terser' | 'esbuild' | false | object` - **Default**: `false` ```js modern.config.ts @@ -723,8 +734,8 @@ Whether to generate sourceMap or not Sets the format of the source code. By default, the source code will be treated as EsModule. When the source code is using CommonJS, you need to set `commonjs`. -- **Type**: `commonjs` | `module` -- **Default**: `module` +- **Type**: `'commonjs' | 'module'` +- **Default**: `'module'` ## splitting @@ -745,7 +756,7 @@ less-related configuration Refer to [less](https://less.bootcss.com/usage/#less-options) for detailed configuration -- **Type**: `Object` +- **Type**: `object` - **Default**: `{ javascriptEnabled: true }` ## style.less.additionalData @@ -769,12 +780,12 @@ export default { ## style.less.implementation -Configure the implementation library used by `Less`, if not specified, the built-in version used is `4.1.3` +Configure the implementation library used by `Less`, if not specified, the built-in version used is `4.1.3`. -- **Type**: `string | Object` +- **Type**: `string | object` - **Default**: `undefined` -Specify the implementation library for `Less` when the `Object` type is specified +Specify the implementation library for `Less` when the `object` type is specified. ```js modern.config.ts export default { @@ -808,9 +819,9 @@ sass-related configuration. ## style.sass.sassOptions -Refer to [node-sass](https://github.com/sass/node-sass#options) for detailed configuration +Refer to [node-sass](https://github.com/sass/node-sass#options) for detailed configuration. -- **Type**: `Object` +- **Type**: `object` - **Default**: `{}` ## style.sass.additionalData @@ -835,12 +846,12 @@ export default { ## style.sass.implementation -Configure the implementation library used by `Sass`, the built-in version used is `1.5.4` if not specified +Configure the implementation library used by `Sass`, the built-in version used is `1.5.4` if not specified. -- **Type**: `string | Object` +- **Type**: `string | object` - **Default**: `undefined` -Specify the implementation library for `Sass` when the `Object` type is specified +Specify the implementation library for `Sass` when the `object` type is specified. ```js modern.config.ts export default { @@ -952,7 +963,7 @@ Enable CSS Modules automatically based on the filename. CSS Modules configuration -- **Type**: `Object` +- **Type**: `object` - **Default**: `{}` A common configuration is `localsConvention`, which changes the class name generation rules for css modules @@ -985,7 +996,7 @@ For detailed configuration see [postcss-modules](https://github.com/madyankin/po tailwindcss related configuration -- **Type**: `Object | Function` +- **Type**: `object | Function` - **Default**: `see configuration details below`
@@ -1006,7 +1017,7 @@ const tailwind = { }; ``` -When the value is of type `Object`, it is merged with the default configuration via `Object.assign`. +When the value is of type `object`, it is merged with the default configuration via `Object.assign`. When the value is of type `Function`, the object returned by the function is merged with the default configuration via `Object.assign`. @@ -1051,7 +1062,7 @@ export default defineConfig({ Using [SWC](https://swc.rs/) provides the same ability and configuration as [`babel-plugin-import`](https://github.com/umijs/babel-plugin-import). -- **Type**: `Array` +- **Type**: `object[]` - **Default**: `[]` The elements of the array are configuration objects for `babel-plugin-import`, which can be referred to [options](https://github.com/umijs/babel-plugin-import#options)。 @@ -1100,7 +1111,7 @@ At this point, `react` and `react-dom` will be seen as global variables imported Specifies the module name of the umd product -- **Type**: `string` | `Function` +- **Type**: `string | Function` - **Default**: `name => name` ```js diff --git a/packages/document/module-doc/docs/en/api/config/build-preset.mdx b/packages/document/module-doc/docs/en/api/config/build-preset.mdx index e5b5f99cba06..f0924d2bc437 100644 --- a/packages/document/module-doc/docs/en/api/config/build-preset.mdx +++ b/packages/document/module-doc/docs/en/api/config/build-preset.mdx @@ -2,12 +2,12 @@ sidebar_position: 2 --- -# BuildPreset +# buildPreset A build preset string or preset function. Provides out-of-the-box build configuration -- Type: `string | Function` -- Default: `undefined` +- **Type**: `string | Function` +- **Default**: `undefined` ## string diff --git a/packages/document/module-doc/docs/en/api/config/design-system.md b/packages/document/module-doc/docs/en/api/config/design-system.md index d10ed937b971..a1477d901743 100644 --- a/packages/document/module-doc/docs/en/api/config/design-system.md +++ b/packages/document/module-doc/docs/en/api/config/design-system.md @@ -2,15 +2,15 @@ sidebar_position: 3 --- -# DesignSystem +# designSystem -This chapter describes the configuration related to designSystem +This chapter describes the configuration related to designSystem. :::tip The Tailwind CSS feature needs to be enabled first via `pnpm run new`. ::: -- Type: `Object` +- Type: `object` - Default: `see configuration details below`.
diff --git a/packages/document/module-doc/docs/en/api/config/dev.md b/packages/document/module-doc/docs/en/api/config/dev.md index 7292882fa89f..0e72247447e7 100644 --- a/packages/document/module-doc/docs/en/api/config/dev.md +++ b/packages/document/module-doc/docs/en/api/config/dev.md @@ -2,16 +2,18 @@ sidebar_position: 3 --- -# Dev Config +# dev This section describes all configuration of Module Tools related to debugging tools. -``` ts +```ts export default { dev: { - storybook: {/* Storybook Config */}, + storybook: { + /* Storybook Config */ + }, }, -} +}; ``` ## storybook @@ -21,36 +23,34 @@ export default { - Turn on Storybook debugging or install the `@modern-js/plugin-storybook` plugin. - Register the `@modern-js/plugin-storybook` plugin。 -> For more information on how to enable Storybook debugging, please refer to：[【Storybook】](guide/basic/use-micro-generator#storybook) - - +> For more information on how to enable Storybook debugging, please refer to：["Storybook"](guide/basic/use-micro-generator#storybook) ### storybook.webpack -- **Type**: `Object` | `Function` | `undefined` - +- **Type**: `object | Function | undefined` - **Default**: `undefined` -``` ts +```ts export default { dev: { storybook: { webpack(config) { return config; }, - } - } -} + }, + }, +}; ``` -You can modify the webpack configuration of the Storybook Preview-iframe via `dev.storybook.webpack`. The usage can be found in the [`tools.webpack`](https://modernjs.dev/builder/api/config-tools.html#tools.webpack) configuration of Modern.js Builder. +You can modify the webpack configuration of the Storybook Preview-iframe via `dev.storybook.webpack`. The usage can be found in the [`tools.webpack`](https://modernjs.dev/builder/en/api/config-tools.html#toolswebpack) configuration of Modern.js Builder. ![Storybook](https://storybook.js.org/71522ac365feaf3338d7c242e53378f6/manager-preview.png) -:::tip +#### Configure Manager App + For the webpack configuration of the Storybook Manager app section, you can configure it by adding the `./config/storybook/main.js` file to configure it. -``` js +```js // ./config/storybook/main.js module.exports = { @@ -61,25 +61,22 @@ module.exports = { }, }; ``` -::: ### storybook.webpackChain -- **Type**: `Function` | `undefined` - +- **Type**: `Function | undefined` - **Default**: `undefined` -``` ts +```ts export default { dev: { storybook: { webpackChain(chain) { return chain; }, - } - } -} + }, + }, +}; ``` -You can modify the webpack configuration of the Storybook Preview-iframe via `dev.storybook.webpackChain`. You can refer to Modern.js Builder's [`tools.webpackChain`](https://modernjs.dev/builder/api/config-tools.html#tools.webpackchain) configuration for how to use it. - +You can modify the webpack configuration of the Storybook Preview-iframe via `dev.storybook.webpackChain`. You can refer to Modern.js Builder's [`tools.webpackChain`](https://modernjs.dev/builder/en/api/config-tools.html#toolswebpackchain) configuration for how to use it. diff --git a/packages/document/module-doc/docs/en/api/config/plugins.md b/packages/document/module-doc/docs/en/api/config/plugins.md index c4cbd9afde32..e24de71d2c55 100644 --- a/packages/document/module-doc/docs/en/api/config/plugins.md +++ b/packages/document/module-doc/docs/en/api/config/plugins.md @@ -2,17 +2,62 @@ sidebar_position: 4 --- -# Plugins +# plugins This chapter describes the configuration of the registered Module Tools plugin. -- Type: `Array` +- **Type**: `ModuleToolsPlugin[]` +- **Default**: `undefined` + +## Plugin Execution Order + +By default, custom plugins are executed in the order specified in the `plugins` array. The execution of built-in plugins provided by Module Tools happens before the execution of custom plugins. + +When plugins use fields that control the execution order, such as `pre` and `post`, the execution order is adjusted based on the declared fields. For more information, please refer to the [Relationship Between Plugins](https://modernjs.dev/en/guides/topic-detail/framework-plugin/relationship) guide. + +## Developing Plugins + +To learn how to write plugins, please refer to the [Plugin Writing Guide](/plugins/guide/getting-started). + +## Example + +### Using Plugins from npm + +To use plugins from npm, you need to install them using a package manager and import them in your configuration file. + +```js modern.config.ts +import { myPlugin } from 'my-plugin'; + +export default defineConfig({ + plugins: [myPlugin()], +}); +``` + +#### Using Local Plugins + +To use plugins from a local code repository, you can directly import them using a relative path. ```js modern.config.ts -import { examplePlugin } from '. /plugins/example'; +import { myPlugin } from './plugins/myPlugin'; + export default defineConfig({ - plugins: [examplePlugin()], + plugins: [myPlugin()], }); ``` -For more information on how to write plugins, check out the [[Plugin Writing Guide]](/en/plugins/guide/getting-started). +### Plugin Configuration + +If a plugin provides custom configuration options, you can pass the configuration through the plugin function's parameters. + +```js modern.config.ts +import { myPlugin } from 'my-plugin'; + +export default defineConfig({ + plugins: [ + myPlugin({ + foo: 1, + bar: 2, + }), + ], +}); +``` diff --git a/packages/document/module-doc/docs/en/api/config/testing.md b/packages/document/module-doc/docs/en/api/config/testing.md index c35c72408143..b6e302f42dd5 100644 --- a/packages/document/module-doc/docs/en/api/config/testing.md +++ b/packages/document/module-doc/docs/en/api/config/testing.md @@ -2,7 +2,7 @@ sidebar_position: 5 --- -# Testing +# testing This chapter describes the test-related configuration @@ -12,10 +12,10 @@ You need to enable the unit testing feature with `pnpm run new` first. ## jest -- Type: `Object | Function` +- Type: `object | Function` - Default: `{}` -The configuration corresponding to [Jest](https://jestjs.io/docs/configuration), when of type `Object`, can be configured with all the underlying configurations supported by Jest . +The configuration corresponding to [Jest](https://jestjs.io/docs/configuration), when of type `object`, can be configured with all the underlying configurations supported by Jest . ```js modern.config.ts import { defineConfig } from '@modern-js/module-tools'; diff --git a/packages/document/module-doc/docs/en/guide/advance/build-umd.mdx b/packages/document/module-doc/docs/en/guide/advance/build-umd.mdx index fc27e62b0877..4634f9341cbb 100644 --- a/packages/document/module-doc/docs/en/guide/advance/build-umd.mdx +++ b/packages/document/module-doc/docs/en/guide/advance/build-umd.mdx @@ -22,7 +22,7 @@ export default defineConfig({ ## Third-party dependency handling for umd products -In the [[How to handle third-party dependencies]](/en/guide/advance/external-dependency) chapter, we know that we can control whether or not the project packages third-party dependencies via the [`autoExternals`](/en/api/config/build-config#autoexternal) and [`externals`](/en/api/config/build-config#externals) APIs. +In the ["How to handle third-party dependencies"](/en/guide/advance/external-dependency) chapter, we know that we can control whether or not the project packages third-party dependencies via the [`autoExternals`](/en/api/config/build-config#autoexternal) and [`externals`](/en/api/config/build-config#externals) APIs. So when building umd products, we can also use it like this: diff --git a/packages/document/module-doc/docs/en/guide/basic/command-preview.md b/packages/document/module-doc/docs/en/guide/basic/command-preview.md index fde90b270f14..d702d393db55 100644 --- a/packages/document/module-doc/docs/en/guide/basic/command-preview.md +++ b/packages/document/module-doc/docs/en/guide/basic/command-preview.md @@ -2,9 +2,9 @@ sidebar_position: 2 --- -# Command Preview +# CLI Commands -Commands available for module engineering projects. +CLI Commands available for Module Tools projects are as follows: ## `modern build` diff --git a/packages/document/module-doc/docs/en/guide/basic/modify-output-product.md b/packages/document/module-doc/docs/en/guide/basic/modify-output-product.md index a65280fb2fb2..f624a4a67e18 100644 --- a/packages/document/module-doc/docs/en/guide/basic/modify-output-product.md +++ b/packages/document/module-doc/docs/en/guide/basic/modify-output-product.md @@ -6,13 +6,17 @@ sidebar_position: 3 ## Default output products -When the `modern build` command is used in an initialized project, the products are generated according to the default configuration supported by Module Tools. The default supported configurations are specified as follows. +When you use the `modern build` command in an initialized project, Module Tools will generate corresponding build products based on the current configuration. + +The default configuration is as follows: ```ts title="modern.config.ts" import { moduleTools, defineConfig } from '@modern-js/module-tools'; export default defineConfig({ + // Register the CLI tool of Module Tools plugins: [moduleTools()], + // Specify the build preset configuration buildPreset: 'npm-library', }); ``` @@ -70,11 +74,19 @@ export default defineConfig({ }); ``` -In the above code implementation, `preset.NPM_LIBRARY` corresponds to the preset string `"npm-library"`, which represents the equivalent of `"npm-library"` for multiple sets of build-related configurations. We traverse the `NPM_LIBRARY` array, which contains multiple `buildConfig` objects, using the `map` method. We made a shallow copy of the original `buildConfig` object and modified the value of the `target` after the shallow copy, specifying it as `es5`. +In the above code implementation, `preset.NPM_LIBRARY` corresponds to the preset string `"npm-library"`, representing multiple build-related configurations equivalent to `"npm-library"`. + +We use the `map` method to iterate over the `NPM_LIBRARY` array, which contains multiple `buildConfig` objects. We perform a shallow copy of the original `buildConfig` object and modify the value of the `target` property in the shallow copy to be `es5`. +If you want to know the specific contents included in `preset.NPM_LIBRARY`, you can refer to the [BuildPreset API](/api/config/build-preset). + +In addition, under the `preset` object, it not only includes `NPM_LIBRARY`, but also other similar constants. > NPM_LIBRARY`, you can check it with [BuildPreset API](/api/config/build-preset). The`preset`object contains not only`NPM_LIBRARY`, but also other similar constants. -> We can not only use `preset.NPM_LIBRARY` to get the build configuration corresponding to `"npm-library"`, but also `preset['npm-library']` in this way. + +:::tip +We can not only use `preset.NPM_LIBRARY`to get the build configuration corresponding to`"npm-library"`, but also `preset['npm-library']` in this way. +::: So what is the `buildConfig` object here? What is the basis for the build product feature mentioned before? @@ -82,7 +94,7 @@ Let's explain next. ## Build configuration (object) -**`buildConfig` is a configuration object that describes how to compile and generate build products**. What was mentioned at the beginning about "_features of build products_" are actually properties supported by `buildConfig`. The currently supported properties cover the needs of most module type projects when building products. `buildConfig` not only contains some properties that products have, but also contains some features needed to build products. The following is a brief list from a classification point of view. +**`buildConfig` is a configuration option that describes how to compile and generate build products**. What was mentioned at the beginning about "_features of build products_" are actually properties supported by `buildConfig`. The currently supported properties cover the needs of most module type projects when building products. `buildConfig` not only contains some properties that products have, but also contains some features needed to build products. The following is a brief list from a classification point of view. **The basic attributes of a build product include:** diff --git a/packages/document/module-doc/docs/en/guide/best-practices/components.mdx b/packages/document/module-doc/docs/en/guide/best-practices/components.mdx index a737750a305e..5b3589b443b0 100644 --- a/packages/document/module-doc/docs/en/guide/best-practices/components.mdx +++ b/packages/document/module-doc/docs/en/guide/best-practices/components.mdx @@ -605,7 +605,7 @@ When adding styles using HTML class names, by default Tailwind will not only add For the following code, there is a big difference between the bundle and bundleless modes of building products. -> The so-called bundle and bundleless can be found in [[Bundle and Bundleless]](/en/guide/advance/in-depth-about-build#bundle- and-bundleless) +> The so-called bundle and bundleless can be found in ["Bundle and Bundleless"](/en/guide/advance/in-depth-about-build#bundle- and-bundleless) ```tsx ./src/index.tsx import 'tailwindcss/utilities.css'; @@ -782,8 +782,8 @@ If you have special needs for the build product directory structure, you can use ## Testing components -For more information on how to test components, please refer to [[Test project]](/en/guide/basic/test-your-project). +For more information on how to test components, please refer to ["Test project"](/en/guide/basic/test-your-project). ## Releasing components -It is recommended to use module project to provide version publishing function, you can refer to [[Versioning and publishing]](/en/guide/basic/publish-your-project). +It is recommended to use module project to provide version publishing function, you can refer to ["Versioning and publishing"](/en/guide/basic/publish-your-project). diff --git a/packages/document/module-doc/docs/en/plugins/guide/setup-function.mdx b/packages/document/module-doc/docs/en/plugins/guide/setup-function.mdx index 7782ccac9253..d829e400b4d0 100644 --- a/packages/document/module-doc/docs/en/plugins/guide/setup-function.mdx +++ b/packages/document/module-doc/docs/en/plugins/guide/setup-function.mdx @@ -4,7 +4,7 @@ sidebar_position: 3 # Setup function -In the [[Plugin object]](/plugins/guide/plugin-object) section we know that the plug-in object contains a `setup` function that not only contains an `api` object parameter, but also returns a Hooks object. +In the ["Plugin object"](/plugins/guide/plugin-object) section we know that the plug-in object contains a `setup` function that not only contains an `api` object parameter, but also returns a Hooks object. ## Plugin API objects diff --git a/packages/document/module-doc/docs/en/plugins/official-list/plugin-banner.md b/packages/document/module-doc/docs/en/plugins/official-list/plugin-banner.md index 6726b6a9284e..7550f3b7160f 100644 --- a/packages/document/module-doc/docs/en/plugins/official-list/plugin-banner.md +++ b/packages/document/module-doc/docs/en/plugins/official-list/plugin-banner.md @@ -39,7 +39,7 @@ export default defineConfig({ ``` :::tip -Note: CSS comments do not support the `//comment` syntax. Refer to [【CSS Comments】](https://developer.mozilla.org/en-US/docs/Web/CSS/Comments) +Note: CSS comments do not support the `//comment` syntax. Refer to ["CSS Comments"](https://developer.mozilla.org/en-US/docs/Web/CSS/Comments) ::: ## Example diff --git a/packages/document/module-doc/docs/en/plugins/official-list/plugin-import.mdx b/packages/document/module-doc/docs/en/plugins/official-list/plugin-import.mdx index 41ead64a0f0f..18e67b3ac913 100644 --- a/packages/document/module-doc/docs/en/plugins/official-list/plugin-import.mdx +++ b/packages/document/module-doc/docs/en/plugins/official-list/plugin-import.mdx @@ -3,7 +3,7 @@ Using [SWC](https://swc.rs/) provides the same ability and configuration as [`babel-plugin-import`](https://github.com/umijs/babel-plugin-import). :::tip -Since @modern-js/module-tools version >= 2.16.0, this plugin functionality is built into module-tools and is provided by [`transformImport`](api/config/build-config.html#transformimport). +Since `@modern-js/module-tools` version >= v2.16.0, this plugin functionality is built into Module Tools and is provided by [`transformImport`](api/config/build-config.html#transformimport). ::: ## Quick Start @@ -26,17 +26,19 @@ pnpm add @modern-js/plugin-module-import -D In Module Tools, you can register plugins in the following way: ```ts -import { moduleTools, defineConfig } from '@modern-js/module-tools'; +import { moduleTools, defineConfig } from '@modern-js/module-tools'; import { modulePluginImport } from '@modern-js/plugin-module-import'; export default defineConfig({ plugins: [ moduleTools(), modulePluginImport({ - pluginImport: [{ - libraryName: 'antd', - style: true, - }], + pluginImport: [ + { + libraryName: 'antd', + style: true, + }, + ], }), ], }); @@ -46,17 +48,17 @@ This way we can use the ability of automatic import in Module Tools. ## Configurations -* **Type**: +- **Type**: ```ts type Options = { pluginImport?: ImportItem[]; -} +}; ``` ### pluginImport -* **Type**: `Array` +- **Type**: `object[]` The elements of the array are configuration objects for `babel-plugin-import`, which can be referred to [options](https://github.com/umijs/babel-plugin-import#options)。 @@ -64,7 +66,7 @@ The elements of the array are configuration objects for `babel-plugin-import`, w ```ts import { modulePluginImport } from '@modern-js/plugin-module-import'; -import { moduleTools, defineConfig } from '@modern-js/module-tools'; +import { moduleTools, defineConfig } from '@modern-js/module-tools'; export default defineConfig({ plugins: [ @@ -75,7 +77,7 @@ export default defineConfig({ { libraryName: 'foo', style: true, - } + }, ], }), ], @@ -110,16 +112,18 @@ Add the following configuration on the right-hand side: ```ts import { modulePluginImport } from '@modern-js/plugin-module-import'; -import { moduleTools, defineConfig } from '@modern-js/module-tools'; +import { moduleTools, defineConfig } from '@modern-js/module-tools'; export default defineConfig({ plugins: [ moduleTools(), modulePluginImport({ - pluginImport: [{ - libraryName: 'foo', - customName: 'foo/es/{{ member }}' - }], + pluginImport: [ + { + libraryName: 'foo', + customName: 'foo/es/{{ member }}', + }, + ], }), ], }); @@ -135,16 +139,19 @@ import { modulePluginImport } from '@modern-js/plugin-module-import'; export default defineConfig({ plugins: [ modulePluginImport({ - pluginImport: [{ - libraryName: 'foo', - customName: 'foo/es/{{ member }}' - }], + pluginImport: [ + { + libraryName: 'foo', + customName: 'foo/es/{{ member }}', + }, + ], }), ], }); ``` --- + After transformation: ```ts @@ -159,16 +166,18 @@ The template used here is [handlebars](https://handlebarsjs.com). There are some ```ts focus=8:8 import { modulePluginImport } from '@modern-js/plugin-module-import'; -import { moduleTools, defineConfig } from '@modern-js/module-tools'; +import { moduleTools, defineConfig } from '@modern-js/module-tools'; export default defineConfig({ plugins: [ moduleTools(), modulePluginImport({ - pluginImport: [{ - libraryName: 'foo', - customName: 'foo/es/{{ kebabCase member }}', - }], + pluginImport: [ + { + libraryName: 'foo', + customName: 'foo/es/{{ kebabCase member }}', + }, + ], }), ], }); diff --git a/packages/document/module-doc/docs/zh/api/config/build-config.md b/packages/document/module-doc/docs/zh/api/config/build-config.md index 49d835048f54..af7ac6287cd4 100644 --- a/packages/document/module-doc/docs/zh/api/config/build-config.md +++ b/packages/document/module-doc/docs/zh/api/config/build-config.md @@ -2,9 +2,20 @@ sidebar_position: 1 --- -# BuildConfig +# buildConfig -本章节描述了 Module Tools 关于构建的所有配置 +`buildConfig` 是一个用来描述如何编译、生成构建产物的配置项，它包含了构建的所有配置。 + +- 类型：`object | object[]` +- 默认值: `undefined` + +:::tip +在开始使用 `buildConfig` 之前，请先阅读以下文档来了解其作用： + +- [修改输出产物](/guide/basic/modify-output-product.html) +- [深入理解构建](/guide/advance/in-depth-about-build.html) + +::: ## alias @@ -110,7 +121,7 @@ export default defineConfig({ 打包时将 SVG 作为一个 React 组件处理，options 参考 [svgr](https://react-svgr.com/docs/options/)，另外还支持了 `include` 和 `exclude` 两个配置项，用于匹配需要处理的 SVG 文件。 -- 类型： `boolean | Object` +- 类型： `boolean | object` - 默认值： `false` 开启 svgr 功能后，可以使用默认导出的方式将 SVG 当做组件使用。 @@ -161,7 +172,7 @@ declare module '*.svg' { 自动外置项目的 `"dependencies"` 和 `"peerDependencies"`，不会将其打包到最终的 bundle 产物中。 -- 类型： `boolean | Object` +- 类型： `boolean | object` - 默认值： `true` 当我们希望关闭对于第三方依赖的默认处理行为时候，可以通过以下方式来实现： @@ -213,7 +224,7 @@ export default defineConfig({ 将文件或目录拷贝到指定位置。 -- 类型： `Object` +- 类型： `object` ```js modern.config.ts export default defineConfig({ @@ -295,7 +306,7 @@ export default defineConfig({ 类型文件生成的相关配置，默认情况会生成。 -- 类型： `false | Object` +- 类型： `false | object` - 默认值： ```js @@ -612,7 +623,7 @@ export default defineConfig({ 使用 esbuild 或者 terser 压缩代码，也可以传入 [terserOptions](https://github.com/terser/terser#minify-options)。 -- 类型： `'terser' | 'esbuild' | false | Object` +- 类型： `'terser' | 'esbuild' | false | object` - 默认值： `false` ```js modern.config.ts @@ -724,8 +735,8 @@ export default defineConfig({ 设置源码的格式。默认情况下，会将源码作为 EsModule 进行处理。当源码使用的是 CommonJS 的时候，需要设置 `commonjs`。 -- 类型：`commonjs` | `module` -- 默认值：`module` +- 类型：`'commonjs' | 'module'` +- 默认值：`'module'` ## splitting @@ -746,7 +757,7 @@ less 相关配置。 详细配置参考 [less](https://less.bootcss.com/usage/#less-options)。 -- 类型： `Object` +- 类型： `object` - 默认值： `{ javascriptEnabled: true }` ## style.less.additionalData @@ -772,10 +783,10 @@ export default defineConfig({ 配置 `Less` 使用的实现库，在不指定的情况下，使用的内置版本是 `4.1.3`。 -- 类型： `string | Object` +- 类型： `string | object` - 默认值： `undefined` -`Object` 类型时，指定 `Less` 的实现库 +设置 `object` 类型时，可以指定 `Less` 的实现库。 ```js modern.config.ts export default defineConfig({ @@ -811,7 +822,7 @@ Sass 相关配置。 详细配置参考 [node-sass](https://github.com/sass/node-sass#options) -- 类型： `Object` +- 类型： `object` - 默认值： `{}` ## style.sass.additionalData @@ -838,10 +849,10 @@ export default defineConfig({ 配置 `Sass` 使用的实现库，在不指定的情况下，使用的内置版本是 `1.5.4`。 -- 类型： `string | Object` +- 类型： `string | object` - 默认值： `undefined` -`Object` 类型时，指定 `Sass` 的实现库 +设置为 `object` 类型时，可以指定 `Sass` 的实现库。 ```js modern.config.ts export default defineConfig({ @@ -953,9 +964,9 @@ style_inject_es_default(css_248z); ## style.modules -CSS Modules 配置 +CSS Modules 配置。 -- 类型： `Object` +- 类型： `object` - 默认值： `{}` 一个常用的配置是 `localsConvention`，它可以改变 CSS Modules 的类名生成规则。 @@ -980,7 +991,7 @@ export default defineConfig({ } ``` -你可以使用 `styles.boxTitle` 来访问 +你可以使用 `styles.boxTitle` 来访问。 详细配置查看 [postcss-modules](https://github.com/madyankin/postcss-modules#usage) @@ -988,7 +999,7 @@ export default defineConfig({ Tailwind CSS 相关配置。 -- 类型： `Object | Function` +- 类型： `object | Function` - 默认值： `见下方配置详情`
@@ -1009,7 +1020,7 @@ const tailwind = { }; ``` -值为 `Object` 类型时，与默认配置通过 `Object.assign` 合并。 +值为 `object` 类型时，与默认配置通过 `Object.assign` 合并。 值为 `Function` 类型时，函数返回的对象与默认配置通过 `Object.assign` 合并。 @@ -1054,7 +1065,7 @@ export default defineConfig({ 提供与 babel-plugin-import 等价的能力和配置，基于 SWC 实现。 -- 类型：`Array` +- 类型：`object[]` - 默认值：`[]` 数组元素为一个 babel-plugin-import 的配置对象。配置对象可以参考 [options](https://github.com/umijs/babel-plugin-import#options)。 @@ -1077,7 +1088,7 @@ export default defineConfig({ ### 注意事项 -参考[【Import 插件——注意事项】](plugins/official-list/plugin-import.html#注意事项) +参考[「Import 插件——注意事项」](plugins/official-list/plugin-import.html#注意事项) ## umdGlobals @@ -1103,7 +1114,7 @@ export default defineConfig({ 指定 UMD 产物的模块名。 -- 类型： `string` | `Function` +- 类型： `string | Function` - 默认值： `name => name` ```js modern.config.ts diff --git a/packages/document/module-doc/docs/zh/api/config/build-preset.mdx b/packages/document/module-doc/docs/zh/api/config/build-preset.mdx index 2fadc63764a1..f7648fd99adb 100644 --- a/packages/document/module-doc/docs/zh/api/config/build-preset.mdx +++ b/packages/document/module-doc/docs/zh/api/config/build-preset.mdx @@ -2,7 +2,7 @@ sidebar_position: 2 --- -# BuildPreset +# buildPreset 构建的预设字符串或者预设函数。提供开箱即用的构建配置。 diff --git a/packages/document/module-doc/docs/zh/api/config/design-system.md b/packages/document/module-doc/docs/zh/api/config/design-system.md index da7595cffb93..bb930d1ea0de 100644 --- a/packages/document/module-doc/docs/zh/api/config/design-system.md +++ b/packages/document/module-doc/docs/zh/api/config/design-system.md @@ -2,15 +2,15 @@ sidebar_position: 3 --- -# DesignSystem +# designSystem -本章描述了有关 designSystem 相关的配置 +本章描述了有关 designSystem 相关的配置。 :::tip 需要先通过 `pnpm run new` 启用 Tailwind CSS 功能。 ::: -- 类型：`Object` +- 类型：`object` - 默认值: `见下方配置详情`。
diff --git a/packages/document/module-doc/docs/zh/api/config/dev.md b/packages/document/module-doc/docs/zh/api/config/dev.md index ed959d8c8e1b..3aa7a710aa00 100644 --- a/packages/document/module-doc/docs/zh/api/config/dev.md +++ b/packages/document/module-doc/docs/zh/api/config/dev.md @@ -2,16 +2,18 @@ sidebar_position: 3 --- -# Dev Config +# dev 本章节描述了 Module Tools 关于调试工具相关的所有配置。 -``` ts +```ts export default { dev: { - storybook: {/* Storybook Config */}, + storybook: { + /* Storybook Config */ + }, }, -} +}; ``` ## storybook @@ -21,36 +23,34 @@ export default { - 开启 Storybook 调试功能或者安装 `@modern-js/plugin-storybook` 插件。 - 注册 `@modern-js/plugin-storybook` 插件。 -> 关于如何开启 Storybook 调试功能，可以参考：[【Storybook 调试】](guide/basic/use-micro-generator#storybook-调试) - - +> 关于如何开启 Storybook 调试功能，可以参考：[「Storybook 调试」](guide/basic/use-micro-generator#storybook-调试) ### storybook.webpack -- 类型：`Object` | `Function` | `undefined` - +- 类型：`object | Function | undefined` - 默认值：`undefined` -``` ts +```ts export default { dev: { storybook: { webpack(config) { return config; }, - } - } -} + }, + }, +}; ``` -你可以通过 `dev.storybook.webpack` 来修改 Storybook Preview-iframe 的 webpack 配置。使用方式可以参考 Modern.js Builder 的 [`tools.webpack`](https://modernjs.dev/builder/api/config-tools.html#tools.webpack) 配置。 +你可以通过 `dev.storybook.webpack` 来修改 Storybook Preview-iframe 的 webpack 配置。使用方式可以参考 Modern.js Builder 的 [`tools.webpack`](https://modernjs.dev/builder/api/config-tools.html#toolswebpack) 配置。 ![Storybook](https://storybook.js.org/71522ac365feaf3338d7c242e53378f6/manager-preview.png) -:::tip -对于 Storybook Manager app 部分的 webpack 配置，可以通过增加 `./config/storybook/main.js` 文件进行配置。 +#### 配置 Manager App + +对于 Storybook Manager App 部分的 webpack 配置，可以通过增加 `./config/storybook/main.js` 文件进行配置。 -``` js +```js // ./config/storybook/main.js module.exports = { @@ -61,25 +61,22 @@ module.exports = { }, }; ``` -::: - ### storybook.webpackChain -- 类型：`Function` | `undefined` - +- 类型：`Function | undefined` - 默认值：`undefined` -``` ts +```ts export default { dev: { storybook: { webpackChain(chain) { return chain; }, - } - } -} + }, + }, +}; ``` -你可以通过 `dev.storybook.webpackChain` 来修改 Storybook Preview-iframe 的 webpack 配置。使用方式可以参考 Modern.js Builder 的 [`tools.webpackChain`](https://modernjs.dev/builder/api/config-tools.html#tools.webpackchain) 配置。 +你可以通过 `dev.storybook.webpackChain` 来修改 Storybook Preview-iframe 的 webpack 配置。使用方式可以参考 Modern.js Builder 的 [`tools.webpackChain`](https://modernjs.dev/builder/api/config-tools.html#toolswebpackchain) 配置。 diff --git a/packages/document/module-doc/docs/zh/api/config/plugins.md b/packages/document/module-doc/docs/zh/api/config/plugins.md index fb787cc896d9..ecb9ae4321a2 100644 --- a/packages/document/module-doc/docs/zh/api/config/plugins.md +++ b/packages/document/module-doc/docs/zh/api/config/plugins.md @@ -2,17 +2,62 @@ sidebar_position: 4 --- -# Plugins +# plugins 本章介绍注册 Module Tools 插件的配置。 -- 类型：`Array` +- 类型：`ModuleToolsPlugin[]` +- 默认值：`undefined` + +## 插件执行顺序 + +默认情况下，自定义插件会按照 `plugins` 数组的顺序依次执行，Module Tools 内置插件的执行时机早于自定义插件。 + +当插件内部使用了控制顺序的相关字段，比如 `pre`、`post` 时，会基于声明的字段对执行顺序进行调整，详见 [插件之间的关系](https://modernjs.dev/guides/topic-detail/framework-plugin/relationship)。 + +## 开发插件 + +关于如何编写插件，可以查看[「插件编写指南」](/plugins/guide/getting-started)。 + +## 示例 + +### 使用 npm 上的插件 + +使用 npm 上的插件，需要通过包管理器安装插件，并通过 import 引入。 + +```js modern.config.ts +import { myPlugin } from 'my-plugin'; + +export default defineConfig({ + plugins: [myPlugin()], +}); +``` + +#### 使用本地插件 + +使用本地代码仓库中的插件，直接通过相对路径 import 引入即可。 ```js modern.config.ts -import { examplePlugin } from './plugins/example'; +import { myPlugin } from './plugins/myPlugin'; + export default defineConfig({ - plugins: [examplePlugin()], + plugins: [myPlugin()], }); ``` -关于如何编写插件，可以查看[【插件编写指南】](/plugins/guide/getting-started)。 +### 插件配置项 + +如果插件提供了一些自定义的配置项，你可以通过插件函数的参数传入配置。 + +```js modern.config.ts +import { myPlugin } from 'my-plugin'; + +export default defineConfig({ + plugins: [ + myPlugin({ + foo: 1, + bar: 2, + }), + ], +}); +``` diff --git a/packages/document/module-doc/docs/zh/api/config/testing.md b/packages/document/module-doc/docs/zh/api/config/testing.md index 7fe39823ad6c..25136a95f967 100644 --- a/packages/document/module-doc/docs/zh/api/config/testing.md +++ b/packages/document/module-doc/docs/zh/api/config/testing.md @@ -2,7 +2,7 @@ sidebar_position: 5 --- -# Testing +# testing 本章描述了测试相关的配置。 @@ -12,10 +12,10 @@ sidebar_position: 5 ## jest -- 类型： `Object | Function` +- 类型： `object | Function` - 默认值：`{}` -对应 [Jest](https://jestjs.io/docs/configuration) 的配置，当为 `Object` 类型时，可以配置 Jest 所支持的所有底层配置 。 +对应 [Jest](https://jestjs.io/docs/configuration) 的配置，当为 `object` 类型时，可以配置 Jest 所支持的所有底层配置 。 ```js modern.config.ts import { defineConfig } from '@modern-js/module-tools'; diff --git a/packages/document/module-doc/docs/zh/guide/advance/build-umd.mdx b/packages/document/module-doc/docs/zh/guide/advance/build-umd.mdx index 7f070612dc8c..4df62034cbd4 100644 --- a/packages/document/module-doc/docs/zh/guide/advance/build-umd.mdx +++ b/packages/document/module-doc/docs/zh/guide/advance/build-umd.mdx @@ -22,7 +22,7 @@ export default defineConfig({ ## umd 产物的第三方依赖处理 -在 [【如何处理第三方依赖】](/guide/advance/external-dependency) 章节中，我们知道可以通过 [`autoExternals`](/api/config/build-config#autoexternal) 和 [`externals`](/api/config/build-config#externals) API 来控制项目是否对第三方依赖打包。 +在 [「如何处理第三方依赖」](/guide/advance/external-dependency) 章节中，我们知道可以通过 [`autoExternals`](/api/config/build-config#autoexternal) 和 [`externals`](/api/config/build-config#externals) API 来控制项目是否对第三方依赖打包。 因此在构建 umd 产物的过程中，我们也可以这样使用： diff --git a/packages/document/module-doc/docs/zh/guide/basic/before-getting-started.md b/packages/document/module-doc/docs/zh/guide/basic/before-getting-started.md index ab6b7dc78ffd..f838c9d35fca 100644 --- a/packages/document/module-doc/docs/zh/guide/basic/before-getting-started.md +++ b/packages/document/module-doc/docs/zh/guide/basic/before-getting-started.md @@ -14,7 +14,7 @@ sidebar_position: 1 npm 是 NodeJS 的标准软件包管理器。它一开始的用途是用于下载和管理 NodeJS 包的依赖关系，但后来它逐渐变成为一个用于前端 JavaScript 的工具。 -**如果你已经对 npm 和 npm 包的使用方式有所了解，那么可以直接跳到[【npm 包管理器】](/guide/basic/before-getting-started#npm-包管理器)部分。** +**如果你已经对 npm 和 npm 包的使用方式有所了解，那么可以直接跳到[「npm 包管理器」](/guide/basic/before-getting-started#npm-包管理器)部分。** ## npm 包类型项目 diff --git a/packages/document/module-doc/docs/zh/guide/basic/command-preview.md b/packages/document/module-doc/docs/zh/guide/basic/command-preview.md index 550713411f9d..992e4e1e0e85 100644 --- a/packages/document/module-doc/docs/zh/guide/basic/command-preview.md +++ b/packages/document/module-doc/docs/zh/guide/basic/command-preview.md @@ -2,9 +2,9 @@ sidebar_position: 2 --- -# 命令预览 +# CLI 命令 -模块工程项目可以使用的命令： +Module Tools 项目可以使用的 CLI 命令如下： ## `modern build` @@ -60,7 +60,7 @@ Options: - Tailwind CSS 支持 - Modern.js Runtime API -关于这些功能，可以通过[【使用微生成器】](/guide/basic/use-micro-generator) 章节了解更多。 +关于这些功能，可以通过[「使用微生成器」](/guide/basic/use-micro-generator) 章节了解更多。 ## `modern dev` diff --git a/packages/document/module-doc/docs/zh/guide/basic/modify-output-product.md b/packages/document/module-doc/docs/zh/guide/basic/modify-output-product.md index 2a1aad32adfb..16332cf2db99 100644 --- a/packages/document/module-doc/docs/zh/guide/basic/modify-output-product.md +++ b/packages/document/module-doc/docs/zh/guide/basic/modify-output-product.md @@ -6,20 +6,24 @@ sidebar_position: 3 ## 默认输出产物 -当在初始化的项目里使用 `modern build` 命令的时候，会根据 Module Tools 默认支持的配置生成相应的产物。默认支持的配置具体如下： +当你在初始化的项目里使用 `modern build` 命令的时候，Module Tools 会根据当前配置内容，生成相应的构建产物。 + +默认的配置内容如下： ```ts title="modern.config.ts" import { moduleTools, defineConfig } from '@modern-js/module-tools'; export default defineConfig({ + // 注册 Module Tools 的 CLI 工具 plugins: [moduleTools()], + // 指定构建预设配置 buildPreset: 'npm-library', }); ``` **默认生成产物具有以下特点**： -- 会生成[CommonJS](https://nodejs.org/api/modules.html#modules-commonjs-modules)和[ESM](https://nodejs.org/api/esm.html#modules-ecmascript-modules)两份产物。 +- 会生成 [CommonJS](https://nodejs.org/api/modules.html#modules-commonjs-modules) 和 [ESM](https://nodejs.org/api/esm.html#modules-ecmascript-modules) 两份产物。 - 代码语法支持到 `ES6` ,更高级的语法将会被转换。 - 所有的代码经过打包变成了一个文件，即进行了 **bundle** 处理。 - 产物输出根目录为项目下的 `dist` 目录，类型文件输出的目录为 `dist/types`。 @@ -29,7 +33,7 @@ export default defineConfig({ 1. `buildPreset` 是什么？ 2. 产物的这些特点是由什么决定的？ -那么接下来首先解释一下 `buildPreset`。 +接下来，我们首先来了解一下 `buildPreset`。 ## 构建预设 @@ -70,10 +74,17 @@ export default defineConfig({ }); ``` -在上面的代码实现中，`preset.NPM_LIBRARY` 与预设字符串 `"npm-library"` 是相对应的，它代表着 `"npm-library"` 等价的多组构建相关的配置。我们通过 `map` 方法遍历了 `NPM_LIBRARY` 这个数组，在这个数组中包含了多个 `buildConfig` 对象。我们将原本的 `buildConfig` 对象进行了浅拷贝，并修改了浅拷贝后 `target` 的值，将它指定为 `es5`。 +在上面的代码实现中，`preset.NPM_LIBRARY` 与预设字符串 `"npm-library"` 是相对应的，它代表与 `"npm-library"` 等价的多个构建相关的配置。 + +我们通过 `map` 方法遍历了 `NPM_LIBRARY` 这个数组，在这个数组中包含了多个 `buildConfig` 对象。我们将原本的 `buildConfig` 对象进行了浅拷贝，并修改了浅拷贝后 `target` 的值，将它指定为 `es5`。 + +如果你想了解 `preset.NPM_LIBRARY` 具体包含的内容，可以通过 [BuildPreset API](/api/config/build-preset) 查看。 + +此外，在 `preset` 对象下，不仅包含了 `NPM_LIBRARY`，也包含了其他类似的常量。 -> 关于 `preset.NPM_LIBRARY` 具体对应的值，可以通过 [BuildPreset API](/api/config/build-preset) 查看。在 `preset` 对象下不仅包含了 `NPM_LIBRARY`，还包含了其他类似的常量。 -> 我们不仅可以使用 `preset.NPM_LIBRARY` 来获取 `"npm-library"` 对应的构建配置，也可以使用 `preset['npm-library']` 这样的方式。 +:::tip +我们不仅可以使用 `preset.NPM_LIBRARY` 来获取 `"npm-library"` 对应的构建配置，也可以使用 `preset['npm-library']` 这样的方式。 +::: 那么这里的 `buildConfig` 对象是什么呢？之前提到的构建产物特点又是根据什么呢？ @@ -81,7 +92,7 @@ export default defineConfig({ ## 构建配置（对象） -**`buildConfig` 是一个用来描述如何编译、生成构建产物的配置对象**。在最开始提到的关于“_构建产物的特点_”，其实都是 `buildConfig` 所支持的属性。目前所支持的属性覆盖了大部分模块类型项目在构建产物时的需求，`buildConfig` 不仅包含一些产物所具备的属性，也包含了构建产物所需要的一些特性功能。接下来从分类的角度简单罗列一下： +**`buildConfig` 是一个用来描述如何编译、生成构建产物的配置项**。在最开始提到的关于“_构建产物的特点_”，其实都是 `buildConfig` 所支持的属性。目前所支持的属性覆盖了大部分模块类型项目在构建产物时的需求，`buildConfig` 不仅包含一些产物所具备的属性，也包含了构建产物所需要的一些特性功能。接下来从分类的角度简单罗列一下： **构建产物的基本属性包括：** diff --git a/packages/document/module-doc/docs/zh/guide/best-practices/components.mdx b/packages/document/module-doc/docs/zh/guide/best-practices/components.mdx index c29e0ef586c2..48ba01c7afa0 100644 --- a/packages/document/module-doc/docs/zh/guide/best-practices/components.mdx +++ b/packages/document/module-doc/docs/zh/guide/best-practices/components.mdx @@ -609,7 +609,7 @@ Tailwind CSS 提供了 [`@apply`](https://v2.tailwindcss.com/docs/functions-and- 对于以下代码，在 bundle 和 bundleless 两种模式下，构建产物会有很大区别。 -> 所谓 bundle 和 bundleless 可以查看 [【Bundle 和 Bundleless】](/guide/advance/in-depth-about-build#bundle-和-bundleless) +> 所谓 bundle 和 bundleless 可以查看 [「Bundle 和 Bundleless」](/guide/advance/in-depth-about-build#bundle-和-bundleless) ```tsx ./src/index.tsx import 'tailwindcss/utilities.css'; @@ -786,8 +786,8 @@ export default defineConfig({ ## 测试组件 -关于如何对组件进行测试，可以参考 [【测试项目】](/guide/basic/test-your-project)。 +关于如何对组件进行测试，可以参考 [「测试项目」](/guide/basic/test-your-project)。 ## 发布组件 -推荐使用模块工程提供版本发布功能，可以参考 [【版本管理与发布】](/guide/basic/publish-your-project)。 +推荐使用模块工程提供版本发布功能，可以参考 [「版本管理与发布」](/guide/basic/publish-your-project)。 diff --git a/packages/document/module-doc/docs/zh/plugins/guide/setup-function.mdx b/packages/document/module-doc/docs/zh/plugins/guide/setup-function.mdx index cbffb2eafc0d..828fc3c2237d 100644 --- a/packages/document/module-doc/docs/zh/plugins/guide/setup-function.mdx +++ b/packages/document/module-doc/docs/zh/plugins/guide/setup-function.mdx @@ -4,7 +4,7 @@ sidebar_position: 3 # Setup 函数 -在[【插件对象】](/plugins/guide/plugin-object) 部分我们知道插件对象包含了一个 `setup` 函数，该函数不仅包含了一个 `api` 对象参数，同时还可以返回一个 Hooks 对象。 +在[「插件对象」](/plugins/guide/plugin-object) 部分我们知道插件对象包含了一个 `setup` 函数，该函数不仅包含了一个 `api` 对象参数，同时还可以返回一个 Hooks 对象。 ## 插件 API 对象 diff --git a/packages/document/module-doc/docs/zh/plugins/official-list/plugin-banner.md b/packages/document/module-doc/docs/zh/plugins/official-list/plugin-banner.md index 0dfcf7e603e2..7036fb90a830 100644 --- a/packages/document/module-doc/docs/zh/plugins/official-list/plugin-banner.md +++ b/packages/document/module-doc/docs/zh/plugins/official-list/plugin-banner.md @@ -39,7 +39,7 @@ export default defineConfig({ ``` :::tip -注意：CSS 的注释不支持 `//comment` 这样的写法。详见[【CSS 注释】](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Comments) +注意：CSS 的注释不支持 `//comment` 这样的写法。详见[「CSS 注释」](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Comments) ::: ## 示例 diff --git a/packages/document/module-doc/docs/zh/plugins/official-list/plugin-import.mdx b/packages/document/module-doc/docs/zh/plugins/official-list/plugin-import.mdx index 2b9a32a61eef..5acefea1379f 100644 --- a/packages/document/module-doc/docs/zh/plugins/official-list/plugin-import.mdx +++ b/packages/document/module-doc/docs/zh/plugins/official-list/plugin-import.mdx @@ -3,7 +3,7 @@ 提供与 [babel-plugin-import](https://github.com/umijs/babel-plugin-import) 等价的能力和配置，基于 [SWC](https://swc.rs/) 实现。 :::tip -从 @modern-js/module-tools 2.16.0 版本开始，该插件功能内置在 module-tools 中，由 [`transformImport`](api/config/build-config.html#transformimport) +从 `@modern-js/module-tools` v2.16.0 版本开始，该插件功能内置在 Module Tools 中，由 [`transformImport`](api/config/build-config.html#transformimport) 配置提供。 ::: @@ -34,10 +34,12 @@ export default defineConfig({ plugins: [ moduleTools(), modulePluginImport({ - pluginImport: [{ - libraryName: 'antd', - style: true, - }], + pluginImport: [ + { + libraryName: 'antd', + style: true, + }, + ], }), ], }); @@ -47,17 +49,17 @@ export default defineConfig({ ## 配置 -* **类型：** +- **类型：** ```ts type Options = { pluginImport?: ImportItem[]; -} +}; ``` ### pluginImport -* 类型：`Array` +- 类型：`object[]` 其中数组元素为一个 babel-plugin-import 的配置对象。配置对象可以参考 [options](https://github.com/umijs/babel-plugin-import#options)。 @@ -76,7 +78,7 @@ export default defineConfig({ { libraryName: 'foo', style: true, - } + }, ], }), ], @@ -117,10 +119,12 @@ export default defineConfig({ plugins: [ moduleTools(), modulePluginImport({ - pluginImport: [{ - libraryName: 'foo', - customName: 'foo/es/{{ member }}' - }], + pluginImport: [ + { + libraryName: 'foo', + customName: 'foo/es/{{ member }}', + }, + ], }), ], }); @@ -138,16 +142,19 @@ export default defineConfig({ plugins: [ moduleTools(), modulePluginImport({ - pluginImport: [{ - libraryName: 'foo', - customName: 'foo/es/{{ member }}' - }], + pluginImport: [ + { + libraryName: 'foo', + customName: 'foo/es/{{ member }}', + }, + ], }), ], }); ``` --- + 转换后: ```ts @@ -168,10 +175,12 @@ export default defineConfig({ plugins: [ moduleTools(), modulePluginImport({ - pluginImport: [{ - libraryName: 'foo', - customName: 'foo/es/{{ kebabCase member }}', - }], + pluginImport: [ + { + libraryName: 'foo', + customName: 'foo/es/{{ kebabCase member }}', + }, + ], }), ], });