---
title: "@farmfe/js-plugin-qiankun"
locale: "zh"
version: "current"
canonicalUrl: "https://farmfe.org/zh/docs/plugins/official-plugins/js-qiankun"
publicationStatus: "prerelease"
---

<a id="farmfejs-plugin-qiankun"></a>
# @farmfe/js-plugin-qiankun


JavaScript plugin for exposing Farm applications as qiankun micro-apps.


<a id="installation"></a>
## Installation


**npm**

```javascript
npm install @farmfe/js-plugin-qiankun --save-dev
```


**yarn**

```javascript
yarn add @farmfe/js-plugin-qiankun --dev
```


**pnpm**

```javascript
pnpm add @farmfe/js-plugin-qiankun --save-dev
```



<a id="usage"></a>
## Usage


Register the HTML transform plugin:


```ts
import { defineConfig } from "@farmfe/core";
import { qiankunFarmPlugin } from "@farmfe/js-plugin-qiankun";

export default defineConfig({
  plugins: [
    qiankunFarmPlugin({
      appName: "myMicroApp",
      devMode: true,
    }),
  ],
});
```


Then register lifecycle hooks in your app entry:


```ts
import { injectQiankun } from "@farmfe/js-plugin-qiankun/helper";

injectQiankun({
  async bootstrap() {},
  async mount(props) {
    console.log(props);
  },
  async unmount() {},
});
```


<a id="options"></a>
## Options


<a id="plugin-options"></a>
### Plugin options


- ` appName: string ` — required qiankun app name. It must be a valid JavaScript identifier; the plugin throws otherwise.
- ` devMode?: boolean ` — append debug logging to the injected helper script. Defaults to ` false `.


<a id="injectqiankun-options"></a>
### ` injectQiankun ` options


- ` bootstrap: () => Promise<void> `
- ` mount: (props: unknown) => Promise<void> `
- ` unmount: () => Promise<void> `
- ` update?: (props: unknown) => Promise<void> `


The Farm plugin appends a script to the HTML body that bridges these helper hooks to ` window[appName] `.