# hb-third-lib

> 海豹常用第三方库，使用模块联邦实现

Latest version **0.0.80** (published 2024-05-31) · 0 weekly downloads

## Install

```sh
npm install hb-third-lib
pnpm add hb-third-lib
yarn add hb-third-lib
bun add hb-third-lib
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.80 |
| Published | 2024-05-31 |
| First published | 2023-12-11 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 32 |
| Unpacked size | 6.8 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | zeihang |

## Links

- npm: https://www.npmjs.com/package/hb-third-lib
- npm.io page: https://npm.io/package/hb-third-lib

## Dependencies (32)

- [qs](https://npm.io/package/qs.md) ^6.11.2
- [vue](https://npm.io/package/vue.md) ^3.3.8
- [less](https://npm.io/package/less.md) ^4.2.0
- [axios](https://npm.io/package/axios.md) ^1.6.1
- [pinia](https://npm.io/package/pinia.md) ^2.1.7
- [qiniu](https://npm.io/package/qiniu.md) ^7.11.0
- [core-js](https://npm.io/package/core-js.md) ^3.33.2
- [hel-iso](https://npm.io/package/hel-iso.md) ^4.3.4
- [tapable](https://npm.io/package/tapable.md) ^2.2.1
- [ts-jest](https://npm.io/package/ts-jest.md) ^29.1.1
- [fs-extra](https://npm.io/package/fs-extra.md) ^11.2.0
- [qiniu-js](https://npm.io/package/qiniu-js.md) ^3.4.1
- [vue-i18n](https://npm.io/package/vue-i18n.md) ^9.8.0
- [js-base64](https://npm.io/package/js-base64.md) ^3.7.5
- [js-cookie](https://npm.io/package/js-cookie.md) 3.0.1
- [lodash-es](https://npm.io/package/lodash-es.md) ^4.17.21
- [nprogress](https://npm.io/package/nprogress.md) ^0.2.0
- [vue-color](https://npm.io/package/vue-color.md) ^2.8.1
- [file-saver](https://npm.io/package/file-saver.md) ^2.0.5
- [vue-router](https://npm.io/package/vue-router.md) ^4.2.5
- [change-case](https://npm.io/package/change-case.md) ^5.3.0
- [v-code-diff](https://npm.io/package/v-code-diff.md) ^1.8.0
- [@vueuse/core](https://npm.io/package/@vueuse/core.md) ^10.6.1
- [hel-lib-proxy](https://npm.io/package/hel-lib-proxy.md) ^4.8.5
- [ant-design-vue](https://npm.io/package/ant-design-vue.md) ^4.0.7
- [@types/js-cookie](https://npm.io/package/@types/js-cookie.md) 3.0.1
- [@types/nprogress](https://npm.io/package/@types/nprogress.md) ^0.2.3
- [@fast-crud/ui-antdv](https://npm.io/package/@fast-crud/ui-antdv.md) 1.16.7
- [@fast-crud/fast-crud](https://npm.io/package/@fast-crud/fast-crud.md) 1.16.7
- [@fast-crud/ui-antdv4](https://npm.io/package/@fast-crud/ui-antdv4.md) 1.16.7
- [@ant-design/icons-vue](https://npm.io/package/@ant-design/icons-vue.md) ^7.0.1
- [@fast-crud/ui-interface](https://npm.io/package/@fast-crud/ui-interface.md) 1.16.7

## Recent versions

- 0.0.80 (latest) — 2024-05-31
- 0.0.26 — 2024-02-26
- 0.0.24 — 2024-01-18
- 0.0.23 — 2024-01-18
- 0.0.21 — 2024-01-15
- 0.0.20 — 2024-01-09
- 0.0.19 — 2024-01-09
- 0.0.18 — 2024-01-09
- 0.0.17 — 2024-01-08
- 0.0.16 — 2024-01-08
- 0.0.15 — 2024-01-08
- 0.0.14 — 2024-01-05
- 0.0.12 — 2024-01-05
- 0.0.11 — 2024-01-05
- 0.0.10 — 2024-01-04
- … 9 more at https://npm.io/package/hb-third-lib/versions

## README

# hb-third-lib

海豹常用第三方库，使用模块联邦实现

## 使用远程库

```javascript
yarn add hel-micro hb-third-lib
```

## 懒加载远程模块

```javascript
import helMicro from "hel-micro";

export async function bootstrap() {
  const lib = await helMicro.preFetchLib("hb-third-lib", {
    enableDiskCache: true,
    skip404Sniff: true,
    apiPrefix: "https://cdn.jsdelivr.net/npm",
    hook: {
      beforeAppendAssetNode(passCtx) {
        const { url, setAssetUrl } = passCtx;
        const jsdelivrUrl = url.replace(
          "https://unpkg.com",
          "https://cdn.jsdelivr.net/npm"
        );
        setAssetUrl(jsdelivrUrl);
      },
    },
  });
  return;
}
bootstrap().catch(() => false);
```

## 预加载远程模块

> src/loadApp.ts

```javascript
import { createApp } from "vue";
import App from "./App.vue";

const fn = async () => {
  const app = createApp(App);
  app.mount("#app");
};

fn().catch(() => false);
```

> src/main.ts

```javascript
import * as Vue from "vue";
import { bindVueRuntime, preFetchLib } from "hel-micro";
bindVueRuntime({ Vue });

async function bootstrap() {
  await preFetchLib("hb-third-lib", {
    skip404Sniff: true,
    // TODO: 可以替换cdn源
    skip404Sniff: true,
    apiPrefix: "https://cdn.jsdelivr.net/npm",
    hook: {
      beforeAppendAssetNode(passCtx) {
        const { url, setAssetUrl } = passCtx;
        const jsdelivrUrl = url.replace(
          "https://unpkg.com",
          "https://cdn.jsdelivr.net/npm"
        );
        setAssetUrl(jsdelivrUrl);
      },
    },
  }).catch(() => false);
  await import("./loadApp").catch(() => false);
}
void bootstrap().catch(() => false);
```

## 使用

```javascript
import { isArray } from "hb-third-lib";

function callRemoteMethod() {
  return isArray([]);
}
```

## 本地联调

进入 hb-third-lib 项目

```javascript
yarn start //启动项目
```

然后在宿主项目里

```javascript
async function bootstrap() {
  await preFetchLib("hb-third-lib", {
    custom: {
      host: "http://localhost:7001",
    },
    skip404Sniff: true,
    // apiPrefix: "https://cdn.jsdelivr.net/npm",
  }).catch(() => false);
  await import("./loadApp").catch(() => false);
}
void bootstrap().catch(() => false);
```

就可以愉快的本地联调啦

## 原理

你在宿主项目使用时，实践上只是使用了「hb-third-lib」导出的 lib 代理对象

```javascript
// proxy 代理对象
export const lib = exposeLib < LibProperties > LIB_NAME;

// 这里是我们为了方便使用而结构导出的
export const { hbUtils } = lib;

// 这里是我们为了方便使用而结构导出的
export const { isArray } = hbUtils;
```

而实际逻辑都是在客户端预加载的时候，才被加载进来，它们被存放在[hb-third-lib](https://unpkg.com/browse/hb-third-lib@0.0.12/)这个位置。

假设说，isArray 的逻辑有变，在「hb-third-lib」发布后，宿主项目不需要任何变动直接就能使用。

但如果 hbUtils 下新增了 isString 方法。

```javascript
// 这种使用方式，你就需要将「hb-third-lib」升级到最新版本
import { isArray, isString } from "hb-third-lib";

function callRemoteMethod() {
  return isArray([]) && isString("");
}
```

```javascript
// 这种使用方式，继续无视一切，直接使用就好了
import { hbUtils } from "hb-third-lib";

function callRemoteMethod() {
  return hbUtils.isArray([]) && hbUtils.isString("");
}
```

---
_Source: https://npm.io/package/hb-third-lib · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._