alobe / hel

a solution of using micro module for frontend development

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

hel-micro 模块联邦sdk化,免构建、热更新的微模块方案

why hel-micro

image

如何使用远程模块

仅需要一句npm命令即可载入远程模块,查看下面例子的线上示例

  • 1 安装hel-micro
npm i hel-micro
  • 2 惰性加载远程模块

示例:调用hel-lodash 模块的方法

import { preFetchLib } from 'hel-micro';
async function ran(seed){
  const mod = await preFetchLib('hel-lodash'); // 首次加载触发模块下载,之后会从hel-micro缓存获取
  const num = mod.myUtils.num.random(500);
  return num;;
};
  • 3 预加载远程模块

示例:静态导入hel-lodash后调用其模块方法

安装hel-lodash

npm i hel-lodash

先执行模块拉取动作

import { preFetchLib } from "hel-micro";

async function main() {
  await preFetchLib("hel-lodash");
  await import("./loadApp"); // 入口文件后移
}

在入口文件里关联的任意文件处静态导入hel-micro并调用模块方法

import m from 'hel-lodash';
console.log(m.myUtils.num.random(500);) // 获得随机数

前端微件化sdk,基于 hel-micro 可实现跨项目共享代码、模块热更新、微前端架构等功能

依赖 hel-micro 基础 api 实现的 react 组件加载库

About

a solution of using micro module for frontend development

License:MIT License


Languages

Language:TypeScript 59.1%Language:JavaScript 40.9%