hel+发布了，一起体验原生跨端js模块联邦

Hel+，全新的Js模块联邦架构

当下大仓开发模式越来越流行，如何无痛接入模块联邦技术来让跨仓库、跨项目、跨运行环境的公共代码模块提高共享效率，并让模块可高效复用的同时还能够精细化地按不同策略来控制模块版本下发规则成为了巨大挑战，经过3年打磨，1000多此提交，Hel+ 应运而生，携带原生跨端 、大仓工程化 、双模驱动 、平台化等全新特性，为你带来极致且高效的Js模块联邦体验。

以下是部分特性简介，后续将通过多场分享解密hel+各项强大的能力。

原生跨端

新增 hel-micro-node 包，用于服务端模块动态更新

安装 hel cli

bash 复制代码

npm i create-hel -g

创建 demo 并启动

bash 复制代码

# 创建一个 node 服务端演示的目录 my-hel
hel init my-hel -t node-demo
cd my-hel
npm i
npm start

示例里 @hel-demo/mono-libs包体被 hel-micro-node 将映射后，将具备免服务重启就能动态更新的能力，并同时支持node, deno, bun 3大主流js运行时。

访问localhost:3000/update将人工触发版本切换

线上运行推荐搭配helpack来控制版本下发策略

双模驱动

@hel-demo/mono-libs既是hel模块也是普通的npm模块，当用户不使用 hel sdk映射时则固定使用来node_modules的代码，映射后则使用node_modules/.hel_modules的代码，一行配置文件即可完成两种模式的运行切换，是否采用微模块架构完全由用户决定。

大仓工程化

进化后的hel依然保留这工具链无关，接入简单的特点，并适配了流行的pnpm大仓开发模式，在相关工程化辅助包的支持下，用户靠编译模式即可觉得是否让前端工程采用微模块架构。

访问整体构建web应用，查看网络可看到无微模块拉取，表示大仓里的子模块随宿主打包到一起。

访问微模块构建web应用，查看网络可看到有微模块拉取，表示大仓里的子模块和宿主是各自独立部署的关系。

dom树上可看到微模块相关资源

以下是创建上述 hel 微模块大仓工程相关步骤。

创建 react-hel 大仓

bash 复制代码

hel init my-react # 创建后按提示启动工程
cd my-react
pnpm i
# 普通模式运行
pnpm start hub
# 微模块模式运行
pnpm start hub:hel

工程里将宿主和子模块分别放置到不同的目录。

其他ui框架如vue,svelte等均可参照此工程搭建。

编译

bash 复制代码

# 普通模式编译
pnpm start hub build
# 普通模式编译（同时生成 hel-meta.json 元数据）
pnpm start hub build:helm

创建新的宿主、模块

bash 复制代码

# 创建新的宿主应用 my-hub
pnpm start .create my-hub
# 创建新的ts子模块 my-lib，同时包名命名为 @my/lib(可选)
pnpm start .create-mod my-hub -n @my/lib
# 创建新的react组件子模块 my-comp
pnpm start .create-mod my-comp -t react-lib

编译、发布子模块

编译为同时具有 npm模块和hel模块特征的包体并发布

bash 复制代码

cd packages/my-lib
pnpm run build:nbsm
pnpm publish

注意一定要使用 pnpm publish 发布.

平台化

helpack已开源，你可以私有部署来管理你的 hel 模块了，从而避免模块托管到unpkg、jsdelivr等公网cdn服务。

bash 复制代码

git clone https://github.com/Tencent/hel
cd hel/helpack

启动helpack服务

bash 复制代码

$ cd server
$ npm i
$ npm run build        // 先编译ts文件
$ npm run start        // 再启动编译好的工程(默认启动快速模式的管理台)

启动使用hel的后端

bash 复制代码

cd hm-node-user
npm i
npm start:h 			// 连接本地 helpack

启动使用hel的前端

bash 复制代码

cd hm-browser-user
npm i
npm start:h 			// 连接本地 helpack

然后就可以按下图所示去切换前后台工程里运行的hel 模块的版本了