npm - @modern-js/main-doc - Versions diffs - 2.69.7 → 3.0.0-alpha.1 - Mend

@modern-js/main-doc 2.69.7 → 3.0.0-alpha.1

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

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

@@ -1,253 +0,0 @@
----
-title: webpackChain
----
-# tools.webpackChain
-import { Badge } from '@theme';
-<Badge type="danger">Webpack Only</Badge>
-- **Type:** `Function | undefined`
-- **Default:** `undefined`
-You can modify the webpack configuration by configuring `tools.webpackChain` which is type of `Function`. The function receives two parameters, the first is the original webpack chain object, and the second is an object containing some utils.
-Compared with `tools.webpack`, **webpack-chain not only supports chained calls, but also can locate built-in Rule or Plugin based on aliases, so as to achieve precise config modification**. We recommend using `tools.webpackChain` instead of `tools.webpack`.
-> `tools.webpackChain` is executed earlier than tools.webpack and thus will be overridden by changes in `tools.webpack`.
-:::tip
-Modern.js has deprecated support for webpack, which will be removed in the next major version. It is recommended to use Rspack as the bundler.
-:::
-### Utils
-#### env
-- **Type:** `'development' | 'production' | 'test'`
-The `env` parameter can be used to determine whether the current environment is development, production or test. For example:
-```js
-export default {
-  tools: {
-    webpackChain: (chain, { env }) => {
-      if (env === 'development') {
-        chain.devtool('cheap-module-eval-source-map');
-      }
-    },
-  },
-};
-```
-#### isProd
-- **Type:** `boolean`
-The `isProd` parameter can be used to determine whether the current environment is production. For example:
-```js
-export default {
-  tools: {
-    webpackChain: (chain, { isProd }) => {
-      if (isProd) {
-        chain.devtool('source-map');
-      }
-    },
-  },
-};
-```
-#### target
-- **Type:** `'web' | 'node' | 'modern-web' | 'web-worker'`
-The `target` parameter can be used to determine the current environment. For example:
-```js
-export default {
-  tools: {
-    webpackChain: (chain, { target }) => {
-      if (target === 'node') {
-        // ...
-      }
-    },
-  },
-};
-```
-#### isServer
-- **Type:** `boolean`
-Determines whether the target environment is `node`, equivalent to `target === 'node'`.
-```js
-export default {
-  tools: {
-    webpackChain: (chain, { isServer }) => {
-      if (isServer) {
-        // ...
-      }
-    },
-  },
-};
-```
-#### isWebWorker
-- **Type:** `boolean`
-Determines whether the target environment is `web-worker`, equivalent to `target === 'web-worker'`.
-```js
-export default {
-  tools: {
-    webpackChain: (chain, { isWebWorker }) => {
-      if (isWebWorker) {
-        // ...
-      }
-    },
-  },
-};
-```
-#### webpack
-- **Type:** `typeof import('webpack')`
-The webpack instance. For example:
-```js
-export default {
-  tools: {
-    webpackChain: (chain, { webpack }) => {
-      chain.plugin('my-progress').use(webpack.ProgressPlugin);
-    },
-  },
-};
-```
-#### HtmlWebpackPlugin
-- **Type:** `typeof import('html-webpack-plugin')`
-The HtmlWebpackPlugin instance:
-```js
-export default {
-  tools: {
-    webpackChain: (chain, { HtmlWebpackPlugin }) => {
-      console.log(HtmlWebpackPlugin);
-    },
-  },
-};
-```
-#### CHAIN_ID
-Some common Chain IDs are predefined in the Modern.js, and you can use these IDs to locate the built-in Rule or Plugin.
-:::tip
-Please note that some of the rules or plugins listed below are not available by default. They will only be included in the webpack configuration when you enable specific options or register certain plugins.
-For example, the `RULE.STYLUS` rule exists only when the Stylus plugin is registered.
-:::
-#### CHAIN_ID.RULE
-| ID            | Description                                                                                |
-| ------------- | ------------------------------------------------------------------------------------------ |
-| `RULE.JS`     | Rule for `js`                                                                              |
-| `RULE.TS`     | Rule for `ts`                                                                              |
-| `RULE.CSS`    | Rule for `css`                                                                             |
-| `RULE.LESS`   | Rule for `less`                                                                            |
-| `RULE.SASS`   | Rule for `sass`                                                                            |
-| `RULE.STYLUS` | Rule for `stylus`(requires [Stylus plugin](https://rsbuild.rs/plugins/list/plugin-stylus)) |
-| `RULE.SVG`    | Rule for `svg`                                                                             |
-| `RULE.PUG`    | Rule for `pug`                                                                             |
-| `RULE.TOML`   | Rule for `toml`                                                                            |
-| `RULE.YAML`   | Rule for `yaml`                                                                            |
-| `RULE.WASM`   | Rule for `WASM`                                                                            |
-| `RULE.NODE`   | Rule for `node`                                                                            |
-| `RULE.FONT`   | Rule for `font`                                                                            |
-| `RULE.IMAGE`  | Rule for `image`                                                                           |
-| `RULE.MEDIA`  | Rule for `media`                                                                           |
-#### CHAIN_ID.ONE_OF
-`ONE_OF.XXX` can match a certain type of rule in the rule array.
-| ID                  | Description                                                        |
-| ------------------- | ------------------------------------------------------------------ |
-| `ONE_OF.SVG`        | Rules for SVG, automatic choice between data URI and separate file |
-| `ONE_OF.SVG_URL`    | Rules for SVG, output as a separate file                           |
-| `ONE_OF.SVG_INLINE` | Rules for SVG, inlined into bundles as data URIs                   |
-| `ONE_OF.SVG_ASSETS` | Rules for SVG, automatic choice between data URI and separate file |
-#### CHAIN_ID.USE
-`USE.XXX` can match a certain loader.
-| ID                                | Description                                    |
-| --------------------------------- | ---------------------------------------------- |
-| `USE.TS`                          | correspond to `ts-loader`                      |
-| `USE.CSS`                         | correspond to `css-loader`                     |
-| `USE.LESS`                        | correspond to `less-loader`                    |
-| `USE.SASS`                        | correspond to `sass-loader`                    |
-| `USE.STYLUS`                      | correspond to `stylus-loader`                  |
-| `USE.PUG`                         | correspond to `pug-loader`                     |
-| `USE.VUE`                         | correspond to `vue-loader`                     |
-| `USE.TOML`                        | correspond to `toml-loader`                    |
-| `USE.YAML`                        | correspond to `yaml-loader`                    |
-| `USE.NODE`                        | correspond to `node-loader`                    |
-| `USE.URL`                         | correspond to `url-loader`                     |
-| `USE.SVGR`                        | correspond to `@svgr/webpack`                  |
-| `USE.BABEL`                       | correspond to `babel-loader`                   |
-| `USE.STYLE`                       | correspond to `style-loader`                   |
-| `USE.POSTCSS`                     | correspond to `postcss-loader`                 |
-| `USE.CSS_MODULES_TS`              | correspond to `css-modules-typescript-loader`  |
-| `USE.MINI_CSS_EXTRACT`            | correspond to `mini-css-extract-plugin.loader` |
-| `USE.RESOLVE_URL_LOADER_FOR_SASS` | correspond to `resolve-url-loader`             |
-#### CHAIN_ID.PLUGIN
-`PLUGIN.XXX` can match a certain webpack plugin.
-| ID                             | Description                                                                                                    |
-| ------------------------------ | -------------------------------------------------------------------------------------------------------------- |
-| `PLUGIN.HMR`                   | correspond to `HotModuleReplacementPlugin`                                                                     |
-| `PLUGIN.COPY`                  | correspond to `CopyWebpackPlugin`                                                                              |
-| `PLUGIN.HTML`                  | correspond to `HtmlWebpackPlugin`, you need to splice the entry name when using: `${PLUGIN.HTML}-${entryName}` |
-| `PLUGIN.DEFINE`                | correspond to `DefinePlugin`                                                                                   |
-| `PLUGIN.IGNORE`                | correspond to `IgnorePlugin`                                                                                   |
-| `PLUGIN.BANNER`                | correspond to `BannerPlugin`                                                                                   |
-| `PLUGIN.PROGRESS`              | correspond to `Webpackbar`                                                                                     |
-| `PLUGIN.APP_ICON`              | correspond to `AppIconPlugin`                                                                                  |
-| `PLUGIN.MANIFEST`              | correspond to `WebpackManifestPlugin`                                                                          |
-| `PLUGIN.TS_CHECKER`            | correspond to `ForkTsCheckerWebpackPlugin`                                                                     |
-| `PLUGIN.INLINE_HTML`           | correspond to `InlineChunkHtmlPlugin`                                                                          |
-| `PLUGIN.BUNDLE_ANALYZER`       | correspond to `WebpackBundleAnalyzer`                                                                          |
-| `PLUGIN.MINI_CSS_EXTRACT`      | correspond to `MiniCssExtractPlugin`                                                                           |
-| `PLUGIN.VUE_LOADER_PLUGIN`     | correspond to `VueLoaderPlugin`                                                                                |
-| `PLUGIN.REACT_FAST_REFRESH`    | correspond to `ReactFastRefreshPlugin`                                                                         |
-| `PLUGIN.NODE_POLYFILL_PROVIDE` | correspond to `ProvidePlugin` for node polyfills                                                               |
-| `PLUGIN.SUBRESOURCE_INTEGRITY` | correspond to `webpack-subresource-integrity`                                                                  |
-| `PLUGIN.ASSETS_RETRY`          | correspond to webpack static asset retry plugin                                                                |
-| `PLUGIN.AUTO_SET_ROOT_SIZE`    | correspond to automatically set root font size plugin                                                          |
-#### CHAIN_ID.MINIMIZER
-`MINIMIZER.XXX` can match a certain minimizer.
-| ID                  | Description                               |
-| ------------------- | ----------------------------------------- |
-| `MINIMIZER.JS`      | correspond to `TerserWebpackPlugin`       |
-| `MINIMIZER.CSS`     | correspond to `CssMinimizerWebpackPlugin` |
-| `MINIMIZER.ESBUILD` | correspond to `ESBuildPlugin`             |
-| `MINIMIZER.SWC`     | correspond to `SwcWebpackPlugin`          |
-### Examples
-For usage examples, please refer to: [Rsbuild - bundlerChain examples](https://rsbuild.rs/guide/basic/configure-rspack#examples).

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

@@ -1,309 +0,0 @@
----
-title: webpack
----
-# tools.webpack
-import { Badge } from '@theme';
-<Badge type="danger">Webpack Only</Badge>
-- **Type:** `Object | Function | undefined`
-- **Default:** `undefined`
-`tools.webpack` is used to configure [webpack](https://webpack.js.org/).
-> `tools.bundlerChain` is also used to modify the webpack configuration, and the function is more powerful. It is recommended to use `tools.bundlerChain` first.
-:::tip
-Modern.js has deprecated support for webpack, which will be removed in the next major version. It is recommended to use Rspack as the bundler.
-:::
-### Object Type
-`tools.webpack` can be configured as an object to be deep merged with the built-in webpack configuration through [webpack-merge](https://github.com/survivejs/webpack-merge).
-For example, add `resolve.alias` configuration:
-```js
-export default {
-  tools: {
-    webpack: {
-      resolve: {
-        alias: {
-          '@util': 'src/util',
-        },
-      },
-    },
-  },
-};
-```
-### Function Type
-`tools.webpack` can be configured as a function. The first parameter of this function is the built-in webpack configuration object, you can modify this object, and then return it. For example:
-```js
-export default {
-  tools: {
-    webpack: config => {
-      config.resolve.alias['@util'] = 'src/util';
-      return config;
-    },
-  },
-};
-```
-:::tip
-The object returned by the `tools.webpack` function is used directly as the final webpack configuration and is not merged with the built-in webpack configuration.
-:::
-### Utils
-The second parameter of this function is an object, which contains some utility functions and properties, as follows:
-#### env
-- **Type:** `'development' | 'production' | 'test'`
-The `env` parameter can be used to determine whether the current environment is development, production or test. For example:
-```js
-export default {
-  tools: {
-    webpack: (config, { env }) => {
-      if (env === 'development') {
-        config.devtool = 'cheap-module-eval-source-map';
-      }
-      return config;
-    },
-  },
-};
-```
-#### isProd
-- **Type:** `boolean`
-The `isProd` parameter can be used to determine whether the current environment is production. For example:
-```js
-export default {
-  tools: {
-    webpack: (config, { isProd }) => {
-      if (isProd) {
-        config.devtool = 'source-map';
-      }
-      return config;
-    },
-  },
-};
-```
-#### target
-- **Type:** `'web' | 'node' | 'modern-web' | 'web-worker'`
-The `target` parameter can be used to determine the current target. For example:
-```js
-export default {
-  tools: {
-    webpack: (config, { target }) => {
-      if (target === 'node') {
-        // ...
-      }
-      return config;
-    },
-  },
-};
-```
-#### isServer
-- **Type:** `boolean`
-Determines whether the target environment is `node`, equivalent to `target === 'node'`.
-```js
-export default {
-  tools: {
-    webpack: (config, { isServer }) => {
-      if (isServer) {
-        // ...
-      }
-      return config;
-    },
-  },
-};
-```
-#### isWebWorker
-- **Type:** `boolean`
-Determines whether the target environment is `web-worker`, equivalent to `target === 'web-worker'`.
-```js
-export default {
-  tools: {
-    webpack: (config, { isWebWorker }) => {
-      if (isWebWorker) {
-        // ...
-      }
-      return config;
-    },
-  },
-};
-```
-#### webpack
-- **Type:** `typeof import('webpack')`
-The webpack instance. For example:
-```js
-export default {
-  tools: {
-    webpack: (config, { webpack }) => {
-      config.plugins.push(new webpack.ProgressPlugin());
-      return config;
-    },
-  },
-};
-```
-#### HtmlWebpackPlugin
-- **Type:** `typeof import('html-webpack-plugin')`
-The HtmlWebpackPlugin instance:
-```js
-export default {
-  tools: {
-    webpack: (chain, { HtmlWebpackPlugin }) => {
-      console.log(HtmlWebpackPlugin);
-    },
-  },
-};
-```
-#### addRules
-- **Type:** `(rules: RuleSetRule | RuleSetRule[]) => void`
-Add additional [webpack rules](https://webpack.js.org/configuration/module/#modulerules).
-For example:
-```ts
-export default {
-  tools: {
-    webpack: (config, { addRules }) => {
-      // add a single rule
-      addRules({
-        test: /\.foo/,
-        loader: require.resolve('foo-loader'),
-      });
-      // Add multiple rules as an array
-      addRules([
-        {
-          test: /\.foo/,
-          loader: require.resolve('foo-loader'),
-        },
-        {
-          test: /\.bar/,
-          loader: require.resolve('bar-loader'),
-        },
-      ]);
-    },
-  },
-};
-```
-#### prependPlugins
-- **Type:** `(plugins: WebpackPluginInstance | WebpackPluginInstance[]) => void`
-Add additional plugins to the head of the internal webpack plugins array, and the plugin will be executed first.
-```ts
-export default {
-  tools: {
-    webpack: (config, { prependPlugins, webpack }) => {
-      // add a single plugin
-      prependPlugins(
-        new webpack.BannerPlugin({
-          banner: 'hello world!',
-        }),
-      );
-      // Add multiple plugins
-      prependPlugins([new PluginA(), new PluginB()]);
-    },
-  },
-};
-```
-#### appendPlugins
-- **Type:** `(plugins: WebpackPluginInstance | WebpackPluginInstance[]) => void`
-Add additional plugins at the end of the internal webpack plugins array, the plugin will be executed last.
-```ts
-export default {
-  tools: {
-    webpack: (config, { appendPlugins, webpack }) => {
-      // add a single plugin
-      appendPlugins([
-        new webpack.BannerPlugin({
-          banner: 'hello world!',
-        }),
-      ]);
-      // Add multiple plugins
-      appendPlugins([new PluginA(), new PluginB()]);
-    },
-  },
-};
-```
-#### removePlugin
-- **Type:** `(name: string) => void`
-Remove the internal webpack plugin, the parameter is the `constructor.name` of the plugin.
-For example, remove the internal [fork-ts-checker-webpack-plugin](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin):
-```ts
-export default {
-  tools: {
-    webpack: (config, { removePlugin }) => {
-      removePlugin('ForkTsCheckerWebpackPlugin');
-    },
-  },
-};
-```
-#### mergeConfig
-- **Type:** `(...configs: WebpackConfig[]) => WebpackConfig`
-Used to merge multiple webpack configs, same as [webpack-merge](https://github.com/survivejs/webpack-merge).
-```ts
-export default {
-  tools: {
-    webpack: (config, { mergeConfig }) => {
-      return mergeConfig(config, {
-        devtool: 'eval',
-      });
-    },
-  },
-};
-```

package/docs/en/guides/deprecated.md DELETED Viewed

@@ -1,17 +0,0 @@
----
-sidebar_position: 10
----
-# Deprecated
-This article will introduce the functions that were previously supported by Modern.js, but have now been deprecated, along with the recommended alternatives.
-## Creating a Monorepo using @modern-js/create
-The Monorepo solution previously provided by Modern.js was implemented based on [pnpm Workspace](https://pnpm.io/workspaces) and did not offer substantial Monorepo management capabilities. In version [v2.53.0](https://github.com/web-infra-dev/modern.js/releases/tag/v2.53.0), the functionality to create Monorepo projects using `@modern-js/create` has been removed. It is recommended to directly use the Monorepo solutions provided by the community.
-## Enabling the test capability with the new command
-The test capability previously provided by Modern.js was a simple wrapper based on Jest, which led to issues such as unintuitive Jest configuration and more complex user configuration. In version [v2.53.0](https://github.com/web-infra-dev/modern.js/releases/tag/v2.53.0), the option to enable the test feature in application and module projects has been removed. It is recommended to directly use the testing solutions provided by the community.
-Previously, Modern.js provided a comprehensive set of ESLint rules, including @modern-js (for Node.js project linting rules) and @modern-js-app (for frontend project linting rules). In version [v2.60.0](https://github.com/web-infra-dev/modern.js/releases/tag/v2.60.0), we officially removed these rule sets. We encourage developers to choose appropriate code standard tools based on their needs, either by directly using ESLint with community-recommended rules or by using Biome to enhance code formatting performance.

package/docs/en/guides/topic-detail/micro-frontend/c01-introduction.mdx DELETED Viewed

@@ -1,27 +0,0 @@
----
-sidebar_position: 1
-title: Introduction
----
-# Introduction
-import MicroFrontend from '@site-docs-en/components/micro-frontend.mdx';
-<MicroFrontend />
-## Keyword
-In the micro frontend, applications are divided into **main application**, and **sub-applications**.
-- Main application: The base project of the micro frontend project, all sub-applications will be loaded by it.
-- Sub-application: An application developed and deployed independently will eventually be loaded by the main application.
-## Features
-- Base on [Garfish](https://www.garfishjs.org/guide)
-- Generator supports
-- Support React component-based reference micro-front-end sub-application
-- Support loading
-- Support main application online and sub-application offline debugging mode
-You can learn how to develop a micro frontend master app in the section [Experience micro frontend](/guides/topic-detail/micro-frontend/c02-development).