通过ajax加载js沙箱机制

前言

在做微前端的时候,有时候会遇到不同版本的问题。但是加载的js 又不能污染全局,只能在对应的scope中生存。

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

解决方案

通过模拟一个类似commonjs的语法，然后通过类似eval或者Function()()来自执行

import axios from "axios";

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

  // 模拟一个 CommonJS 的执行环境
  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;
}