为什么旧浏览器无法识别 ES6/ES12 的 module
前言
随着前端技术的不断发展，JavaScript 的新版本也在不断地涌现，其中 ECMAScript（以下简称 ES） 的版本也在不断更新。从 ES6 开始，引入了 module 的概念，它可以让我们更好地组织代码并提高代码的可读性和可维护性。然而，当我们在老旧的浏览器上使用这些高级的 JavaScript 特性时，会发现这些特性往往无法正常工作。本文将探讨为什么旧浏览器无法识别 ES6/ES12 的 module。
HTML 的 module 属性
在探讨浏览器无法识别 module 的原因之前，先介绍一下 HTML 标签中的 module 属性。
在 HTML 中，我们可以使用下面的标签引入 JavaScript：
<script src="path/to/your/script.js"></script>
在 ES6 之前，我们可以通过 IIFE（立即调用函数表达式）或 AMD（异步模块定义）等方式来实现模块化；而在 ES6 中，我们引入了 module 的概念，它允许我们使用 import 和 export 来导入和导出模块。
但是，通过 script 标签引入的脚本都会被当做全局脚本处理，如果一个全局变量在多个脚本中被共享，很可能会造成全局变量冲突的问题。
为了解决这个问题，ES6 引入了一个新的属性 module，它标志着一段代码是一个 ECMAScript 模块，具有以下特点：
- 块级作用域：模块内部的变量和函数不会被自动添加到全局作用域，只能通过 import 和 export 显式地导入和导出；
- 严格模式：模块内部默认为严格模式，可以避免一些隐式的错误；
- 静态分析：模块内部的依赖关系在代码静态分析阶段就可以确定，方便编译和优化。
在 HTML 中，我们可以使用下面的方式引入模块：
<script type="module" src="path/to/your/module.js"></script>
type="module" 表示这是一个 ECMAScript 模块，需要在一定程度上遵循 ECMAScript 的规范。
然而，这种方式也带来了一些限制，为什么不能在老旧的浏览器上使用呢？
浏览器的支持情况
事实上，在旧版浏览器中，对于 module 属性是不支持的，导致无法识别模块化的代码。
在 ES2015 中，模块功能实现的一个子集已经被包括在浏览器中，但它只支持简单的模块性质，缺乏许多更高级的特性，例如动态导入和循环依赖的解决方案等。
目前，支持 ES6 语法的浏览器主要有 Chrome、Firefox、Edge、Opera 和 Safari 等，这些浏览器已经基本能够支持大部分 ES6 语法，但仍然存在一些语言特性在某些版本的浏览器中不支持，这需要开发者根据自己的需求来调整代码以保证向下兼容。
在使用新特性时，一定要清楚地知道它的兼容性，以避免造成意外的错误。
示例代码
为了更全面地了解 ES6 module 特性对浏览器的兼容性问题，下面提供一个简单的示例。
首先，在一个 module.js 文件中编写以下代码：
const moduleA = {
value: 'moduleA',
};
export { moduleA };其中，我们定义了一个对象 moduleA，然后使用 export 导出了该对象供其他模块使用。
然后，在一个 main.js 文件中编写以下代码：
import { moduleA } from './module.js';
console.log(moduleA.value);在 main.js 文件中，我们使用 import 从 module.js 中导入了 moduleA 对象，并输出它的值。
在 ES6 支持的浏览器中，将这两个文件放到同一个目录下，然后在 HTML 文件中这样引入：
<script type="module" src="main.js"></script>
然后，在浏览器中打开该页面，可以看到控制台输出了 moduleA 的值。
但是，在不支持 ES6 module 的浏览器中，这段代码将无法工作，会出现以下错误信息：
Uncaught SyntaxError: Unexpected identifier
这是因为浏览器无法识别 import 和 export 关键字，而在 ES6 module 中，这两个关键字是必须的。
结论
为什么旧浏览器无法识别 ES6/ES12 的 module 呢？原因在于 module 属性是 ES6 中引入的新特性，而旧版浏览器并不支持这个特性。这也是为什么我们在使用 ES6 module 时，需要保证代码的兼容性，以便在不同的浏览器中都可以正常运行。
为了解决这个问题，我们可以使用 Babel 等工具来将 ES6 module 转换为可兼容的代码。同时，我们也应该根据具体情况来选择语言特性，避免使用不兼容的特性，以便更好的保证代码的通用性和可移植性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6772620e6d66e0f9aad85cab