### Navigate to React Across Example Directory (Bash)

Source: https://github.com/empjs/official/blob/main/docs/zh/guide/empShare/react-cross-version.mdx

Changes the current directory in the terminal to the specific react-across example project located within the cloned EMP repository. This is necessary before installing dependencies or running the project.

```bash
cd projects/react-across
```

--------------------------------

### Navigate to React Host Project (Bash)

Source: https://github.com/empjs/official/blob/main/docs/zh/guide/empShare/react-esm.mdx

Changes the current directory to the root of the esm-react-host example project within the cloned EMP repository.

```bash
cd projects/esm-react-host
```

--------------------------------

### Running Vue3 Base Project (PNPM)

Source: https://github.com/empjs/official/blob/main/docs/zh/demo/vue3.mdx

Starts the development server for the `vue-3-base` example project using the PNPM package manager. The project will typically be accessible at `http://localhost:9001/`.

```Shell
pnpm dev
```

--------------------------------

### Running Vue3 Project (PNPM)

Source: https://github.com/empjs/official/blob/main/docs/zh/demo/vue3.mdx

Starts the development server for the `vue-3-project` example using the PNPM package manager. The project will typically be accessible at `http://localhost:9002/`.

```Shell
pnpm dev
```

--------------------------------

### Installing Project Dependencies (Shell)

Source: https://github.com/empjs/official/blob/main/docs/zh/guide/framework/vue3.mdx

Navigate to the project root directory after creation and run the install command to download necessary dependencies. PNPM is recommended.

```shell
install
```

--------------------------------

### Install ESLint Config Package (npm)

Source: https://github.com/empjs/official/blob/main/docs/zh/plugin/code/eslint-config-react.mdx

Installs the `@empjs/eslint-config-react` package as a development dependency using npm. This package contains the predefined ESLint rules for React projects.

```npm
npm install @empjs/eslint-config-react -D
```

--------------------------------

### Cloning the EMP Repository (Bash)

Source: https://github.com/empjs/official/blob/main/docs/zh/demo/vue3.mdx

Clones the official EMP framework repository from GitHub to your local machine. This command is the first step to get the example project code.

```Bash
git clone https://github.com/empjs/emp
```

--------------------------------

### Defining EMP Scripts in package.json (JSON)

Source: https://github.com/empjs/official/blob/main/docs/zh/plugin/tool/cli.mdx

Example `scripts` section in a `package.json` file, showing common commands for the EMP build tool like `dev`, `build`, `start`, and `stat`.

```json
  "scripts": {
    "dev": "emp dev",
    "build": "emp build",
    "start": "emp serve",
    "stat": "emp build --analyze",
    "emp": "emp"
  },
```

--------------------------------

### Navigate to React App Project (Bash)

Source: https://github.com/empjs/official/blob/main/docs/zh/guide/empShare/react-esm.mdx

Changes the current directory to the root of the esm-react-app example project within the cloned EMP repository. This is typically done in a separate terminal window.

```bash
cd projects/esm-react-app
```

--------------------------------

### Clone EMP Repository (Bash)

Source: https://github.com/empjs/official/blob/main/docs/zh/guide/empShare/react-cross-version.mdx

Clones the official EMP framework repository from GitHub to your local machine. This repository contains the example projects, including the react-across example.

```bash
git clone https://github.com/empjs/emp
```

--------------------------------

### Navigating to Vue3 Project (Bash)

Source: https://github.com/empjs/official/blob/main/docs/zh/demo/vue3.mdx

Changes the current directory to the `vue-3-project` example within the cloned EMP repository. This is required before running the project example.

```Bash
cd projects/vue-3-project
```

--------------------------------

### Navigating to React18 Demo Directory (Bash)

Source: https://github.com/empjs/official/blob/main/docs/zh/guide/empShare/react.mdx

Changes the current directory to the root of the React18 example projects within the cloned EMP repository. This is necessary before installing dependencies or running the demos.

```bash
cd demos/react18
```

--------------------------------

### Clone EMP Repository (Bash)

Source: https://github.com/empjs/official/blob/main/docs/zh/guide/empShare/react-esm.mdx

Clones the EMP project repository from GitHub to your local machine. This is the first step to obtain the demo code.

```bash
git clone https://github.com/empjs/emp
```

--------------------------------

### Installing Project Dependencies (PNPM)

Source: https://github.com/empjs/official/blob/main/docs/zh/demo/vue3.mdx

Installs all necessary project dependencies using the PNPM package manager. This command should be run from the root directory of the cloned EMP repository after cloning.

```Shell
pnpm install
```

--------------------------------

### Running Emp Vue3 Development Server (Shell)

Source: https://github.com/empjs/official/blob/main/docs/zh/guide/framework/vue3.mdx

After installing dependencies, start the development server to run the Vue3 application locally. The application will typically be available at http://localhost:8000/.

```shell
dev
```

--------------------------------

### Navigating to React App Demo Directory (Bash)

Source: https://github.com/empjs/official/blob/main/docs/zh/guide/empShare/react.mdx

Changes the current directory to the specific `react-app` example project within the React18 demos. This directory contains the configuration files discussed later.

```bash
cd demos/react18/react-app
```

--------------------------------

### Cloning the EMP Repository (Bash)

Source: https://github.com/empjs/official/blob/main/docs/zh/guide/empShare/react.mdx

Clones the official EMP GitHub repository to your local machine. This is the first step to obtain the example projects.

```bash
git clone https://github.com/empjs/emp
```

--------------------------------

### Full HTML Template Example for EMP (HTML)

Source: https://github.com/empjs/official/blob/main/docs/zh/guide/basis/template.mdx

A comprehensive example of an HTML template file for EMP, demonstrating how to include conditional IE comments, meta tags, favicons, viewport settings, CSS links, unsupported browser messages, application mount points, window variables, script tags for chunks, dev server scripts, and Google Analytics tracking. It utilizes `htmlWebpackPlugin.options` and `htmlWebpackPlugin.files` for dynamic content injection.

```HTML
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="ie6" <% if(htmlWebpackPlugin.files.manifest) { %> manifest="<%= htmlWebpackPlugin.files.manifest %>"<% } %>> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="ie7" <% if(htmlWebpackPlugin.files.manifest) { %> manifest="<%= htmlWebpackPlugin.files.manifest %>"<% } %>> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="ie8" <% if(htmlWebpackPlugin.files.manifest) { %> manifest="<%= htmlWebpackPlugin.files.manifest %>"<% } %>> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="ie9" <% if(htmlWebpackPlugin.files.manifest) { %> manifest="<%= htmlWebpackPlugin.files.manifest %>"<% } %>> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="" <% if(htmlWebpackPlugin.files.manifest) { %> manifest="<%= htmlWebpackPlugin.files.manifest %>"<% } %>> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <title><%= htmlWebpackPlugin.options.title || 'Webpack App'%></title>

  <% if (htmlWebpackPlugin.files.favicon) { %>
  <link rel="shortcut icon" href="<%= htmlWebpackPlugin.files.favicon%>">
  <% } %>
  <% if (htmlWebpackPlugin.options.mobile) { %>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <% } %>

  <% for (var css in htmlWebpackPlugin.files.css) { %>
  <link href="<%= htmlWebpackPlugin.files.css[css] %>" rel="stylesheet">
  <% } %>
</head>
<body>
<% if (htmlWebpackPlugin.options.unsupportedBrowser) { %>
<style>.unsupported-browser { display: none; }</style>
<div class="unsupported-browser">
  Sorry, your browser is not supported.  Please upgrade to
  the latest version or switch your browser to use this site.
  See <a href="http://outdatedbrowser.com/">outdatedbrowser.com</a>
  for options.
</div>
<% } %>

<% if (htmlWebpackPlugin.options.appMountId) { %>
<div id="<%= htmlWebpackPlugin.options.appMountId%>"></div>
<% } %>

<% if (htmlWebpackPlugin.options.appMountIds && htmlWebpackPlugin.options.appMountIds.length > 0) { %>
<% for (var index in htmlWebpackPlugin.options.appMountIds) { %>
<div id="<%= htmlWebpackPlugin.options.appMountIds[index]%>"></div>
<% } %>
<% } %>

<% if (htmlWebpackPlugin.options.window) { %>
<script>
  <% for (var varName in htmlWebpackPlugin.options.window) { %>
    window['<%=varName%>'] = <%= JSON.stringify(htmlWebpackPlugin.options.window[varName]) %>;
  <% } %>
</script>
<% } %>

<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
<script src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
<% } %>

<% if (htmlWebpackPlugin.options.devServer) { %>
<script src="<%= htmlWebpackPlugin.options.devServer%>/webpack-dev-server.js"></script>
<% } %>

<% if (htmlWebpackPlugin.options.googleAnalytics) { %>
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');


  <% if (htmlWebpackPlugin.options.googleAnalytics.trackingId) { %>
    ga('create', '<%= htmlWebpackPlugin.options.googleAnalytics.trackingId%>', 'auto');
    <% } else { throw new Error("html-webpack-template requires googleAnalytics.trackingId config"); }%>

  <% if (htmlWebpackPlugin.options.googleAnalytics.pageViewOnLoad) { %>
    ga('send', 'pageview');
  <% } %>
</script>
<% } %>
</body>
</html>
```

--------------------------------

### Cloning the EMP Demo Repository (Bash)

Source: https://github.com/empjs/official/blob/main/docs/zh/guide/empShare/react-diff.mdx

Clones the `empjs/emp` repository from GitHub, which contains the demo projects for EMP, including the React multi-version example. This is the first step to obtain the source code.

```bash
git clone https://github.com/empjs/emp
```

--------------------------------

### Example Configuration using build.minOptions in emp-config.js

Source: https://github.com/empjs/official/blob/main/docs/zh/config/build/minOptions.mdx

Demonstrates how to include the `build.minOptions` property within an `emp-config.js` file using the `defineConfig` helper from `@empjs/cli`. This example shows an empty `minOptions` object, indicating default minimization settings.

```JavaScript
import {defineConfig} from '@empjs/cli'
export default defineConfig(store => {
  return {
    build:{
        minOptions:{}
    }
  }
})
```

--------------------------------

### Configure ESLint in package.json

Source: https://github.com/empjs/official/blob/main/docs/zh/plugin/code/eslint-config-react.mdx

Adds the `@empjs/eslint-config-react` configuration to the `eslintConfig` property in your `package.json` file. This tells ESLint to extend the rules defined in the installed package.

```TypeScript
{
    "eslintConfig": {
    "extends": [
      "@empjs/eslint-config-react"
    ]
  }
}
```

--------------------------------

### Navigating to Vue3 Base Project (Bash)

Source: https://github.com/empjs/official/blob/main/docs/zh/demo/vue3.mdx

Changes the current directory to the `vue-3-base` example project within the cloned EMP repository. This is required before running the base project.

```Bash
cd projects/vue-3-base
```

--------------------------------

### Configure Shared Dependencies (TS)

Source: https://github.com/empjs/official/blob/main/docs/zh/plugin/tool/share.mdx

Example configuration for the shared option within pluginRspackEmpShare. It demonstrates how to mark react and react-dom as singletons, ensuring only one instance is loaded in the application.

```TS
plugins:[
    pluginRspackEmpShare({
      name: '@demo/host',
      shared: {
        react: {
          singleton: true,
        },
        'react-dom': {
          singleton: true,
        },
      },
    })]
```

--------------------------------

### Minimal HTML Template Example for EMP (HTML)

Source: https://github.com/empjs/official/blob/main/docs/zh/guide/basis/template.mdx

Provides a basic structure for an HTML template file intended for use with EMP. It includes placeholders for the page language, title, and a root element (`#emp-root`) where the application will likely be mounted.

```HTML
<!DOCTYPE html>
<html lang="<%= htmlWebpackPlugin.options.lang %>">

<head>
  <title>
    <%= htmlWebpackPlugin.options.title %>
  </title>
</head>

<body>
  <div id="emp-root"></div>
</body>

</html>
```

--------------------------------

### Creating Custom Markdown Containers

Source: https://github.com/empjs/official/blob/main/docs/zh/guide/start/default_template.md

Examples of using the ':::' syntax to create various types of custom containers (tip, info, warning, danger, details) with optional custom titles.

```markdown
:::tip
This is a `block` of type `tip`
:::

:::info
This is a `block` of type `info`
:::

:::warning
This is a `block` of type `warning`
:::

:::danger
This is a `block` of type `danger`
:::

::: details
This is a `block` of type `details`
:::

:::tip Custom Title
This is a `block` of `Custom Title`
:::

:::tip{title="Custom Title"}
This is a `block` of `Custom Title`
:::
```

--------------------------------

### Example package.json for resolve.mainFields (JSON)

Source: https://github.com/empjs/official/blob/main/docs/zh/config/base/resolve.mdx

Demonstrates a `package.json` file structure where the `module` field is used by Rspack's `resolve.mainFields` configuration to determine the entry point for a package.

```json
// package.json
{
  "name": "lib",
  "module": "es/index.js"
}
```

--------------------------------

### Configuring Rspack/Webpack Loaders via bundler-chain (JavaScript)

Source: https://github.com/empjs/official/blob/main/docs/zh/guide/basis/empconfig.mdx

This snippet provides examples of how to add, modify, and delete loaders in the Rspack/webpack configuration using the bundler-chain API within the `chain` property of the EMP config. It demonstrates the methods for manipulating rules and uses.

```js
import { defineConfig } from '@empjs/cli'

export default defineConfig(async store => {
    return {
        chain: (chainConfig) => {
            // 新增loader
            chainConfig.module
                .rule(name)
                    .use(name)
                    .loader(loader)
                    .options(options)
            // 修改loader
            chainConfig.module
                .rule(name)
                    .use(name)
                    .tap(options => newOptions)
            // 删除loader
            chainConfig.module
                .rule(name)
                    .uses.delete(name)
        },
    }
})
```

--------------------------------

### Example package.json for resolve.exportsFields (JSON)

Source: https://github.com/empjs/official/blob/main/docs/zh/config/base/resolve.mdx

Illustrates how `resolve.exportsFields` can prioritize different export fields in `package.json`. The example shows `testExports` and `exports`, explaining that if `testExports` is listed first in the configuration, it will be used.

```json
// lib/package.json
{
  "name": "lib",
  "testExports": {
    ".": "./test.js"
  },
  "exports": {
    ".": "./index.js"
  }
}
```

--------------------------------

### Example using webpack chain in emp.config.ts

Source: https://github.com/empjs/official/blob/main/docs/zh/plugin/chainName.mdx

Demonstrates how to use the `chain` method in `emp.config.ts` to access and modify the configuration of a specific webpack plugin, such as `definePlugin`.

```ts
import {defineConfig} from '@empjs/cli'
export default defineConfig(store => {
  return {
    chain(config) {
      config.plugin('definePlugin').tap(o => {
        console.log('definePlugin', o)
        return o
      })
    },
  }
})
```

--------------------------------

### Configuring EMP via Direct Object Modification (TypeScript)

Source: https://github.com/empjs/official/blob/main/docs/zh/guide/basis/empconfig.mdx

This snippet demonstrates how to configure EMP by directly exporting a configuration object from the `emp-config.js` file. It sets basic build, server, and entry point options.

```ts
export default {
    base: '/',
    build: {
        outDir: 'output',
    },
    server: {
        server: 'http',
        port: 8092,
    },
    entries: {
        'index.ts': {
            title: 'emp3 demo',
            files: {
                js: [],
            },
        }
    }
}
```

--------------------------------

### Installing @empjs/plugin-vue2 via Package Manager

Source: https://github.com/empjs/official/blob/main/docs/zh/plugin/framework/plugin-vue2.mdx

Installs the `@empjs/plugin-vue2` package as a development dependency using a package manager command. This is the first step to integrate the Vue 2 plugin into your project.

```Shell
add @empjs/plugin-vue2 -D
```

--------------------------------

### Navigating to the React 16 Demo Directory (Bash)

Source: https://github.com/empjs/official/blob/main/docs/zh/guide/empShare/react-diff.mdx

Changes the current directory to the specific React 16 application within the cloned `emp` repository. This is necessary before installing dependencies or running the project.

```bash
cd demos/react16_18/react-16-app
```

--------------------------------

### Configuring EMP with bundler-chain via defineConfig (JavaScript)

Source: https://github.com/empjs/official/blob/main/docs/zh/guide/basis/empconfig.mdx

This snippet illustrates how to use the `chain` property within the `defineConfig` function to modify the underlying Rspack/webpack configuration using the bundler-chain API. It shows an example of merging module rules.

```js
import { defineConfig } from '@empjs/cli'

export default defineConfig(async store => {
    const projectName = 'emp3-demo'
    // 根据环境
    const isDev = store.mode === 'development'
    return {
        chain: (chainConfig) => {
            chainConfig.merge({
                module: {
                    rule: {
                    sass: {
                        test: /\.(sass|scss)$/,
                        use: {
                        postcss: this.postcss,
                        sassLoader,
                        },
                        type: 'css/auto',
                    },
                    },
                },
            })
        },
        base: isDev ? undefined : `/${projectName}/`,
        build: {
            outDir: 'output',
        },
        server: {
            server: 'http',
            port: 8092,
        },
        entries: {
            'index.ts': {
                title: 'emp3 demo',
                files: {
                    js: [],
                },
            }
        }
    }
})
```

--------------------------------

### Configure Exposed Modules (JSX)

Source: https://github.com/empjs/official/blob/main/docs/zh/plugin/tool/share.mdx

Example configuration for the exposes option within pluginRspackEmpShare. It demonstrates how to expose different modules from a provider application, mapping internal file paths to external expose keys, including a default export (.).

```JSX
module.exports = {
  plugins: [
    pluginRspackEmpShare({
      name: 'provider',
      exposes: {
        // 注意： 不支持 "./"，为 . 导出是表示为 default 默认导出
        '.': './src/index.tsx',
        './add': './src/utils/add.ts',
        './Button': './src/components/Button.tsx',
      },
    }),
  ],
};
```

--------------------------------

### Example CSS Sass Modern Mode Configuration (TypeScript)

Source: https://github.com/empjs/official/blob/main/docs/zh/config/base/css.mdx

Provides an example of how to configure CSS Sass to use the 'modern' build mode within an `emp-config.js` file using the `defineConfig` helper.

```ts
import {defineConfig} from '@empjs/cli'
export default defineConfig(store => {
  return {
    css:{
        // 启用 sass modern 构建
        sass:{
          mode:'modern'
        }
    }
  }
})
```

--------------------------------

### Configuring EMP Share Plugin for React (v3.5.3)

Source: https://github.com/empjs/official/blob/main/docs/zh/plugin/tool/share.mdx

This configuration demonstrates how to integrate the @empjs/share plugin with @empjs/plugin-react using Rspack. It sets up the EMP runtime and framework dependencies, specifically pointing to CDN URLs for the share SDK and React router adapter, and uses externalReact for externals. This setup is the recommended approach from v3.5.3 onwards.

```TypeScript
import {defineConfig} from '@empjs/cli'
import pluginReact from '@empjs/plugin-react'
import {externalReact, pluginRspackEmpShare} from '@empjs/share/rspack'
export default defineConfig(store => {
  return {
    plugins: [
      pluginReact(),
      pluginRspackEmpShare({
        empRuntime: {
          runtime: {
            lib: `https://cdn.jsdelivr.net/npm/@empjs/share@3.5.3/output/sdk.js`,
          },
          framework: {
            libs: [`https://cdn.jsdelivr.net/npm/@empjs/cdn-react@0.19.0/dist/reactRouter.${store.mode}.umd.js`],
            global: 'EMP_ADAPTER_REACT',
          },
          setExternals: externalReact,
        },
      }),
    ],
  }
})
```

--------------------------------

### Enable Import Map in EMP Share Config (JSONC)

Source: https://github.com/empjs/official/blob/main/docs/zh/guide/empShare/react-esm.mdx

Shows how to enable the use of browser native ESM import maps within the 'empShare' configuration block. This allows shared libraries to be loaded via native ESM.

```jsonc
//...
empShare {
    //...
    "useImportMap": true,
    //...
}
```

--------------------------------

### Configure Remote Modules (JS)

Source: https://github.com/empjs/official/blob/main/docs/zh/plugin/tool/share.mdx

Example configuration for the remotes option in a Rspack config using pluginRspackEmpShare. It shows how to define aliases for remote applications, specifying their Module Federation name and entry point (either mf-manifest.json or remoteEntry.js).

```JS
module.exports = {
  plugins: [
    pluginRspackEmpShare({
      name: 'host',
      // 下面的 remotes 中定义了两个 remote，分别是名称为：manifest_provider 在 3011 端口启动的项目、js_entry_provider 在 3012 端口启动的项目
      remotes: {
        'manifest-provider':
          'manifest_provider@http://localhost:3011/mf-manifest.json',
        'js-entry-provider':
          'js_entry_provider@http://localhost:3012/remoteEntry.js',
      },
    }),
  ],
};
```

--------------------------------

### Basic JavaScript Code Block

Source: https://github.com/empjs/official/blob/main/docs/zh/guide/start/default_template.md

Simple example of embedding a JavaScript code block using triple backticks.

```js
console.log('Hello World');
```

--------------------------------

### Defining YAML Front Matter

Source: https://github.com/empjs/official/blob/main/docs/zh/guide/start/default_template.md

Example of adding YAML-formatted metadata at the beginning of a Markdown or MDX file. This data can be accessed later in the content.

```yaml
---
title: Hello World
---
```

--------------------------------

### Configuring EMP via defineConfig Function (TypeScript)

Source: https://github.com/empjs/official/blob/main/docs/zh/guide/basis/empconfig.mdx

This snippet shows how to use the `defineConfig` helper function from `@empjs/cli` to configure EMP. The function receives a `store` object containing build environment information, allowing for conditional configuration based on the mode (e.g., development).

```ts
import { defineConfig } from '@empjs/cli'

export default defineConfig(async store => {
    const projectName = 'emp3-demo'
    const isDev = store.mode === 'development'
    return {
        base: isDev ? undefined : `/${projectName}/`,
        build: {
            outDir: 'output',
        },
        server: {
            server: 'http',
            port: 8092,
        },
        entries: {
            'index.ts': {
                title: 'emp3 demo',
                files: {
                    js: [],
                },
            }
        }
    }
})
```

--------------------------------

### Configuring Rspack/Webpack Plugins via bundler-chain (JavaScript)

Source: https://github.com/empjs/official/blob/main/docs/zh/guide/basis/empconfig.mdx

This snippet shows how to add, modify, and delete plugins in the Rspack/webpack configuration using the bundler-chain API within the `chain` property of the EMP config. It demonstrates the methods for manipulating plugins.

```js
import { defineConfig } from '@empjs/cli'

export default defineConfig(async store => {
    return {
        chain: (chainConfig) => {
            // 新增插件
            chainConfig.plugin(name).use(WebpackPlugin, args);

            // 修改插件
            chainConfig.plugin(name).tap((args) => newArgs);

            // 删除插件
            chainConfig.plugins.delete(name);
        },
    }
})
```

--------------------------------

### Configure Dynamic Public Path (TS)

Source: https://github.com/empjs/official/blob/main/docs/zh/plugin/tool/share.mdx

Example configuration for the getPublicPath option in pluginRspackEmpShare. It shows how to provide a JavaScript string that will be executed via new Function at runtime to dynamically determine the public path for remote module assets.

```TS
module.exports = {
  plugins: [
    pluginRspackEmpShare({
      name: 'provider',
      exposes: {
        './Button': './src/components/Button.tsx',
      },
      // ...
      getPublicPath: `return "https:" + window.navigator.cdn_host + "/resource/app/"`,
    }),
  ],
};
```

--------------------------------

### Configuring EMP Share Plugin for Vue3/Vue2 (v3.5.3)

Source: https://github.com/empjs/official/blob/main/docs/zh/plugin/tool/share.mdx

This configuration shows how to use the @empjs/share plugin with @empjs/plugin-vue3 or @empjs/plugin-vue2 in an EMP project using Rspack. It configures the EMP runtime SDK and framework libraries (Vue runtime), similar to the React setup, using externalVue for externals. This is the recommended approach for Vue from v3.5.3.

```TypeScript
import {defineConfig} from '@empjs/cli'
import pluginVue from '@empjs/plugin-vue3'// @empjs/plugin-vue2
import {externalVue, pluginRspackEmpShare} from '@empjs/share/rspack'
export default defineConfig(store => {
  return {
    plugins: [
      pluginVue(),
      pluginRspackEmpShare({
        empRuntime: {
          runtime: {
            lib: `https://cdn.jsdelivr.net/npm/@empjs/share@3.5.3/output/sdk.js`,
          },
          framework: {
            libs: [
             `https://cdn.jsdelivr.net/npm/vue@3.5.13/dist/vue.runtime.global${store.mode === 'production' ? '.prod' : ''}.min.js`,// vue 2 同理
            //  `https://cdn.jsdelivr.net/npm/vue-router@4.5.0/dist/vue-router.global.prod.js`, //如果需要用到 vue-router
              ],
            global: 'window',
          },
          setExternals: externalVue,
        },
      }),
    ],
  }
})
```

--------------------------------

### Configuring Server Port in emp-config.js

Source: https://github.com/empjs/official/blob/main/docs/zh/config/server/port.mdx

This example demonstrates how to configure the server port for the empjs project by setting the `prot` property within the `server` object in the `emp-config.js` file. This changes the default access port from 8000 to 9002.

```js
export default defineConfig(store => {
  ...
  return {
    ...
    server: {
      prot: 9002,
      ...
    },
    ...
  }
})
```

--------------------------------

### Configuring Server Port (JavaScript)

Source: https://github.com/empjs/official/blob/main/docs/zh/config/base/server.mdx

Example configuration in emp-config.js showing how to set the server port using the defineConfig utility from @empjs/cli. This snippet specifically sets the server port to 9002.

```javascript
import {defineConfig} from '@empjs/cli'
export default defineConfig(store => {
  return {
    server: {
        port: 9002
    },
  }
})
```

--------------------------------

### Configuring autoPages with HTML and Entries (Advanced)

Source: https://github.com/empjs/official/blob/main/docs/zh/config/base/autoPages.mdx

This example demonstrates how `autoPages` integrates with the global `html` configuration and the page-specific `entries` configuration. It shows how to set a global HTML title and override it for a specific automatically discovered page (`work/index.ts`), also including a plugin like `pluginReact`.

```typescript
import {defineConfig} from '@empjs/cli'
import pluginReact from '@empjs/plugin-react'

export default defineConfig(store => {
  return {
    //开启 autoPages
    autoPages: true,
    plugins: [pluginReact()],
    // 全局设置 html 配置
    html: {
      title: 'EMP v3 Auto Pages',
    },
    // 局部设置存在页面的配置
    entries: {
      'work/index.ts': {
        title: 'auto page work',
      },
    },
  }
})
```

--------------------------------

### Configure autoDevBase in emp-config.js (TypeScript)

Source: https://github.com/empjs/official/blob/main/docs/zh/config/base/autoDevBase.mdx

This snippet demonstrates how to enable the `autoDevBase` option within the `emp-config.js` file using the `defineConfig` helper from `@empjs/cli`. Setting `autoDevBase` to `true` automatically configures the development server's base URL to the current IP and port, facilitating remote debugging and proxy setups.

```TypeScript
import {defineConfig} from '@empjs/cli'
export default defineConfig(store => {
  return {
    autoDevBase:true
  }
})
```

--------------------------------

### Configuring Path Aliases with resolve.alias (TypeScript)

Source: https://github.com/empjs/official/blob/main/docs/zh/config/base/resolve.mdx

Sets up path aliases for module resolution. The example shows how to map "@" to the "src" directory and "abc$" to a specific file, explaining how different import paths are resolved or not resolved by these aliases.

```ts
{
  "@": path.resolve(__dirname, './src'),
  "abc$": path.resolve(__dirname, './src/abc')
}
```

--------------------------------

### Configure VS Code Settings for ESLint

Source: https://github.com/empjs/official/blob/main/docs/zh/plugin/code/eslint-config-react.mdx

Configures VS Code's settings (`.vscode/settings.json`) to enable automatic ESLint fixing on save, specify the workspace TypeScript version, and ensure ESLint is active for relevant file types. It also disables built-in JavaScript/TypeScript formatting to avoid conflicts.

```JSON
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true,
  "eslint.probe": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html",
    "vue",
    "markdown",
    "json"
  ],
  "javascript.format.enable": false,
  "typescript.format.enable": false
}
```

--------------------------------

### Configuring EMP Share Plugin (Older Method)

Source: https://github.com/empjs/official/blob/main/docs/zh/plugin/tool/share.mdx

This configuration demonstrates an older method for setting up the @empjs/share plugin. It defines the module federation name, shared dependencies (like react and react-dom), exposes for components, and empRuntime settings including runtime and framework libraries and globals. This method is still functional but superseded by newer approaches.

```TypeScript
import {defineConfig} from '@empjs/cli'
import {pluginRspackEmpShare} from '@empjs/share'
export default defineConfig(store => {
return {
  plugins:[
    pluginRspackEmpShare({
        name: 'mfHost',
        shared: {
          react: {
              singleton: true,
              requiredVersion: '18',
          },
          'react-dom': {
              singleton: true,
              requiredVersion: '18',
          },
        },
        exposes: {
          './App': './src/App',
          './CountComp': './src/CountComp',
        },
        empRuntime: {
          runtimeLib: "https://cdn.jsdelivr.net/npm/@empjs/share@3.1.2/output/full.js",
          frameworkLib: "https://cdn.jsdelivr.net/npm/@empjs/libs-18@0.0.1/dist",
          frameworkGlobal: 'EMP_ADAPTER_REACT',
          framework: 'react',
        },
        // experiments: {
        //   federationRuntime: 'hoisted',
        // },
    }),
  ]
}
})
```

--------------------------------

### Creating Emp Vue3 Project (Shell)

Source: https://github.com/empjs/official/blob/main/docs/zh/guide/framework/vue3.mdx

Use the `create-emp` command to initialize a new project configured for Emp and Vue3. Select 'Vue 3' when prompted for the framework.

```shell
create emp@latest
```

--------------------------------

### Configuring EMP with Vue 3 Plugin

Source: https://github.com/empjs/official/blob/main/docs/zh/config/base/plugins.mdx

Demonstrates how to configure the EMP build process by adding the @empjs/plugin-vue3 to the plugins array in the emp-config.js file. It also shows setting the application entry point.

```JavaScript
import Vue3 from '@empjs/plugin-vue3'
import {defineConfig} from '@empjs/cli'

export default defineConfig(({mode, env}) => {
  return {
    plugins: [Vue3()],
    appEntry: 'main.ts',
  }
})
```

--------------------------------

### Basic Markdown Heading

Source: https://github.com/empjs/official/blob/main/docs/zh/guide/start/default_template.md

Demonstrates a simple Markdown heading using the '#' syntax.

```markdown
# Hello World
```

--------------------------------

### Cloning EMP Repository (Bash)

Source: https://github.com/empjs/official/blob/main/docs/zh/guide/empShare/vue2.mdx

Command to clone the official EMP GitHub repository to obtain the source code, including the demo projects.

```bash
git clone https://github.com/empjs/emp
```

--------------------------------

### Navigating to Vue2 Demo Directory (Bash)

Source: https://github.com/empjs/official/blob/main/docs/zh/guide/empShare/vue2.mdx

Command to change the current directory to the specific Vue2 demo folder within the cloned EMP repository.

```bash
cd demos/vue2
```

--------------------------------

### Configuring EMP Share Plugin for React (v3.4.5)

Source: https://github.com/empjs/official/blob/main/docs/zh/plugin/tool/share.mdx

This configuration illustrates how to set up the @empjs/share plugin with @empjs/plugin-react using Rspack, specifically for version 3.4.5. It defines the EMP runtime and framework configurations, including specifying the React version, CDN paths for the SDK and framework libraries, and global variable names. This method was introduced in v3.4.5.

```TypeScript
import {defineConfig} from '@empjs/cli'
import pluginReact from '@empjs/plugin-react'
import {pluginRspackEmpShare} from '@empjs/share/rspack'
export default defineConfig(store => {
  const reactVersion = 19// 17~19可自由切换、实测能通过大部分业务场景、保持向下兼容原则
  return {
    plugins: [
      pluginReact({
        version: reactVersion,
      }),
      pluginRspackEmpShare({
        // module federation runtime & sdk 配置 基于 0.6.10 小部分重构 支持external
        empRuntime: {
          runtime: {
            // mf sdk 地址
            lib: `https://yourcdn.com/@empjs/share@3.4.5/output/sdk.js`,
            // mf umd global name
            global: `EMP_SHARE_RUNTIME`
          },
          // 框架以umd格式暴露
          framework: {
            name: 'react',
            version: reactVersion,
            // 最终访问地址 默认为 reactRouter.development.umd.js
            entry: 'reactRouter',
            // react umd global name
            global: 'EMP_ADAPTER_REACT',
            // 自动区分 dev & prod
            lib: `https://yourcdn.com/@empjs/react@${reactVersion}/dist`,
          },
        },
      }),
    ],
  }
})
```

--------------------------------

### Implementing React Multi-Version Application (TSX)

Source: https://github.com/empjs/official/blob/main/docs/zh/guide/empShare/react-diff.mdx

Shows the main application component (`App.tsx`) for the React 16 host. It demonstrates initializing the EMP runtime, loading a remote React 18 application (`runtimeHost/App`), and using the `reactAdapter` to wrap both React 16 and React 18 components for seamless integration within the React 16 host environment.

```tsx
import React, { useEffect, useState, version } from 'react'
import ReactDOM from 'react-dom'
import { Card, CountComp as CountComp16, ShowCountComp as ShowCountComp16 } from './CountComp'
import './index.css'
import './normalize.css'
import { reactAdapter } from '@empjs/share/adapter'
import empRuntime from '@empjs/share/runtime'
const entry = process.env.mfhost as string
// 实例化远程 emp
empRuntime.init({
  shared: reactAdapter.shared,
  remotes: [
    {
      name: 'runtimeHost',
      entry,
    },
  ],
  name: 'federationRuntimeDemo',
})
// 封装 React 18的组件 以便插入到 React 16
const React18App = reactAdapter.adapter(empRuntime.load('runtimeHost/App'))

// 封装 React 16的组件 以便插入到 React 18
const ParentComponentAdepter = reactAdapter.adapter(CountComp16, 'default', React, ReactDOM)

const App = () => {
  return (
    <>
      <h1>App React Version {version}</h1>
      <ShowCountComp16 />
      <Card title="EMP From mfhost">
        <React18App>
          <ParentComponentAdepter />
        </React18App>
      </Card>
    </>
  )
}
export default App
```

--------------------------------

### Configure Server Open Option in emp-config.js

Source: https://github.com/empjs/official/blob/main/docs/zh/config/server/open.mdx

This snippet demonstrates how to set the 'open' option to 'true' within the 'server' configuration block in the 'emp-config.js' file using 'defineConfig'. Setting 'open' to 'true' instructs the development server to automatically open the default system browser to the project URL upon startup.

```JavaScript
export default defineConfig(store => {
  ...
  return {
    ...
    server: {
      open: true,
      ...
    },
    ...
  }
})
```

--------------------------------

### Configuring HTML Template with defineConfig

Source: https://github.com/empjs/official/blob/main/docs/zh/config/base/html.mdx

Demonstrates how to configure the HTML template path using the `html.template` property within the `defineConfig` function provided by `@empjs/cli`. This sets the entry HTML file for the project.

```ts
import {defineConfig} from '@empjs/cli'
export default defineConfig(store => {
  return {
    html: {
      template: 'src/index.html',
    },
  }
})
```

--------------------------------

### Basic empShare Configuration

Source: https://github.com/empjs/official/blob/main/docs/zh/config/empShare/index.mdx

Configures basic module federation sharing using empShare. It defines the remote name, exposed modules, and shared dependencies with singleton settings.

```TypeScript
import {defineConfig} from '@empjs/cli'
export default defineConfig(({mode, env}) => {
  return {
    empShare: {
      name: 'unpkglib',
      exposes: {
        './App': './src/App',
      },
      shared: {
        react: {singleton: true},
        'react-dom': {singleton: true},
      },
    },
  }
})
```

--------------------------------

### TypeScript Type Definition for SwcJsMinimizerRspackPluginOptions

Source: https://github.com/empjs/official/blob/main/docs/zh/config/build/minOptions.mdx

Defines the structure and available properties for the `build.minOptions` configuration object, which is used to pass options to the SWC minimizer. Note that several properties are deprecated and should be moved to `compress`, `mangle`, or `format`.

```TypeScript
export type SwcJsMinimizerRspackPluginOptions = {
    /**
     * @deprecated Deprecated, move to `compress.passes`
     */
    passes?: number;
    /**
     * @deprecated Deprecated, move to `compress.drop_console`
     */
    dropConsole?: boolean;
    /**
     * @deprecated Deprecated, move to `compress.pure_funcs`
     */
    pureFuncs?: Array<string>;
    /**
     * @deprecated Deprecated, move to `mangle.keep_classnames`
     */
    keepClassNames?: boolean;
    /**
     * @deprecated Deprecated, move to `mangle.keep_fnames`
     */
    keepFnNames?: boolean;
    /**
     * @deprecated Deprecated, move to `format.comments`
     */
    comments?: false | "all" | "some";
    /**
     * @deprecated Deprecated, move to `format.ascii_only`
     */
    asciiOnly?: boolean;
    extractComments?: ExtractCommentsOptions | undefined;
    compress?: TerserCompressOptions | boolean;
    mangle?: TerserMangleOptions | boolean;
    format?: JsFormatOptions & ToSnakeCaseProperties<JsFormatOptions>;
    module?: boolean;
    test?: MinifyConditions;
    exclude?: MinifyConditions;
    include?: MinifyConditions;
};
```

--------------------------------

### Configuring EMP with emp-config.js (TypeScript)

Source: https://github.com/empjs/official/blob/main/docs/zh/plugin/tool/cli.mdx

Defines the configuration file for the EMP build tool using TypeScript. It imports `defineConfig` from `@empjs/cli` and exports a default configuration object.

```typescript
import {defineConfig} from '@empjs/cli'
export default defineConfig(store => {
  return {
  }
})
```

--------------------------------

### Configuring @empjs/plugin-react in emp-config.js (TypeScript)

Source: https://github.com/empjs/official/blob/main/docs/zh/plugin/framework/plugin-react.mdx

This snippet shows the basic configuration for integrating the `@empjs/plugin-react` into your EMP project by adding it to the `plugins` array in the `emp-config.js` file.

```ts
import pluginReact from '@empjs/plugin-react'
import {defineConfig} from '@empjs/cli'
export default defineConfig(({mode, env}) => {
  return {
    plugins: [pluginReact()],
  }
})
```

--------------------------------

### Configuring Polyfill Mode in empjs

Source: https://github.com/empjs/official/blob/main/docs/zh/config/build/polyfill.mdx

This snippet demonstrates how to use the `defineConfig` utility from `@empjs/cli` to configure the build process. It specifically shows how to set the `build.mode` option within the configuration object, setting it to `'usage'` to control polyfill injection.

```TypeScript
import {defineConfig} from '@empjs/cli'
export default defineConfig(store => {
  return {
    build:{
        mode:'usage',
    }
  }
})
```

--------------------------------

### Importing EMP Share Runtime and Adapter (TypeScript)

Source: https://github.com/empjs/official/blob/main/docs/zh/guide/empShare/react.mdx

Imports the necessary `reactAdapter` for Module Federation shared configuration and the core `@empjs/share/runtime` for runtime module initialization and registration in a React application.

```ts
import {reactAdapter} from '@empjs/share/adapter'
import rt from '@empjs/share/runtime'
```

--------------------------------

### Reference object for empjs webpack chain configuration names

Source: https://github.com/empjs/official/blob/main/docs/zh/plugin/chainName.mdx

Provides a comprehensive TypeScript object (`chainName`) listing the standard names used for various webpack configurations within empjs, including rules, uses, plugins, and minimizers. These names can be used with `this.store.chainName` or for direct configuration.

```ts
export const chainName = {
  rule: {
    mjs: 'mjs',
    typescript: 'typescript',
    javascript: 'javascript',
    sourceMap: 'sourceMapLoader',
    inline: 'inline',
    svg: 'svg',
    image: 'image',
    font: 'fonts',
    svga: 'svga',
    sass: 'sass',
    less: 'less',
    css: 'css'
  },
  use: {
    swc: 'swc',
    sourceMap: 'sourceMapLoader',
    sass: 'sassLoader',
    less: 'lessLoader'
  },
  plugin: {
    bundleAnalyzer: 'bundleAnalyzerPlugin',
    define: 'definePlugin',
    copy: 'copyRspackPlugin',
    progress: 'progressPlugin',
    empShare: 'empShare',
    html: {
      prefix: 'html-plugin-',
      empSharePrefix: 'html-plugin-empShare-',
      importMapPrefix: 'html-plugin-import-map-',
      hooks: {
        empShareLib: 'HtmlEmpShareLibPluginName',
        importMap: 'HtmlImportMapPlugin'
      }
    }
  },
  minimizer: {
    minJs: 'minJs',
    minCss: 'minCss'
  }
}
```

--------------------------------

### Defining Browserslist Options in Store (JS)

Source: https://github.com/empjs/official/blob/main/docs/zh/config/build/browserslist.mdx

This JavaScript getter function provides predefined arrays of browser compatibility targets for different environments (default, h5, node) within the application's store.

```javascript
  get browserslistOptions() {
    return {
      default: ['chrome >= 87', 'edge >= 88', 'firefox >= 78', 'safari >= 14'],
      h5: ['iOS >= 9', 'Android >= 4.4', 'last 2 versions', '> 0.2%', 'not dead'],
      node: ['node >= 16'],
    }
  }
```

--------------------------------

### Configuring build.publicDir in EMPJS (TypeScript)

Source: https://github.com/empjs/official/blob/main/docs/zh/config/build/publicDir.mdx

This snippet demonstrates how to set the `build.publicDir` option within the EMPJS configuration file (`emp-config.js`). This option defines the path to the directory containing static files that should be copied to the build output.

```typescript
import {defineConfig} from '@empjs/cli'
export default defineConfig(store => {
  return {
    build:{
        publicDir:'public'
    }
  }
})
```

--------------------------------

### Importing and Logging Raw Text File Content (JavaScript)

Source: https://github.com/empjs/official/blob/main/docs/zh/guide/basis/raw.mdx

This snippet imports the content of 'src/file.txt' as a raw string using the ?raw query parameter and then logs the imported string to the console. This is useful for embedding file content directly into your code.

```JavaScript
import txt from 'src/file.txt?raw'
console.log('file.txt content', txt)
```

--------------------------------

### Configuring Browserslist for H5 in emp-config.js (TS)

Source: https://github.com/empjs/official/blob/main/docs/zh/config/build/browserslist.mdx

This TypeScript snippet demonstrates how to use the `defineConfig` function from `@empjs/cli` to set the `build.browserslist` option to the predefined 'h5' compatibility list available in the store.

```typescript
import {defineConfig} from '@empjs/cli'
export default defineConfig(store => {
  return {
    build:{
        // 支持 移动浏览器的兼容性配置
        browserslist: store.browserslistOptions.h5,
    }
  }
})
```

--------------------------------

### Configuring Build Target in emp-config.js

Source: https://github.com/empjs/official/blob/main/docs/zh/config/build/target.mdx

Demonstrates how to set the `build.target` option within the `emp-config.js` file using the `defineConfig` helper, specifying 'es2015' as the target and noting the default module system implications.

```javascript
import {defineConfig} from '@empjs/cli'
export default defineConfig(store => {
  return {
    build:{
        target:'es2015'//es3 & es5默认为 commonjs es2015默认为ESM
    }
  }
})
```

--------------------------------

### Configuring Vue2 Project with EMP Share Remotes (TypeScript)

Source: https://github.com/empjs/official/blob/main/docs/zh/guide/empShare/vue2.mdx

EMP configuration file for the `vue-2-project`. It sets up the project as an application that consumes remote modules, specifying the remote entry point for the base application and configuring shared dependencies and runtime settings.

```typescript
import {defineConfig} from '@empjs/cli'
import vue from '@empjs/plugin-vue2'
import {pluginRspackEmpShare} from '@empjs/share'
// cf 1
//
export default defineConfig(store => {
  const ip = store.getLanIp()
  const vue2Base = `http://${ip}:9001/emp.js`
  return {
    plugins: [
      vue(),
      pluginRspackEmpShare({
        name: 'vue2Base',
        // 配置依赖的远程项目
        remotes: {
          '@v2b': `vue2Base@${vue2Base}`,
        },
        empRuntime: {
          // 模块联邦运行时依赖
          runtimeLib: "https://unpkg.yy.com/@empjs/share@3.1.5/output/sdk.js",
          // 框架与公共库依赖
          shareLib: {
            vue: 'Vue@https://unpkg.com/vue@2.7.14/dist/vue.min.js',
            vuex: "Vuex@https://unpkg.com/vuex@3.6.2/dist/vuex.min.js",
            'element-ui': [
              'ELEMENT@https://unpkg.com/element-ui/lib/index.js',
              "https://unpkg.com/element-ui/lib/theme-chalk/index.css",
            ],
          },
          framework: 'vue2',
        },
      }),
    ],
    html: {
      title: 'EMP3 vue2 project',
    },
    server: {port: 9002},
    appEntry: 'main.js',
  }
})

```