script标签之type=“module“

使用 <script> 标签加载 JavaScript 文件时，通常有两种方式：

传统方式

<script src="script.js"></script>

模块化方式

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

两种方式的主要区别：

• 传统方式：当浏览器遇到传统的 <script> 标签时，会立即加载并执行其中的 JavaScript 代码。这意味着代码中的全局变量和函数都会污染全局作用域，可能导致命名冲突和变量覆盖等问题。

• 模块化方式：使用 type="module" 属性告诉浏览器，这个 <script> 标签中的 JavaScript 代码是一个模块。浏览器会按照模块化的方式去加载和执行这段代码，包括解析依赖关系、异步加载等。模块具有自己的作用域，模块内部的变量和函数不会污染全局作用域，也不会受到其他模块的影响。

在使用 type="module" 加载 JavaScript 模块时，可能会遇到一些常见的报错。以下是一些常见的报错及其可能的原因：

1. SyntaxError: Unexpected token <

   • 原因：这通常是因为在模块的导入语句中使用了不支持模块语法的旧版浏览器，或者在模块中包含了错误的语法。
   • 解决方法：确保使用支持模块语法的最新版本浏览器，并检查模块中的语法错误。

2. TypeError: Cannot use import statement outside a module

   • 原因：在使用 import 语句时，代码不是在模块中执行，而是在传统的脚本文件中执行，或者没有正确指定 type="module"。
   • 解决方法：确保在 HTML 的 <script> 标签中添加了 type="module" 属性，以告诉浏览器该脚本是一个模块。

3. 404 Not Found - Failed to load module script

   • 原因：浏览器无法找到指定路径的模块文件。
   • 解决方法：确保模块文件的路径是正确的，并且服务器能够正确地提供该文件。

4. CORS error

   • 原因：跨域资源共享（CORS）策略阻止了从其他域加载的模块。
   • 解决方法：确保服务器设置了正确的 CORS 头部，允许跨域请求。

5. NetworkError when attempting to fetch resource

   • 原因：浏览器无法从服务器获取模块资源，可能是由于网络问题或服务器故障引起的。
   • 解决方法：检查网络连接并确保服务器正常运行。

6. Circular dependency detected

   • 原因：模块之间存在循环依赖关系，导致无法正确加载模块。
   • 解决方法：重构代码以消除循环依赖关系，或者重新设计模块结构。

7. ReferenceError: exports is not defined

   • 原因：尝试在模块中使用 CommonJS 的 exports 关键字，但是在 ES6 模块中 exports 是未定义的。
   • 解决方法：使用 ES6 的 export 关键字来导出模块内容。

8. SyntaxError: Cannot use import statement '...' in a script before the module containing the import is loaded

   • 原因：在当前模块加载之前尝试使用 import 导入其他模块。
   • 解决方法：确保在模块中使用 import 的位置是正确的，不要在模块之外的代码中使用 import。