乐趣区

关于javascript:使用helmicro制作远程antdtdesignreact

jiezi

hel-micro，模块联邦 sdk 化，免构建、热更新、工具链无关的微模块计划，欢送关注与理解

制作近程 react 图形组件库

应用 hel-micro 模块联邦技术 sdk 化计划，基于 react 组件模板制作近程 antd 库（hel-antd）、近程 tdesign-react 库（hel-tdesign-react）。

hel-antd、hel-tdesign-react 两者制作过程齐全一样，区别仅是装置的库不同，你能够参考此文将其余优良的 react 图形组件库制作为对应的近程库，以下步骤以制作 hel-antd 为主。

传统的 react 图形组件库导入形式，多我的项目降级时很麻烦：

基于 hel-micro 晋升为近程库后，被其余我的项目应用时，理论运行逻辑不参加我的项目打包，能够做到应用方无感知动静降级（顺带也升高了我的项目打包体积，并进步编译速度），以 antd 为例，如果你有 5 个我的项目用到了 antd2.20，某一天暴露出 2.20 存在了一个重大 bug，官网降级到了 2.21 版本，这时候你须要把你的 5 个我的项目全副装置一下最新的 antd 版本并重新部署一遍，而如果是援用的 hel-antd，就只须要基于 2.21 版本从新公布一下 hel-antd 即可，所用应用方就能够运行最新版本的 antd 了。

基于代理对象技术应用方能够像应用本地 antd 一样应用近程 antd、近程 tdesign-react，见在线示例：应用 hel-antd
、应用 hel-tdesign-react

克隆 react 模板库

克隆 react 模板库，保留为 hel-antd 目录，接下来的步骤里，咱们都将基于此目录下的文件革新

git clone https://github.com/hel-eco/hel-tpl-remote-react-comp-ts.git hel-antd

批改模块名称

  • 批改 package.json 里的模块名称为hel-antd

  • “name”: “hel-tpl-remote-react-comps-ts”,
  • “appGroupName”: “hel-tpl-remote-react-comps-ts”,
  • “name”: “hel-antd”,

  • “appGroupName”: “hel-antd”,

  • 批改我的项目里 src/configs/subApp.ts 的 LIB_NAME 为 hel-antd（如不批改，构建时会报模块名不统一谬误）

  • export const LIB_NAME = ‘hel-tpl-remote-react-comps-ts’;

  • export const LIB_NAME = ‘hel-antd’;

    > 可依据须要批改为本人想要的命名，此处仅为示例

装置 antd

此处咱们基于 4.23.4 版本的 antd 构建近程 antd 库

npm i [email protected]

导出 antd 模块

导出 antd 模块次要蕴含 2 个局部，

  • 导出 运行时代码 供webpack打包用，不便 hel-micro 能够动静拉取已构建的运行代码
  • 导出 代理对象 供rollup打包用，方便使用方能够装置近程模块类型文件，并在文件头应用 import 动态导入近程模块

运行时代码导出

咱们先在 src/components 下导出咱们想要裸露的近程组件

- import HelloRemoteReactComp from './HelloRemoteReactComp';
- export {
-   HelloRemoteReactComp,
- }

+ import * as antd from 'antd';
+ export {default as TestExport} from './TestExport';
+ export default antd;

留神此处额定导出了一个 TestExport 组件，用于示范能够扩大原始 antd 库退出本人的新组件

function TestExport() {return <span>TestExport Component</span>};
TestExport.displayName = 'TestExport';
export default TestExport;

而后在 src/entrance/libProperties.ts 里合并导出模块（此合并逻辑也可在 src/components 外面解决），并同时裸露推导出的模块类型对象

- import comps from 'components';
- export type LibProperties = typeof comps;
- export default comps;

+ import antd, {TestExport} from 'components';
+ const toExport = {...antd, TestExport};
+ export type LibProperties = typeof toExport;
+ export default toExport;

代理对象导出

src/entrance/libTypes.ts文件内容示意导出代理对象，对象的理论内容由应用方 hel-micro 模块的 preFetchLib 函数填充，如上面的一行也不批改也是没问题的

import type {LibProperties} from './libProperties';
import {exposeLib} from 'hel-lib-proxy';
import {LIB_NAME} from 'configs/subApp';

export const lib = exposeLib<LibProperties>(LIB_NAME);
export type Lib = LibProperties;
export default lib;

但应用方只能应用 default 导出语法，而不能在文件头间接解构

// ok
import antd from 'hel-antd';
const {Button} = antd;

// error
import  {Button} from 'hel-antd';

为了反对文件头间接解构的写法，咱们须要调整 src/entrance/libTypes.ts 文件内容，独自导出 antd 的各个组件

// 以下单个导出，反对 import {Button} from 'hel-antd'; 间接解构的语法
+ export const Affix = lib.Affix;
+ export const Alert = lib.Alert;

引入款式文件

在 src/index.ts 文件里导入 antd 的款式文件，因 hel-antd 反对应用 css 变量自定义主题，所以导入的时调整后的款式文件（将原始 css 文件的要害色彩替换为 css 变量）

import {libReady, isMasterApp} from 'hel-lib-proxy';
import {LIB_NAME} from './configs/subApp';
+ import './styles/theme.css';
+ import './styles/antd-style.css';

如不须要此性能，间接导入原始款式文件即可

import {libReady, isMasterApp} from 'hel-lib-proxy';
import {LIB_NAME} from './configs/subApp';
+ import 'antd/dist/antd.css'

打包与公布

批改 package.json 里的 version 版本号为1.0.0，运行 build 命令打包

npm run build

运行 publish 命令公布

npm publish

应用近程 antd

应用近程 antd 包含预加载近程模块和导入代理模块两个步骤

预加载近程模块

应用 npm 命令依照代理模块

npm i hel-antd

入口文件后移，绑定 react 公共对象，预加载 hel-antd，让近程模块的理论运行代码通过hel-micro 填充到代理模块里

import {preFetchLib, bindReactRuntime} from "hel-micro";
import React from "react";
import ReactDOM from "react-dom";
import ReactIs from "react-is";

bindReactRuntime({React, ReactDOM, ReactIs});

async function main() {
  // 预加载近程模块，例如 hel-antd
  await preFetchLib("hel-antd", { enableDiskCache: true});
  await import("./loadApp"); // 你的原始入口文件
}

main().catch(console.error);

导入代理模块

接下来你能够在我的项目里除 入口文件 之外的其余任意文件想导入本地模块一样导入近程模块并应用了。

import {Button} from "hel-antd";

// render antd  Button
<Button danger>remote antd button</Button>

新窗口拜访在线示例：应用 hel-antd
、应用 hel-tdesign-react

自定义 cdn

hel-micro 默认采纳的是 unpkg 文件 cdn 服务，如有自建的 unpkg 私服，可调整打包策略注入本人的 cdn 服务前缀，只须要批改 config/subApp.js 即可

- const subApp = helDevUtils.createReactSubApp(pkg, { npmCdnType: 'unpkg'});
+ const subApp = helDevUtils.createReactSubApp(pkg, { npmCdnType: 'unpkg', homePage: 'http://my-unpkg.com'});

自建 npm+unpkg 私服可参考 issue 19

结语

应用hel-micro，能够用极低的代价来铺开模块联邦技术，劣势见往期文章 hel-micro 模块联邦新反动，欢送理解与应用 ^_^

_
附：我的其余开源作品友链（欢送关注与理解）：

concent，一个自带依赖收集、提供 setup 个性的 react 数据流计划

limu，一个比 immer 更高效的 js 不可变操作库

退出移动版