客户端javascript中使用的模块？

Question

我正在学习javascript。我读到了如何在javascript模块之间导入和导出东西。我正在制作一个由几个文件组成的javascript游戏。每个都定义了一个类及其方法。

我有两个问题：

1. 只有一个文件实际上包含与DOM交互的代码，因此在HTML中我是否需要为每个js文件包含<script src="..."></script>？或只是处理DOM的那个？
2. 我首先尝试仅引用index.html中的一个js文件，然后导出其他js文件中定义的类，并将它们导入到使用这些类的js文件中。但是没有浏览器似乎理解导入/导出语句？是不是在客户端javascript上完成了？

Answer 1

1. 您需要在index.html中引用所有js文件，因为您的游戏将使用其他文件作为条目文件的模块。并且需要在输入文件之前引用模块文件。

2. 是的，导出/导入不能直接在客户端使用，它在nodejs平台中使用，主要是由一些工具如打字稿或babel支持。但你可以使用前面提到的一些工具来使用它们。

所以，我认为您可以先使用babel将代码转换为es5目标，然后再在浏览器中引用它们。

Answer 2

如果您的意思是ES6导入，import Whatever from “some-resource”;语句要求“some-statement”为URL。

此外，“入口点”脚本应为<script type=“module” src=“some-url”></script>。 “模块”告诉用户代理它正在加载JavaScript模块并且应该解析import语句。

如果一个脚本正确<script>依赖关系链的其余部分，则只需要包含一个imports标记。

浏览器对此的支持仍然有限，这就是为什么在功能完全充实之前仍然建议使用webpack或其他一些构建步骤。

Answer 3

approximatively 75% of all users browser (caniuse.com)

当前支持导入/导出语法。

第一件事是将type="module"作为<script tag> （例如<script type="module">）的属性

然后您可以在模块中import / export。而且 YES 模块需要导出一个值（变量，函数...）才能在另一个脚本中使用它，但这是可选的，因为您可以执行脚本而无需导出任何内容。

文档：

• import
• export
• Very good article on how to use module in browsers

请记住，尚不支持此功能，如果您考虑到浏览器的兼容性，则需要使用polyfill