# @alicloud/alfa-core

> MicroFront End SDK for alicloud

Latest version **1.6.0** (published 2026-08-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install @alicloud/alfa-core
pnpm add @alicloud/alfa-core
yarn add @alicloud/alfa-core
bun add @alicloud/alfa-core
```

## Health

**Score 55/100 (C)** — status: active.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.6.0 |
| Published | 2026-08-06 |
| First published | 2020-11-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 10 |
| Unpacked size | 159 KB |
| Known vulnerabilities | 0 (+23 in 1 direct dependencies) |
| Install scripts | no |
| Author | Boelroy |
| Maintainers | jacksontian, fengmk2, pagecao, aliyunsdkteam, console-fe |

## Links

- npm: https://www.npmjs.com/package/@alicloud/alfa-core
- npm.io page: https://npm.io/package/@alicloud/alfa-core

## Dependencies (10)

- [qs](https://npm.io/package/qs.md) ^6.14.0
- [axios](https://npm.io/package/axios.md) ^0.21.4
- [tslib](https://npm.io/package/tslib.md) ^2.4.0
- [crypto-js](https://npm.io/package/crypto-js.md) ^4.1.1
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.24.1
- [@alicloud/cookie](https://npm.io/package/@alicloud/cookie.md) ^1.5.3
- [@types/crypto-js](https://npm.io/package/@types/crypto-js.md) ^4.1.1
- [@alicloud/console-os-kernal](https://npm.io/package/@alicloud/console-os-kernal.md) ^1.4.40
- [@alicloud/console-logger-sls](https://npm.io/package/@alicloud/console-logger-sls.md) ^1.2.31
- [@alicloud/console-base-conf-parse-env](https://npm.io/package/@alicloud/console-base-conf-parse-env.md) ^1.4.12

## Recent versions

- 1.6.0 (latest) — 2026-08-06
- 1.6.0-beta.13 (beta) — 2026-08-05
- 1.5.6-alpha.1 (alpha) — 2025-07-17
- 1.4.30-alpha.0 (canary) — 2023-03-15
- 1.0.1-next.0 (next) — 2021-02-08
- 1.6.0-beta.12 — 2026-08-04
- 1.6.0-beta.11 — 2026-07-31
- 1.5.13 — 2026-07-13
- 1.6.0-beta.10 — 2026-07-01
- 1.6.0-beta.9 — 2026-07-01
- 1.5.13-beta.1 — 2026-06-30
- 1.6.0-beta.8 — 2026-06-25
- 1.6.0-beta.7 — 2026-06-25
- 1.5.12 — 2026-06-24
- 1.5.12-beta.2 — 2026-05-28
- … 124 more at https://npm.io/package/@alicloud/alfa-core/versions

## README

# Alfa Core

符合阿里集团微前端标准 API 的微前端框架 `@alicloud/alfa-core`。

这是一个偏底层的包，建议使用更上层的包以简化开发：
- `@alicloud/alfa-react`（适用于 React 项目）

## 如何使用

### 引入你的项目

```bash
npm i @alicloud/alfa-core --save
# or
yarn add @alicloud/alfa-core --save
# or
tnpm i @alicloud/alfa-core --save
```

### 加载和渲染微应用

```jsx
import React, { useEffect, useRef } from 'react';
import { createMicroApp } from '@alicloud/alfa-core';

// 微应用的资源描述。单独提出来是因为这部分内容一般来自于平台服务，而不会写死在代码中
const exampleAppManifest = {
  "name": "example",
  "entry": {
    "scripts": ["https://example.com/example.js"],
    "styles": ["https://example.com/example.css"]
  }
};

// 主应用使用 React 实现
function HostApp(props) {
  
  const containerEl = useRef(null);
  
  useEffect(() => {

    let exampleApp = {};

    (async () => {
  
      exampleApp = await createMicroApp({
        // 资源描述是微应用至少需要的配置项，更多的配置项参考 API 文档
        ...exampleAppManifest
      });
  
      // 加载
      await exampleApp.load();
  
      // 渲染
      await exampleApp.mount(containerEl.current, {
        title: `${props.title} - ${exampleApp.name}`
      });
  
    })();

    // 卸载
    return () => {
      exampleApp.unmount();
    };
  }, []);
  
  return (
    <div ref={containerEl}></div>
  );
  
}
```

### 指定远程 Manifest 加载子应用

```jsx
import React, { useEffect, useRef } from 'react';
import { createMicroApp } from '@alicloud/alfa-core';

const exampleAppManifest = 'https://somewhere/index.manifest.json'

// 主应用使用 React 实现
function HostApp(props) {
  
  const exampleApp = createMicroApp({
    // 资源描述是微应用至少需要的配置项，更多的配置项参考 API 文档
    name: 'appName',
    manifest: exampleAppManifest
  });
  
  const containerEl = useRef(null);
  
  useEffect(() => {
    // 加载
    exampleApp
      .load()
      .then((exampleApp) => {
        // 渲染
        exampleApp.mount(containerEl.current, {
          title: `${props.title} - ${exampleApp.name}`
        });
      });
    // 卸载
    return () => {
      exampleApp.unmount();
    };
  }, []);
  
  useEffect(() => {
    // 更新
    exampleApp.update({
      title: `${props.title} - ${exampleApp.name}`
    });
  }, [props.title]);
  
  return (
    <div ref={containerEl}></div>
  );  
}
```

---
_Source: https://npm.io/package/@alicloud/alfa-core · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._