详解parserOptions中的sourceType？

parserOptions 中的 sourceType 选项用于指定代码的模块类型。它可以设置为 "module" 或 "script"。这两种设置的主要区别在于解析 ECMAScript 代码的方式以及它们支持的特性。

sourceType: 'module'

当 sourceType 设置为 "module" 时，代码被解析为 ECMAScript 模块。这种模式下，代码会被解释为遵循 ES6 模块语法，包括以下特性：

1. 严格模式：

   • 模块代码自动在严格模式下执行，无需显式声明 "use strict"。

2. 模块导入和导出：

   • 支持使用 import 和 export 语句。

   import { myFunction } from './myModule.js';
   export const myVariable = 42;
   

3. 顶层的 this：

   • 顶层的 this 是 undefined，而不是 window 或 global。

   console.log(this); // undefined
   

4. 禁止使用 eval 和 with：

   • 严格模式下，eval 和 with 被禁止。

sourceType: 'script'

当 sourceType 设置为 "script" 时，代码被解析为普通的脚本文件。以下是这种模式的一些特性：

1. 非严格模式：

   • 默认情况下，脚本代码不在严格模式下执行，除非显式声明 "use strict"。

   "use strict";
   // 只有在明确声明时，才会进入严格模式
   

2. 不支持模块导入和导出：

   • 不能使用 import 和 export 语句。

   // 下面的代码在脚本模式下会导致语法错误
   import { myFunction } from './myModule.js';
   export const myVariable = 42;
   

3. 顶层的 this：

   • 顶层的 this 指向全局对象（在浏览器中是 window，在 Node.js 中是 global）。

   console.log(this); // 在浏览器中输出 `window`
   

4. 允许使用 eval 和 with：

   • 默认情况下，脚本模式允许使用 eval 和 with。

示例

sourceType: 'module'

module.exports = {
  parserOptions: {
    ecmaVersion: 2021,
    sourceType: 'module'
  }
};

在这种配置下，以下代码是有效的：

// example.js
import { myFunction } from './myModule.js';
export const myVariable = 42;

console.log(this); // undefined

sourceType: 'script'

module.exports = {
  parserOptions: {
    ecmaVersion: 2021,
    sourceType: 'script'
  }
};

在这种配置下，以下代码是有效的：

// example.js
"use strict";

console.log(this); // window (在浏览器中)

function myFunction() {
  // do something
}

// import 和 export 语句在脚本模式下无效，会导致语法错误
// import { myFunction } from './myModule.js'; // SyntaxError
// export const myVariable = 42; // SyntaxError

总结

• sourceType: 'module'：

  • 自动启用严格模式。
  • 支持 ES6 模块特性（import 和 export）。
  • 顶层的 this 是 undefined。
  • 禁止使用 eval 和 with。

• sourceType: 'script'：

  • 默认非严格模式（除非显式启用）。
  • 不支持 ES6 模块特性。
  • 顶层的 this 指向全局对象（window 或 global）。
  • 允许使用 eval 和 with。

根据项目需求和代码特性选择适当的 sourceType，以确保代码被正确解析和执行。