为什么不能在标准 JavaScript 中导入模块？答案

【问题标题】：Why can't modules be imported in standard JavaScript?为什么不能在标准 JavaScript 中导入模块？
【发布时间】：2023-04-08 11:43:02
【问题描述】：

我需要使用仅作为模块提供的 Javascript 库 (https://unpkg.com/troika-3d-text@0.19.0/dist/textmesh-standalone.esm.js?module)。当我尝试在我的非模块脚本 build.js 中导入类 TextMesh 时，控制台给了我错误消息：

不能在模块外使用 import 语句

所以我需要将 build.js 做成一个模块。但是我有很多非模块脚本，它们依赖于那个 build.js，现在也需要成为模块。而且我还有许多其他非模块脚本，它们依赖于它们，然后它们也需要成为模块。以此类推，...

我对 JavaScript 模块概念的误解在哪里，因为它不可能是模块的意图，所有直接依赖于“第一个”模块的脚本也必须成为一个模块？！

【问题讨论】：

你说的脚本，它们不是模块，是吗？
在使用 import 或 export 语句之前，您必须将脚本与 type="module" 属性链接。
你必须通过type="module"告诉浏览器脚本是一个模块
@JayCodist：完全正确 - 我调整了我的问题，谢谢！
@Fritzdultimate：谢谢，我知道如何导入模块。但我的问题更笼统。

标签： javascript

【解决方案1】：

包含脚本属性module:

<script type="module" src="jsFile.js"></script>

如果您想使用 Node.js 环境中的模块，请使用扩展名 .mjs 命名文件并使用以下命令运行文件：

node --experimental-modules jsFile.mjs

【讨论】：

谢谢，我知道如何导入模块。但我的问题更笼统。

【解决方案2】：

您必须通过使用type="module" 属性例如告诉浏览器脚本是一个模块

<script src="source_url" type="module"></script>

【讨论】：

谢谢，我知道如何导入模块。但我的问题更笼统。

【解决方案3】：

您甚至可以在非模块脚本中使用dynamic import()：

(async()=>{
const { TextMesh } = await import("https://unpkg.com/troika-3d-text@0.19.0/dist/textmesh-standalone.esm.js?module");
console.log( TextMesh );
})();

【讨论】：