前言

在做微前端的時候,有時候會遇到不同版本的問題。但是加載的js 又不能污染全局,只能在對應的scope中生存。

const { default: react } = await load(
      "https://unpkg.com/react@16/umd/react.development.js"
);

解決方案

通過模擬一個類似commonjs的語法，然后通過類似eval或者Function()()來自執(zhí)行

import axios from "axios";

/* eslint-disable */
export default async function load(url, dependencies = {}) {
  const deps = dependencies;

  // 模擬一個 CommonJS 的執(zhí)行環(huán)境
  const module = {
    exports: {}
  };

  function require(moduleName) {
    return deps[moduleName];
  }

  const { data: sourceCode } = await axios.get(url);

  Function(`
    return function(module, exports, require) {
      ${sourceCode}
    }
  `)()(module, module.exports, require);

  return module.exports;
}