我可以将 javascript 模块与 "regular" javascript 混合使用吗？

Question

我有一个页面设置，它引用了几个 javascript 文件并且在页面中有一些 javascript 内联，这是在加载页面时生成的。

其中一个 javascript 文件包含来自第三方库的 class。

另一个javascript文件包含与页面相关的各种变量、事件处理程序和函数，它们使用来自第三方库(var v = new thirdPartyClass(parameters);)的class。

第三方最近更新了他们的库并切换到使用模块，所以现在他们没有可用的 class，而是有可用的 class 导出。这是我第一次接触js模块

所以现在我必须从模块中导入 class，而不是包含 js 文件，据我所知。当我尝试这样做时，我收到一个只有模块可以导入的控制台错误。我将 type="module" 添加到我的 js 文件的 <script> 标签（它已经添加到第三方 js 脚本标签）然后我可以导入他们的 class，但现在我的函数不能'无法从页面访问 (function Uncaught ReferenceError: myFunction is not defined)。我不知道事件是否有效，因为它不再那么远了。

有什么方法可以使用他们新导出的 class 而不必将我的 js 文件完全重组为模块并更改页面以使用它？

Answer 1

您不能使用 var 在模块中创建全局变量。要访问该函数，您可以将其导出文件：

export myFunction;

并将其导入您需要的文件中：

import {myFunction} from "./relativeFilePath";

或者，如果您想从模块中创建一个全局变量，您可以将变量直接放入 window 对象中：

window.myFunction = function() {
  //code
};

Answer 2

您可以创建一个脚本类型模块，导入所需的对象并将它们放在 window.{您的对象的名称} 中：

<script type="module">
    import { theItem } from "/path/to/module.js";
    window.theItem = theItem;
</script>

剩下的代码可以用普通的js。

我可以将 javascript 模块与 "regular" javascript 混合使用吗？

Can I mix in javascript modules with "regular" javascript?

javascript

es6-modules