在运行时将 AMD 模块转换为 ES6？

Posted 2023-05-07

【中文标题】在运行时将 AMD 模块转换为 ES6？

【英文标题】：Converting AMD module to ES6 at runtime?

【发布时间】：2020-01-10 08:04:46

【问题描述】：

我想使用select2 javascript 库。不幸的是，他们force the use of AMD on their users。

我想在我的代码中专门使用 ES6 模块。有没有办法让 ES6 模块导出由 AMD 异步初始化的变量？例如，我想做这样的事情：

const result = $.fn.select2.amd.require([
    "select2/data/array",
    "select2/utils"
], function (ArrayData, Utils)

  return "something";
);

export result as default;

这样，我可以将 AMD 丑陋的地方包裹起来，并将其作为 ES6 导入到其他任何地方。

【问题讨论】：

不确定这是否能解决您的问题，但您看过esm吗？

@jfriend00 是的，我想 ES6 导出 select2 库的一个组件。这就是我所要求的，但我无法弄清楚实现。

您不能直接导出异步加载的内容，因为模块的导出分配和返回发生在异步操作完成之前。

@jfriend00 我们可以导出承诺。问题是我们能否从 AMD 的require 中得到承诺。

您不需要得到 AMD 的承诺。您可以将自己的承诺包装在 AMD 负载周围并返回承诺。但是，这将通过 Promise 为您提供一个异步加载的接口，而不是典型的 ES6 接口。

【参考方案1】：

每Bergi:

你根本不会写任何 AMD。只需写 import ArrayData from 'select2/array/data';（或任何你需要的东西），然后让 webpack 处理剩下的事情。

事实证明，select2 比大多数库更成问题。它只增加了 jQuery 对象，而不是导出任何有意义的东西。幸运的是，我不必跳太多圈。

一旦 jQuery 对象被扩充，调用 const ArrayAdapter = $.fn.select2.amd.require("select2/data/array") 就会返回我想要的结果。

我的理解是一旦import "select2"返回，我们保证模块加载完成。因此，我们不需要使用amd.require() 的异步形式，因为所有组件都应该完全加载。至少，到目前为止我还没有遇到任何错误......