Skip to content

Latest commit

 

History

History
148 lines (101 loc) · 7.43 KB

README.en.md

File metadata and controls

148 lines (101 loc) · 7.43 KB
Raw

简体中文 | English

hel-logo

Doc

hel-micro, module federation sdk, build-free, hot-update, toolchain-independent micro-module solution ❤️

see doc: https://tnfe.github.io/hel

article

  1. hel-micro Module Federation New Revolution

  2. Using hel-micro to make remote antd, tdesign-react

video

  1. [The first video tutorial] Develop, publish, and use remote js library based on hel-micro
  2. [The second phase of the video tutorial] Local joint debugging based on the remote js library developed by hel-micro

template

Users can refer to module development tutorial, and based on hel-eco Various template projects provided can be slightly adjusted to publish various types of hel remote modules

Example Name/Function Usage Example Template Address Template Description Hosting Location
Remote ts library codesandbox [remote-lib-ts](https://github.com/hel-eco/hel-tpl- remote-lib) webpack development and packaging unpkg
Remote react js components codesandbox [remote-react-comp](https://github.com/hel -eco/hel-tpl-remote-react-comp) webpack development and packaging unpkg
Remote react ts components codesandbox [remote-react-comp-ts](https://github.com /hel-eco/hel-tpl-remote-react-comps) webpack development and packaging unpkg
Remote vue2 js component codesandbox [remote-vue-comp](https://github.com/hel -eco/hel-tpl-remote-vue-comp) webpack development and packaging unpkg, github.io index.html , [unpkg index.html](https://unpkg.com/hel-tpl-remote- [email protected]/hel_dist/index.html)
Remote vue3 ts components codesandbox remote-vue3-comps-ts vite or webpack development, webpack packaging [unpkg](https://unpkg.com/hel-tpl -remote-vue3-comps-ts/)

Actual combat

The hel remote module released after the transformation based on the template project

Module Name/Function Online Demo Repository Address Description Hosting Location
hel-lodash codesandbox gihub lodash remote package unpkg
hel-antd codesandbox gihub antd remote package unpkg
hel-tdesign-react codesandbox [gihub](https://github.com/hel-eco/hel- tdesign-react) tdesign-react remote package unpkg

Why hel-micro

Fast access, 0 intrusion, easy to use: image

Let the module federation technology be upgraded from the build tool plug-in level to the sdk level, with more flexible use and better module circulation (toolchain irrelevant): image

How to use remote modules

Only one npm command is needed to load a remote module, see the example below online example

  • 1 Install hel-micro
npm i hel-micro
  • 2 Lazy load remote modules

Example: calling a method of the hel-lodash module

import { preFetchLib } from 'hel-micro';
async function ran(seed) {
  const mod = await preFetchLib('hel-lodash'); // The first load triggers the download of the module, and then it will be obtained from the hel-micro cache
  const num = mod.myUtils.num.random(500);
  return num;
}
  • 3 Preload remote modules

Example: Calling its module method after statically importing hel-lodash

Install hel-lodash

npm i hel-lodash

Execute the module pull action first

import { preFetchLib } from 'hel-micro';

async function main() {
  await preFetchLib('hel-lodash');
  await import('./loadApp'); // move the entry file backward
}

main().catch(console.error);

Statically import hel-micro in any file associated with the entry file and call the module method

import m from 'hel-lodash';
console.log(m.myUtils.num.random(500);) // get random number

hel-micro

Front-end widgetized sdk, based on hel-micro, it can realize cross-project code sharing, module hot update, micro front-end architecture and other functions

hel-micro-react

React component loading library implemented by hel-micro based api.

🐚 Who is using

You are welcome to provide your company logo, company name, screenshots, website and other information in this issue, and provide other users with some reference information, so that in the future More people are involved in the construction and use of hel-micro.


Tencent Cloud
Tencent News

📦Learn more

Welcome to join the group to learn more. Since the WeChat discussion group is full of 200 people, you need to add the author's WeChat account or QQ group account, and then invite you to the hel-micro discussion group (remember to note hel when adding a sign)

image

👅License

hel-micro is released under the MIT License. http://www.opensource.org/licenses/mit-license