通过导入将 vanilla ES5 js 文件加载到 ES6 环境中

问题描述

场景

作为原型设计过程的一部分，我想引入 tween.js，我可以在 html 部分使用 <script> 标签，但我想将此 vanilla es5 文件直接导入到我的 es6 文件中各种原因。

我想做的是类似的事情

import * as TWEEN from 'import * as TWEEN from 'https://cdnjs.cloudflare.com/ajax/libs/tween.js/16.7.0/Tween.min.js'

虽然这似乎加载了远程文件，但我似乎没有获得 TWEEN.Tween 等方法。我怀疑所有 es5 都在某种关闭真空>垃圾收集中被处理。

问题

我意识到我可以在本地克隆这个文件，但我希望通过导入并不总是对 es6 友好的 cdn 文件来简化我的一次性样式原型设计。这可行吗？

解决方法

如果您想通过 Tween.min.js 标签注入托管在 CDN 上的 script，它将是 UMD 模块，该模块与 ESM 模块不兼容。

但是，您可以通过 window 对象使用/调用它，而不是像上面描述的那样导入它：

window.TWEEN 在您的 esm 模块中。

当 Tween.min.js 将被加载和执行时，它会附加到 window 对象。

只是为了确保您首先在 HTML 端单独加载该脚本，然后再加载 esm 脚本/应用程序，否则 window.TWEEN 可能未定义。