TS配置文件 compilerOptions 属性解析

Kryon
634 阅读7分钟

TS配置文件 compilerOptions 属性解析

target: "ESNext"

指定 TypeScript 编译后生成的 JavaScript 代码的目标 ECMAScript 版本。在这里，它设置为 "ESNext"，表示使用最新的 ECMAScript 版本。

用于指定 TypeScript 编译器生成的 JavaScript 代码的目标 ECMAScript 版本。即它表示编译后的代码应该符合哪个 ECMAScript 标准。

  • "ES3": ECMAScript 3（旧版本，很少使用）。
  • "ES5": ECMAScript 5（默认值，广泛支持）。
  • "ES6" 或 "ES2015": ECMAScript 2015，也称为 ES6。
  • "ES2016", "ES2017", "ES2018", "ES2019", "ES2020": 各个后续版本。

module: "ESNext"

指定生成的模块系统。同样设置为 "ESNext"，表示使用最新的模块系统。

module 作用:

  1. TypeScript 编译器根据指定的模块系统进行类型检查
  2. 确定生成的代码的模块组织方式。

ESNext 并不是一个具体的模块系统，而是 TypeScript 中 compilerOptions 的一个配置项，用于指定 TypeScript 编译后生成的 JavaScript 代码的目标 ECMAScript 版本。

常见的 JavaScript 模块系统 CommonJS、AMD、ES6、UMD。

CommonJS: require / module.exports

主要在 Node.js 等服务器端环境使用(同步加载模块)。

简单易用，适用于同步加载的环境。同步加载可能导致性能问题，不适用于浏览器环境。

标志性代码: 导入 require / 导出 module.exports

// moduleA.js
const value = 'Hello from moduleA';
module.exports = value;

// main.js
const moduleA = require('./moduleA');
console.log(moduleA);

AMD (Asynchronous Module Definition) define return require

主要用于浏览器端，通过 RequireJS 等库实现。

// moduleB.js
define([], function() {
  const value = 'Hello from moduleB';
  return value;
});

// main.js
require(['moduleB'], function(moduleB) {
  console.log(moduleB);
});

应用场景:

  • 浏览器端开发，主要使用 RequireJS 等库。
  • 异步加载模块，适用于浏览器环境。

标志性代码: define / require / return

优点: 支持异步加载，适用于浏览器中动态加载模块的场景。

缺点: 写法稍显复杂，可能需要额外的库来支持。

ES6 Modules (ESM) export import

ECMAScript 2015（ES6）引入的官方模块系统，用于浏览器和 Node.js。

// moduleC.js
const value = 'Hello from moduleC';
export default value;

// main.js
import moduleC from './moduleC';
console.log(moduleC);

应用场景

  • 现代浏览器端和 Node.js 中的主流模块系统。
  • 静态分析，支持异步加载模块。

标志性代码: 导入 import 导出 export

UMD (Universal Module Definition)

通用模块定义，为了同时支持 CommonJS、AMD 和全局变量而设计。

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD
    define([], factory);
  } else if (typeof exports === 'object') {
    // CommonJS
    module.exports = factory();
  } else {
    // 浏览器全局变量
    root.myModule = factory();
  }
}(typeof self !== 'undefined' ? self : this, function () {
  const value = 'Hello from myModule';
  return value;
}));

支持多种模块系统，适用于不同环境。

导入和导出： 根据环境使用 AMD、CommonJS、或全局变量。

优点： 适应性强，可以在不同的环境中使用。

缺点： 代码相对复杂，不如专门的模块系统清晰。

composite: true

允许使用 TypeScript 的项目引用（project references）功能，用于更好地管理大型项目的依赖关系。

TypeScript 项目引用是一种机制，允许你在一个 TypeScript 项目中引用另一个 TypeScript 项目。这创建了一个项目之间的依赖关系，其中一个项目可以直接依赖于另一个项目的源代码。

composite 设置为 true 表示该项目是一个“composite”项目，即支持项目引用。

通常出现在大型的代码库中，其中有多个独立但相互依赖的子项目。

子项目配置

// tsconfig.json in SubprojectA
{
  "compilerOptions": {
    // ...
  },
  "references": [
    { "path": "../SubprojectB" } // Reference to SubprojectB
  ]
}

作用: 可以提高构件性能, 当某个子项目发生变化时，只需重新构建受影响的子项目和依赖它的项目，而不是整个代码库。

启用 composite 项目引用可以显著提高大型 TypeScript 项目的开发和构建效率，尤其在需要维护多个相互依赖的子项目时。

noEmit: true

禁止 TypeScript 编译器生成任何输出文件（即不生成 JavaScript 文件）。通常用于只进行类型检查而不生成代码的情况。

只执行类型检查，但不会生成任何 JavaScript 代码。

Vue 项目通常使用构建工具（比如 webpack）进行打包和编译。在这种情况下，实际的编译和打包工作是由 webpack 或其他构建工具负责的，而不是直接由 TypeScript 编译器完成。所以设置为 true , 只做 类型检查即可。

moduleResolution: "Node"

指定模块解析策略，这里设置为 "Node"，表示使用 Node.js 的模块解析规则。

在 Vue.js 项目中，通常使用 Node.js 的模块系统，选择 "node" 作为模块解析策略是合适的。

可选值为

  • "node"：使用 Node.js 模块解析策略。

  • "classic"：使用传统的相对导入解析策略。

  • classic：

    • 适用于简单项目结构，相对导入足够满足需求的情况。
    • 文件结构较为扁平，没有太多嵌套的模块路径。

  • node：

    • 适用于灵活、复杂的项目结构，或者需要导入第三方库的情况。
    • 具有更丰富的模块导入选项，支持非相对路径导入。

classic

适用场景: 这种模块解析策略通常在项目文件结构较为扁平，没有明显的模块路径嵌套的情况下使用。

使用相对路径进行模块导入，路径通常是相对于当前文件的路径。

示例：import { someFunction } from './utils/Utility';

编译器会按照传统的相对导入解析策略来定位模块路径。

node

支持相对路径和非相对路径（通过模块名）进行模块导入。

示例：import { someFunction } from './utils/Utility'; 或 import { someFunction } from 'my-library';

使用 Node.js 模块系统的解析规则，包括对 node_modules 文件夹的查找等。

可以导入安装在 node_modules 中的第三方库，以及其他模块。

适用场景: 更适应于灵活和复杂的项目结构，支持更深层次的模块路径嵌套。

useDefineForClassFields: false

控制是否在生成的 JavaScript 中使用 ECMAScript 中的 Class Fields 提案语法。

类的字段可以在类的构造函数之外进行初始化。而当设置为 false（默认值）时，编译器会使用旧的方式处理类字段，即在构造函数内部进行初始化。

skipLibCheck: true

是否跳过对声明文件（.d.ts 文件）的类型检查

跳过对声明文件（.d.ts 文件）的类型检查。可以加快编译速度，但潜在地允许一些类型错误。

sourceMap: true

指定是否生成源映射文件（source map）

生成 source map 文件，用于在调试时将编译后的 JavaScript 代码映射回原始 TypeScript 代码。

使用场景

  • 调试：
    • 在开发过程中，启用源映射文件可以在浏览器或调试工具中直接查看和调试 TypeScript 源代码，而不是仅看到编译后的 JavaScript 代码。
  • 错误追踪：
    • 源映射文件可以帮助在生产环境中收集错误时，将错误追踪回原始 TypeScript 代码的位置。

在开发环境中，启用源映射通常是有益的，而在生产环境中可能希望禁用以减小文件大小和提高性能。

resolveJsonModule: true

JSON 模块允许你在 TypeScript 中导入和使用 JSON 文件，而不需要手动解析它们。当启用 resolveJsonModule 时，TypeScript 编译器会自动解析 JSON 文件并为其生成相应的类型声明。

import jsonData from './data.json';

允许 TypeScript 导入 JSON 文件作为模块。

如果设置为false, 需要配置 json-loader 来支持导入和解析JSON

isolatedModules: true

确保每个文件都被视为独立的模块，这样就不会引入全局命名空间。

esModuleInterop: true

启用对 CommonJS 模块的默认导入导出行为的兼容性处理。

当设置为 true 时，TypeScript 会生成更简洁的导入语法，使得导入 CommonJS 模块与导入 ES6 模块的方式更为一致。

avatar
文章
阅读
粉丝