简体中文 | English
hel-micro, module federation sdk, build-free, hot-update, toolchain-independent micro-module solution ❤️
see doc: https://tnfe.github.io/hel
- [The first video tutorial] Develop, publish, and use remote js library based on hel-micro
- [The second phase of the video tutorial] Local joint debugging based on the remote js library developed by hel-micro
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:/hel-eco/hel-tpl- remote-lib) | webpack development and packaging | unpkg |
| Remote react js components | codesandbox | [remote-react-comp](https:/hel -eco/hel-tpl-remote-react-comp) | webpack development and packaging | unpkg |
| Remote react ts components | codesandbox | [remote-react-comp-ts](https: /hel-eco/hel-tpl-remote-react-comps) | webpack development and packaging | unpkg |
| Remote vue2 js component | codesandbox | [remote-vue-comp](https:/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/) |
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:/hel-eco/hel- tdesign-react) | tdesign-react remote package | unpkg |
Fast access, 0 intrusion, easy to use: 
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): 
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-lodashExecute 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 numberFront-end widgetized sdk, based on hel-micro, it can realize cross-project code sharing, module hot update, micro front-end architecture and other functions
React component loading library implemented by hel-micro based api.
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 |
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)
hel-micro is released under the MIT License. http://www.opensource.org/licenses/mit-license