{"id":19965638,"url":"https://github.com/tencent/hel","last_synced_at":"2025-05-16T00:00:33.173Z","repository":{"id":50629515,"uuid":"519673781","full_name":"Tencent/hel","owner":"Tencent","description":"A module federation SDK which is unrelated to tool chain for module consumer. 工具链无关的运行时模块联邦sdk.","archived":false,"fork":false,"pushed_at":"2025-05-13T09:55:34.000Z","size":6329,"stargazers_count":1053,"open_issues_count":17,"forks_count":91,"subscribers_count":13,"default_branch":"main","last_synced_at":"2025-05-13T10:45:22.369Z","etag":null,"topics":["better-module-federation","hel","hel-micro","micro-frontend","module-federation","runtime-module-federation"],"latest_commit_sha":null,"homepage":"https://tencent.github.io/hel/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Tencent.png","metadata":{"files":{"readme":"README.en.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-07-31T03:49:06.000Z","updated_at":"2025-05-13T09:55:38.000Z","dependencies_parsed_at":"2023-10-11T06:47:47.946Z","dependency_job_id":"763b5982-7d40-4147-9102-d8ffc5f144ab","html_url":"https://github.com/Tencent/hel","commit_stats":{"total_commits":402,"total_committers":6,"mean_commits":67.0,"dds":0.02487562189054726,"last_synced_commit":"25694cb82f254a5f6341433302cac37dc885b348"},"previous_names":["tnfe/hel"],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tencent%2Fhel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tencent%2Fhel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tencent%2Fhel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tencent%2Fhel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Tencent","download_url":"https://codeload.github.com/Tencent/hel/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254442854,"owners_count":22071877,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["better-module-federation","hel","hel-micro","micro-frontend","module-federation","runtime-module-federation"],"created_at":"2024-11-13T02:29:52.989Z","updated_at":"2025-05-16T00:00:33.087Z","avatar_url":"https://github.com/Tencent.png","language":"JavaScript","readme":"[简体中文](./README.md) | English\n\n\u003cp align=\"center\"\u003e\n\u003cimg width=\"620px\" alt=\"hel-logo\" src=\"https://user-images.githubusercontent.com/7334950/186912479-463a6788-41fd-474d-83ed-08314909d70d.png\" /\u003e\n\u003c/p\u003e\n\n## [Doc](https://tnfe.github.io/hel)\n\n**hel-micro**, module federation sdk, build-free, hot-update, toolchain-independent micro-module solution ❤️\n\nsee doc: https://tnfe.github.io/hel\n\n## article\n\n1. [hel-micro Module Federation New Revolution](https://dev.to/fantasticsoul/why-is-hel-micro-a-better-implementation-of-module-federation-21ji)\n\n2. [Using hel-micro to make remote antd, tdesign-react](https://juejin.cn/post/7150639599499509797)\n\n## video\n\n1. [The first video tutorial] [Develop, publish, and use remote js library based on hel-micro](https://www.bilibili.com/video/BV15t4y1u7i5/?vd_source=51bc50bf5f860e0d778c49b00d192cee)\n1. [The second phase of the video tutorial] [Local joint debugging based on the remote js library developed by hel-micro](https://www.bilibili.com/video/BV1Dd4y1y7Wj/?vd_source=51bc50bf5f860e0d778c49b00d192cee)\n\n## template\n\nUsers can refer to [module development tutorial](https://tnfe.github.io/hel/docs/tutorial/helmod-dev), and based on [hel-eco](https://github.com/hel-eco) Various template projects provided can be slightly adjusted to publish various types of hel remote modules\n\n| Example Name/Function | Usage Example | Template Address | Template Description | Hosting Location |\n| --- | --- | --- | --- | --- |\n| Remote ts library | [codesandbox](https://codesandbox.io/s/hel-lodash-zf8jh8) | [remote-lib-ts](https://github.com/hel-eco/hel-tpl- remote-lib) | webpack development and packaging | [unpkg](https://unpkg.com/hel-tpl-remote-lib/) |\n| Remote react js components | [codesandbox](https://codesandbox.io/s/demo-load-remote-react-comp-2bnpl0) | [remote-react-comp](https://github.com/hel -eco/hel-tpl-remote-react-comp) | webpack development and packaging | [unpkg](https://unpkg.com/hel-tpl-remote-react-comps/) |\n| Remote react ts components | [codesandbox](https://codesandbox.io/s/demo-load-remote-react-comp-2bnpl0) | [remote-react-comp-ts](https://github.com /hel-eco/hel-tpl-remote-react-comps) | webpack development and packaging | [unpkg](https://unpkg.com/hel-tpl-remote-react-comps-ts/) |\n| Remote vue2 js component | [codesandbox](https://codesandbox.io/s/demo-load-remote-vue-comp-st0295) | [remote-vue-comp](https://github.com/hel -eco/hel-tpl-remote-vue-comp) | webpack development and packaging | [unpkg](https://unpkg.com/hel-tpl-remote-vue-comps/), [github.io index.html ](https://hel-eco.github.io/hel-tpl-remote-vue-comp/index.html), [unpkg index.html](https://unpkg.com/hel-tpl-remote- vue-comps@1.1.3/hel_dist/index.html) |\n| Remote vue3 ts components | [codesandbox](https://codesandbox.io/s/demo-load-remote-vue3-comp-2fd34s?file=/src/main.js) | [remote-vue3-comps-ts ](https://github.com/hel-eco/hel-tpl-remote-vue3-comps-ts) | vite or webpack development, webpack packaging | [unpkg](https://unpkg.com/hel-tpl -remote-vue3-comps-ts/) |\n\n## Actual combat\n\nThe hel remote module released after the transformation based on the template project\n\n| Module Name/Function | Online Demo | Repository Address | Description | Hosting Location |\n| --- | --- | --- | --- | --- |\n| hel-lodash | [codesandbox](https://codesandbox.io/s/hel-lodash-zf8jh8) | [gihub](https://github.com/hel-eco/hel-lodash) | lodash remote package | [unpkg](https://unpkg.com/hel-lodash/) |\n| hel-antd | [codesandbox](https://codesandbox.io/s/hel-demo-use-antd-tjy3ep) | [gihub](https://github.com/hel-eco/hel-antd) | antd remote package | [unpkg](https://unpkg.com/hel-antd/) |\n| hel-tdesign-react | [codesandbox](https://codesandbox.io/s/hel-demo-use-tedesign-nw8bfb) | [gihub](https://github.com/hel-eco/hel- tdesign-react) | tdesign-react remote package | [unpkg](https://unpkg.com/hel-tdesign-react/) |\n\n## [Why hel-micro](https://tnfe.github.io/hel)\n\nFast access, 0 intrusion, easy to use: ![image](https://user-images.githubusercontent.com/7334950/198016212-a0002896-caf1-4b59-aa32-e8fb09b15f33.png)\n\nLet 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): \u003cimg width=\"1226\" alt=\"image\" src=\"https://user-images.githubusercontent.com/7334950/198015955-1e294f9c-4a6b-4482-8d54-100a5d3bd38d.png\" /\u003e\n\n### How to use remote modules\n\nOnly one npm command is needed to load a remote module, see the example below [online example](https://codesandbox.io/s/hel-lodash-zf8jh8?file=/src/App.js)\n\n- 1 Install `hel-micro`\n\n```bash\nnpm i hel-micro\n```\n\n- 2 Lazy load remote modules\n\nExample: calling a method of the `hel-lodash` module\n\n```ts\nimport { preFetchLib } from 'hel-micro';\nasync function ran(seed) {\n  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\n  const num = mod.myUtils.num.random(500);\n  return num;\n}\n```\n\n- 3 Preload remote modules\n\nExample: Calling its module method after statically importing `hel-lodash`\n\nInstall `hel-lodash`\n\n```bash\nnpm i hel-lodash\n```\n\nExecute the module pull action first\n\n```ts\nimport { preFetchLib } from 'hel-micro';\n\nasync function main() {\n  await preFetchLib('hel-lodash');\n  await import('./loadApp'); // move the entry file backward\n}\n\nmain().catch(console.error);\n```\n\nStatically import `hel-micro` in any file associated with the entry file and call the module method\n\n```ts\nimport m from 'hel-lodash';\nconsole.log(m.myUtils.num.random(500);) // get random number\n```\n\n## [hel-micro](packages/hel-micro)\n\nFront-end widgetized sdk, based on hel-micro, it can realize cross-project code sharing, module hot update, micro front-end architecture and other functions\n\n## [hel-micro-react](packages/hel-micro-react)\n\nReact component loading library implemented by hel-micro based api.\n\n## 🐚 Who is using\n\nYou are welcome to provide your company logo, company name, screenshots, website and other information in this [issue](https://github.com/tnfe/hel/issues/31), 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.\n\n\u003ctable\u003e\n  \u003ctr\u003e\n      \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://console.cloud.tencent.com/wedata/share/overview\" target=\"_blank\"\u003e\n          \u003cimg width=\"140px;\" src=\"https://user-images.githubusercontent.com/7334950/197116513-7c7382b6-a5b5-4fb9-bcd7-2ec891804b7d.png\"\u003e\u003c/img\u003e\n        \u003c/a\u003e\n        \u003cbr/\u003e\n        \u003ca target=\"_blank\" href=\"https://console.cloud.tencent.com/wedata/share/overview\"\u003e\n          \u003cb\u003eTencent Cloud\u003c/b\u003e\n        \u003c/a\u003e\n      \u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\n         \u003ca href=\"https://news.qq.com/\" target=\"_blank\"\u003e\n          \u003cimg width=\"140px;\" src=\"https://user-images.githubusercontent.com/7334950/197115413-ede5f5fa-70dd-4632-b7f5-f6f8bc167023.png\"\u003e\u003c/img\u003e\n        \u003c/a\u003e\n        \u003cbr/\u003e\n        \u003ca target=\"_blank\" href=\"https://news.qq.com/\"\u003e\n          \u003cb\u003eTencent News\u003c/b\u003e\n        \u003c/a\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n## 📦Learn more\n\nWelcome 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)\n\n\u003cimg width=\"896\" alt=\"image\" src=\"https://user-images.githubusercontent.com/7334950/196099777-f0cd3b9b-bcd5-4a88-9d15-62da4a62fe6e.png\" /\u003e\n\n## 👅License\n\nhel-micro is released under the MIT License. http://www.opensource.org/licenses/mit-license\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftencent%2Fhel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftencent%2Fhel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftencent%2Fhel/lists"}