返回

当浏览器内部的`antd`遇见`hel-micro`和`tdesign`

前端

好的,以下是使用 hel-micro 制作远程antd、tdesign-react 的文章:

当浏览器内部的antd遇见hel-microtdesign

简介

微模块的出现为组件的远程引用提供了可能,将原先需要构建后才能在项目中使用的组件库转换为不需要构建,通过 npm 直接下载即可使用的远程组件库。
那么使用 hel-micro 这个 SDK 是如何制作 antdtdesign 的远程组件库的呢?

一、基础步骤

  1. 安装hel-micro
    npm install hel-micro
    
  2. 初始化hel-micro项目
    hel-micro init
    
  3. 添加远程组件库依赖
    npm install antd tdesign-react
    

二、生成项目文件

  1. 新建根组件App.js

    import React from 'react';
    
    const App = () => {
      return (
        <div>
          <Button type="primary">Button</Button>
        </div>
      );
    };
    
    export default App;
    
  2. 新建导出组件文件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;
    
  3. 修改hel-micro.config.js文件

    module.exports = {
      remotes: [
        {
          name: 'my-antd',
          entry: './MyButton.js',
        },
      ],
    };
    

三、发布远程组件库

  1. 构建项目

    npm run build
    
  2. 将构建后的文件发布到 npm 上

    npm publish
    

四、使用远程组件库

  1. 在项目中安装远程组件库

    npm install my-antd
    
  2. 在项目中引用远程组件库

    import MyButton from 'my-antd';
    
    const App = () => {
      return (
        <div>
          <MyButton text="Button" />
        </div>
      );
    };
    
    export default App;
    

五、总结

通过 hel-micro SDK,我们可以轻松地制作远程组件库,将原来需要构建才能使用的组件库转换为可以直接下载即可使用的远程组件库。
这不仅提高了开发效率,而且也减少了项目构建时的依赖关系,使得项目更加轻量和易于维护。