南岛聚集地 工具包

快速开始

npm install ndjjd-utils --save

例如在vue的项目中使用：

<template>
    <component :is="importComponent(componentId)"></component>
</template>
<script lang="ts" setup>
//  importComponent 函数 参数未组件ID，返回一个vue的异步组件
import { importComponent } from 'ndjjd-utils';
const componentId = ref("组件ID");
</script>

上述方式会从远程服务器拉取一个Vue的组件，进行渲染;

在ts或者js中使用工具函数类的包时，例如:

import { importModule, load, importAsyncModule } from 'ndjjd-utils'

/**
 * 组件内容包括
 * {
 *  id: string; 组件ID
 *  name: string; 组件中文名称 比如 "测试包"
 *  module: string; 组件在项目中使用名称比如 "TestUtils"
 * }
 */
// 可以在main.js 入口处，统一加载远程组件
await load(["组件ID"]);

// 使用包
// importAsyncModule 未异步获取包
// const testUtils = await importAsyncModule("@Ndd/TestUtils");
const testUtils = importModule("@Ndd/TestUtils");

/**
 * 假如 TestUtils 导出了一个helloWorld函数 例如
 *
 * export function helloWorld(name){
 *  console.log("helloWorld: " + name);
 * }
 */
testUtils.helloWorld("南岛聚集地"); // 输出 helloWorld: 南岛聚集地

addDependencies的使用 在编译组件的实际应用中，可能不想把所有的依赖都打入到组件中。这样的组件。在使用之前需要把组件注入到我们的库中

/**
 * 当我们编译的组件。忽略了某些包的时候，例如 有一个 api的包
 * import axios from 'axios';
 *
 * export function getData(){
 *  return axios.get("/api");
 * }
 *
 * 例如这样的代码编译之后。忽略了axios
 */
// main.js
// 注意假如到我们的依赖中 必须使用 * as name 这样的导入方式，这样不会漏掉一些非default的函数或类
import * as axios from 'axios';
import {addDependencies, load} from 'ndjjd-utils';
addDependencies([
  {
    // name未原有包的名称
    name: "axios",
    module:axios
  }
])

await load("组件ID");

// vue 中
import { importModule, } from 'ndjjd-utils'
const {getData} = importModule("@ndd/api");
getData().then(res=>{
  console.log(res);
})