I have IIFE https://developer.mozilla.org/en-US/docs/Glossary/IIFE旧应用程序中需要适用于 IE10+ 的某些库代码的函数（无 ES6 模块加载等）。

但是，我开始开发一个将使用 ES6 和 TypeScript 的 React 应用程序，并且我想重用已有的代码而不重复文件。经过一番研究后，我发现我想使用 UMD 模式来允许这些库文件同时工作<script src=*>导入并允许 React 应用程序通过 ES6 模块加载导入它们。

我想出了以下转换：

var Utils = (function(){
  var self = {
    MyFunction: function(){
      console.log("MyFunction");
    }
  };
  return self;
})();

to

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
    typeof define === 'function' && define.amd ? define(['exports'], factory) :
    (factory((global.Utils = {})));
}(this, (function (exports) { 
  exports.MyFunction = function(){
      console.log("MyFunction");
    };
})));

这将允许通过加载Import Utils from './Utils.js'命令并允许使用脚本标签插入它<script src='Utils.js'></script>

然而，我的一些 IIFE 使用其他 IIFE 作为依赖项（我知道这很糟糕，但这是事实）。

var Utils = Utils; // Used to indicate that there is dependency on Utils
var RandomHelper = (function(){
  var self = {
    DoThing: function(){
      Utils.MyFunction();
    }
  };
  return self;
})();

如果正确转向RandomHelper and Utils到可以导入的文件中，React 应用程序与此技术不兼容。做事简单

Import Utils from './Utils.js'
Import RandomHelper from './RandomHelper.js'

不起作用，因为我相信 Utils 不是窗口范围的。它将毫无问题地加载，但是RandomHelper.DoThing()将抛出 Utils 未定义。

在旧版应用程序中

<script src='Utils.js'></script>
<script src='RandomHelper.js'></script>

工作完美。

我怎样才能让 RandomHelper 能够在 React 应用程序中使用 Utils，保持 IE 和 ES5 兼容，但仍然可以在 React 中工作。也许以某种方式设置窗口/全局变量？

PS：我知道 ES6 模块加载的目的是处理依赖关系，而我现有的 IIFE 并不理想。我计划最终切换 es6 类和更好的依赖控制，但现在我想使用可用的内容而无需重写

我们首先要解决这个问题模块功能，如果未显式导出，则私有范围仅限于定义模块。你无法回避这个事实。但您可以考虑一些解决方法。

1. 假设对遗留代码的最小修改是可以接受的

对遗留代码进行最小更改的解决方法是简单地添加Utils and RandomHelper to the window目的。例如，改变var Utils = (...)(); to window.Utils = (...)();。因此，该对象将可以通过两个遗留代码（通过加载）从全局对象访问import）和较新的代码库。

2. 假设绝对不能容忍对遗留代码进行任何修改

应创建一个新的 ES6 模块作为加载旧脚本的代理：

// ./legacy-main.js

const utilsScript = await fetch( './Utils.js' )
const randomHelperScript = await fetch( './RandomHelper.js' )

const utilsScriptText = await utilsScript.text()
const randomHelperScriptText = await randomHelperScript.text()

// Support access to `Utils` via `import` 
export const Utils = Function( `${utilsScriptText}; return Utils;` )()
// Additionally support access via global object 
Object.defineProperty(window, 'Utils', { value: Utils })

// Support access to `RandomHelper` via `import`
// Note that `Utils` which is a dependency for `RandomHelper` ought to be explicitly injected
// into the scope of execution of `RandomHelper`.
export const RandomHelper = Function( 'Utils', `${randomHelperScriptText}; return RandomHelper;` )( Utils )
// Additionally support access via global object 
Object.defineProperty(window, 'RandomHelper', { value: RandomHelper })

最后，您可以导入Utils and RandomHelper from legacy-main.js在需要的时候：

import { Utils, RandomHelper } from './legacy-main.js'

Utils.MyFunction()
RandomHelper.DoThing()