返回 当浏览器内部的
当浏览器内部的`antd`遇见`hel-micro`和`tdesign`
前端
2023-12-09 16:58:31
好的,以下是使用 hel-micro 制作远程antd、tdesign-react 的文章:
当浏览器内部的antd
遇见hel-micro
和tdesign
简介
微模块的出现为组件的远程引用提供了可能,将原先需要构建后才能在项目中使用的组件库转换为不需要构建,通过 npm 直接下载即可使用的远程组件库。
那么使用 hel-micro
这个 SDK 是如何制作 antd
和 tdesign
的远程组件库的呢?
一、基础步骤
- 安装
hel-micro
npm install hel-micro
- 初始化
hel-micro
项目hel-micro init
- 添加远程组件库依赖
npm install antd tdesign-react
二、生成项目文件
-
新建根组件
App.js
import React from 'react'; const App = () => { return ( <div> <Button type="primary">Button</Button> </div> ); }; export default App;
-
新建导出组件文件
MyButton.js
import React, { useRef } from 'react'; import ReactDOM from 'react-dom'; import { Button } from 'antd'; const MyButton = ({ text }) => { const ref = useRef(); useEffect(() => { ReactDOM.render(<Button type="primary">{text}</Button>, ref.current); }, []); return <div ref={ref} />; }; export default MyButton;
-
修改
hel-micro.config.js
文件module.exports = { remotes: [ { name: 'my-antd', entry: './MyButton.js', }, ], };
三、发布远程组件库
-
构建项目
npm run build
-
将构建后的文件发布到 npm 上
npm publish
四、使用远程组件库
-
在项目中安装远程组件库
npm install my-antd
-
在项目中引用远程组件库
import MyButton from 'my-antd'; const App = () => { return ( <div> <MyButton text="Button" /> </div> ); }; export default App;
五、总结
通过 hel-micro
SDK,我们可以轻松地制作远程组件库,将原来需要构建才能使用的组件库转换为可以直接下载即可使用的远程组件库。
这不仅提高了开发效率,而且也减少了项目构建时的依赖关系,使得项目更加轻量和易于维护。