不安装依赖，直接调用 npm | 远端 React 组件做无代码平台当中，物料资源的管理是很重要的，而我们不可能为用户做

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第30天，点击查看活动详情。

在《不内卷的前端 | 2022 年中总结》中，我提到了正在做无代码平台。

而做无代码平台当中，物料资源的管理是很重要的，而我们不可能为用户做好所有的组件，所以还要提供额外的入口，我们需要一个组件能够通过一个url调用远程的组件，而且这样也可以联动到我们做好的组件平台。

所以我期望使用方式是这样的：

<Component
    // 组件源码js地址
    url={"http://xxx"} 
    // component props ... 
    width={500}
    height={350}
/>

这样，我们就能调用 url 地址所封装的组件，而这个地址是用户自己提供的，其实这种用法和微前端差不多，不过粒度是以组件js。

分析

所以步骤应该是如下

写一个组件
打包成umd或者cjs规范
上传到类似cdn的平台
通过接口访问到js后，通过 new Function 解析，获取到组件
展示

那 Component 组件实际上要做的是请求/解析，代替 import/require 的功能

我们可以先写一个组件

var sayHello = ()=> { console.log("Hello") }

exports.default = sayHello

再通过 ajax 获取到组件代码

//伪代码
const jsContent = getJs(jsurl
const requires = {}
const exports = {};
const module = { exports };
const fn = new Function("require", "module", "exports", jsContent);
fn(requires, module, exports);

但是我们知道，一个react组件不可能没有依赖，所以我们需要将依赖打包进组件里去，但是这样又会让组件的体积很大，甚至加载多几个组件，可能还有相同依赖加载的问题。

但是有舍有得，我认为这是能够接受的，我们也可以约定好，平台公用依赖有哪一些即可：比如 react、react-dom、antd等等

其他的就让组件一起打包到组件当中

我们使用解析的时候只需要构建好依赖即可：

const requires = {
  react:require('react'),
  //....other
};

再简单的封装一下，我们就可以通过组件的方式去调用远程组件了

总结

这种思路实际上拓展一下就是微前端，但是微前端会做的更多，也不仅仅是js，还有代理、路由等问题