无法在模块外使用 import 语句 - Javascript

什么是模块

模块是现代 JavaScript 中一个非常重要的概念，它被用于组织和解耦代码，并提供一种封装和隔离代码的方式。模块可以是一个函数、一个类、一个对象等等，它们都可以被导出和导入。

通过导入其他模块，我们可以在我们的代码中使用它们提供的功能，而无需了解它们的内部实现。

import 语句

在 JavaScript 中，我们可以使用 import 语句来导入其他模块的内容。例如：

import { add, subtract } from './math.js';

console.log(add(1, 2)); // 输出：3
console.log(subtract(3, 2)); // 输出：1

上面的代码使用 import 语句从 ./math.js 模块中导入了 add 和 subtract 函数，然后使用它们来进行加减运算。

无法在模块外使用 import 语句

但是有些情况下，我们可能会遇到一个错误：Uncaught SyntaxError: Cannot use import statement outside a module，它提示我们无法在模块外使用 import 语句。

这个错误的原因是，当浏览器解析 JavaScript 文件时，默认情况下它会将它们视为普通的脚本文件（script file），而不是模块。只有当在 <script> 标签中添加了 type="module" 属性时，浏览器才会将该脚本文件视为模块。

因此，在非模块环境中，我们无法使用 import 语句来导入其他模块的内容。

如果我们想要在普通的脚本文件中使用模块的导入和导出功能，可以使用一些工具（如 webpack）来将模块打包为一个或多个脚本文件，然后在 HTML 文件中使用 <script> 标签导入打包后的文件。

总结

模块是现代 JavaScript 中的一个重要概念，它提供了一种封装和隔离代码的方式，并可以通过导出和导入来实现代码的组织和解耦。import 语句用于导入其他模块的内容，但是在非模块环境下无法使用。为了在普通的脚本文件中使用模块，我们可以使用工具将模块打包为脚本文件。