加载npm远程组件代码，并引入到项目

通过npm上的url地址，动态加载组件；

url的格式：https://cdn.jsdelivr.net/npm/{组件名}@{版本号}/{文件路径}

加载到react项目

const Test = React.lazy(() => loadRemoteComponent('npm:url'));

// 加载组件
async function loadRemoteComponent(url: string){
	const script = await fetch(url)
    .then(res => res.text());

  const module = { exports:{} };
  const exports = {};
  const require = (id: string) => {
    if (id === 'react'){
      return React;
    }
  }

  const func = new Function('module', 'exports', 'require', script);
  func(module, exports, require);

  return { default: module.exports } as any;
}

加载到vue项目下

const Test = () => loadRemoteComponent('https://cdn.jsdelivr.net/npm/vue');

// 加载组件
async function loadRemoteComponent(url){
  const script = await fetch(url)
    .then(res => res.text());
    console.log(script, "loadRemoteComponent")

  const module = { exports:{} };
  const exports = {};
  const require = (id) => {
    // react环境下
    // if (id === 'react'){
    //   return React;
    // }
  }

  const func = new Function('module', 'exports', 'require', script);
  func(module, exports, require);

  return { default: module.exports };
}
Test();