本文通过对 VUE 源码中的 tsconfig.json 文件中的每个属性做具体解释,使读者对罕用的配置信息做进一步的理解,心愿对看到此篇文章的读者有所帮忙。
{
"compilerOptions": {
/*
* 用于拓宽引入非绝对模块时的查找门路的。其默认值就是 "./"
* 目标是解决我的项目代码层级较深相互之间援用起来会比拟麻烦的问题,各种 …/,…/…/,…/…/…/ 等等
* "paths": {* "@vue": ["packages/vue/src"]
* }
*/
"baseUrl": ".",
/* 指定输入目录 */
"outDir": "dist",
/*
* 是否生成指标文件的 sourceMap 文件
* 此文件容许调试器和其余工具在理论应用收回的 JavaScript 文件时显示原始的 TypeScript 源代码。* 此文件为 .js.map (or .jsx.map) 格局,位于相应的.js 输入文件雷同目录
*/
"sourceMap": false,
/*
* 定义了编译后的指标 javascript 版本, 可抉择包含 es6、es5、esnext
* 如果须要思考兼容性问题就能够设置为 es5 或更低的版本,一般来说,咱们须要让他编译为 es5,这样就能够被支流浏览器解读了。* 当然,你说我的 react 代码不是给浏览器看的,比如说,你应用的是 react-native 做作手机 app,那么这里的选项能够抉择 es6。* 如果代码是在高版本的古代浏览器或高版本的 node 端,就能够设置为 esnext
*/
"target": "esnext",
/*
* 通知编译器对收回的.js 文件中的模块应用什么语法。可抉择 none、commonjs、amd、system、umd、es2015 或 esnext
* 通知编译器以哪种语法编写代码,意味着必须从哪个代码将其编译为 commonjs。* 如果用于服务器端我的项目 如果应用的是 Angular 前端应用程序,则应用 Node.js,而后可能应用 CJS 可能不是 ESM
* 较新的 JS 版本有时蕴含用于模块导入 / 导出的更多功能。将 export 设置为 "module" 能够反对这些性能,而这些性能通常尚未增加到官网标准中。例如 dynamic import 的 "ESNext" 表达式。* 无论如何,编译器的目标是将代码编译成浏览器可了解的语法(commonjs)* module 影响收回代码的模块语法,而 target 影响其余代码
*/
"module": "esnext",
/*
* 模块解析策略,ts 默认用 node 的解析策略,即绝对的形式导入, 可选值:node、classic
* 如果未指定,则 --module commonjs 默认为 node,否则默认为 classic(包含 --module 设置为 amd、system、umd、es2015、esnext 等)* Node 模块解析是 TypeScript 社区中最罕用的,举荐用于大多数我的项目。* 如果您在 TypeScript 中遇到导入和导出的解析问题,请尝试设置 moduleResolution:“node”以查看它是否解决了问题。*/
"moduleResolution": "node",
/*
* 容许在 TS 我的项目中导入 JavaScript 文件,而不是仅导入.ts 和.tsx 文件。即容许 ts 和 tsx 文件与现有 JavaScript 文件共存
* 例如 js 文件 @filename: card.js: export const defaultCardDeck = "Heart";
* ts 文件 @filename: index.ts 中引入下面的 js 变量:import {defaultCardDeck} from "./card";
* 如果 allowJs 设置为 false, 将会抛出谬误。*/
"allowJs": false,
/*
* 开启所有严格的类型查看
* true => 同时开启 alwaysStrict, noImplicitAny, noImplicitThis 和 strictNullChecks
* alwaysStrict:严格模式,为每个文件增加 "use strict"
* noImplicitAny:不容许隐式 any,如果 true,函数的形参必须带类型,如果叫不出 class 名的 js 对象,那就得 any。比方 (d:any)=>{};如果 false, 则容许隐式 any, 函数的样子更像 js (d)=>{}
* noImplicitThis:不容许 this 为隐式 any
* strictNullChecks:undefined 和 null 两个空类型的设计,应用上不不便,所以 通过 strictNullChecks 严格校验类型,让代码更平安
*/
"strict": true,
/* 查看只申明、未应用的局部变量 (只提醒不报错) */
"noUnusedLocals": true,
/**
* 是否启用实验性的装璜器个性, 装璜器的语法是 ES7 的实验性语法, 不关上可能会呈现如下谬误:* Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
*/
"experimentalDecorators": true,
/**
* 避免 ts 文件中引入 json 文件,会报如下红色波浪线。* TypeScript 2.9 的 resolveJsonModule 性能,只有我应用 ts-node 执行应用程序,该性能就能够失常工作
*/
"resolveJsonModule": true,
/* 作用是反对应用 import d from 'cjs' 的形式引入 commonjs 包 */
"esModuleInterop": true,
/* 用于指定是否将编译后的文件正文删掉,设为 true 的话即删除正文,默认为 false */
"removeComments": false,
/**
* 指定 jsx 代码用于的开发环境: 'preserve', 'react-native', or 'react'
* preserve: 生成代码中会保留 JSX 以供后续的转换操作应用 (比方:Babel). 另外, 输入文件会带有.jsx 扩展名。* react: 会生成 React.createElement, 在应用前不须要再进行转换操作了, 输入文件的扩大名为.js。* react-native: 相当于 preserve, 它也保留了所有的 JSX, 然而输入文件的扩展名是.js
*/
"jsx": "preserve",
/*
* 编译过程中须要引入的库文件的列表,通知 typescript 编译器能够应用哪些性能。* 比如说,咱们这里有一个 dom 的库文件,这个文件会通知编译器 dom api 的接口,所以当咱们在 ts 代码中应用 dom 的时候,比如说执行“document.getElementById ("root")”这句话的时候,编译器就会晓得该如何进行查看。* 如果咱们不设置这个选项,那么编译器也有本人默认的库文件列表,一般来说是 ["dom", "es6","DOM.Iterable"] 等等
*/
"lib": ["esnext", "dom"],
/* 用于指定须要蕴含的模块,只有在这里列出的模块的申明文件才会被加载 */
"types": ["jest", "puppeteer", "node"],
/**
* 用来指定编译文件的根目录,编译器会在根目录查找入口文件,* 如果编译器发现以 rootDir 的值作为根目录查找入口文件, 并不会把所有文件加载进去的话会报错,然而不会进行编译
*/
"rootDir": ".",
/* 用于设置模块名称到基于 baseUrl 的门路映射 */
"paths": {"@vue/*": ["packages/*/src"],
"vue": ["packages/vue/src"]
}
},
/**
* include 用于指定要编译的门路列表,然而和 files 的区别在于,这里的门路能够是文件夹,* 也能够是文件,能够应用绝对和绝对路径,而且能够应用通配符,* 比方 "./src" 即示意要编译 src 文件夹下的所有文件以及子文件夹的文件
*/
"include": [
"packages/global.d.ts",
"packages/*/src",
"packages/runtime-dom/types/jsx.d.ts",
"packages/*/__tests__",
"test-dts"
]
}