在TS的項目中，TS最終都會被編譯JS文件執(zhí)行件相，TS編譯器在編譯TS文件的時候都會先在項目根目錄的tsconfig.json文件再扭，根據(jù)該文件的配置進行編譯，默認(rèn)情況下夜矗，如果該文件沒有任何配置泛范，TS編譯器會默認(rèn)編譯項目目錄下所有的.ts、.tsx紊撕、.d.ts文件罢荡。實際項目中，會根據(jù)自己的需求進行自定義的配置对扶，下面就來詳細(xì)了解下tsconfig.json的文件配置区赵。
文件選項配置
-
files: 表示編譯需要編譯的單個文件列表"files": [ // 指定編譯文件是src目錄下的a.ts文件 "scr/a.ts" ] -
include: 表示編譯需要編譯的文件或目錄"include": [ // "scr" // 會編譯src目錄下的所有文件，包括子目錄 // "scr/*" // 只會編譯scr一級目錄下的文件 "scr/*/*" // 只會編譯scr二級目錄下的文件 ] -
exclude：表示編譯器需要排除的文件或文件夾默認(rèn)排除
node_modules文件夾下文件"exclude": [ // 排除src目錄下的lib文件夾下的文件不會編譯 "src/lib" ] -
extends: 引入其他配置文件浪南，繼承配置// 把基礎(chǔ)配置抽離成tsconfig.base.json文件笼才，然后引入 "extends": "./tsconfig.base.json" -
compileOnSave:設(shè)置保存文件的時候自動編譯vscode暫不支持該功能，可以使用'Atom'編輯器
"compileOnSave": true
編譯選項配置
-
compilerOptions:配置編譯選項編譯選項配置非常繁雜络凿，有很多配置患整，這里只列出常用的配置。
"compilerOptions": { "incremental": true, // TS編譯器在第一次編譯之后會生成一個存儲編譯信息的文件喷众，第二次編譯會在第一次的基礎(chǔ)上進行增量編譯各谚，可以提高編譯的速度 "tsBuildInfoFile": "./buildFile", // 增量編譯文件的存儲位置 "diagnostics": true, // 打印診斷信息 "target": "ES5", // 目標(biāo)語言的版本 "module": "CommonJS", // 生成代碼的模板標(biāo)準(zhǔn) "outFile": "./app.js", // 將多個相互依賴的文件生成一個文件，可以用在AMD模塊中到千，即開啟時應(yīng)設(shè)置"module": "AMD", "lib": ["DOM", "ES2015", "ScriptHost", "ES2019.Array"], // TS需要引用的庫昌渤，即聲明文件，es5 默認(rèn)引用dom憔四、es5膀息、scripthost,如需要使用es的高級版本特性般眉，通常都需要配置，如es8的數(shù)組新特性需要引入"ES2019.Array", "allowJS": true, // 允許編譯器編譯JS潜支，JSX文件 "checkJs": true, // 允許在JS文件中報錯甸赃，通常與allowJS一起使用 "outDir": "./dist", // 指定輸出目錄 "rootDir": "./", // 指定輸出文件目錄(用于輸出)，用于控制輸出目錄結(jié)構(gòu) "declaration": true, // 生成聲明文件冗酿，開啟后會自動生成聲明文件 "declarationDir": "./file", // 指定生成聲明文件存放目錄 "emitDeclarationOnly": true, // 只生成聲明文件埠对，而不會生成js文件 "sourceMap": true, // 生成目標(biāo)文件的sourceMap文件 "inlineSourceMap": true, // 生成目標(biāo)文件的inline SourceMap，inline SourceMap會包含在生成的js文件中 "declarationMap": true, // 為聲明文件生成sourceMap "typeRoots": [], // 聲明文件目錄裁替，默認(rèn)時node_modules/@types "types": [], // 加載的聲明文件包 "removeComments":true, // 刪除注釋 "noEmit": true, // 不輸出文件,即編譯后不會生成任何js文件 "noEmitOnError": true, // 發(fā)送錯誤時不輸出任何文件 "noEmitHelpers": true, // 不生成helper函數(shù)项玛，減小體積，需要額外安裝弱判，常配合importHelpers一起使用 "importHelpers": true, // 通過tslib引入helper函數(shù)襟沮，文件必須是模塊 "downlevelIteration": true, // 降級遍歷器實現(xiàn)，如果目標(biāo)源是es3/5昌腰，那么遍歷器會有降級的實現(xiàn) "strict": true, // 開啟所有嚴(yán)格的類型檢查 "alwaysStrict": true, // 在代碼中注入'use strict' "noImplicitAny": true, // 不允許隱式的any類型 "strictNullChecks": true, // 不允許把null开伏、undefined賦值給其他類型的變量 "strictFunctionTypes": true, // 不允許函數(shù)參數(shù)雙向協(xié)變 "strictPropertyInitialization": true, // 類的實例屬性必須初始化 "strictBindCallApply": true, // 嚴(yán)格的bind/call/apply檢查 "noImplicitThis": true, // 不允許this有隱式的any類型 "noUnusedLocals": true, // 檢查只聲明、未使用的局部變量(只提示不報錯) "noUnusedParameters": true, // 檢查未使用的函數(shù)參數(shù)(只提示不報錯) "noFallthroughCasesInSwitch": true, // 防止switch語句貫穿(即如果沒有break語句后面不會執(zhí)行) "noImplicitReturns": true, //每個分支都會有返回值 "esModuleInterop": true, // 允許export=導(dǎo)出遭商，由import from 導(dǎo)入 "allowUmdGlobalAccess": true, // 允許在模塊中全局變量的方式訪問umd模塊 "moduleResolution": "node", // 模塊解析策略固灵，ts默認(rèn)用node的解析策略，即相對的方式導(dǎo)入 "baseUrl": "./", // 解析非相對模塊的基地址株婴，默認(rèn)是當(dāng)前目錄 "paths": { // 路徑映射怎虫，相對于baseUrl // 如使用jq時不想使用默認(rèn)版本暑认，而需要手動指定版本困介，可進行如下配置 "jquery": ["node_modules/jquery/dist/jquery.min.js"] }, "rootDirs": ["src","out"], // 將多個目錄放在一個虛擬目錄下，用于運行時蘸际，即編譯后引入文件的位置可能發(fā)生變化座哩，這也設(shè)置可以虛擬src和out在同一個目錄下，不用再去改變路徑也不會報錯 "listEmittedFiles": true, // 打印輸出文件 "listFiles": true// 打印編譯的文件(包括引用的聲明文件) }
工程引用配置
-
references指定工程引用依賴在項目開發(fā)中粮彤，有時候我們?yōu)榱朔奖銓⑶岸隧椖亢秃蠖?code>node項目放在同一個目錄下開發(fā)根穷，兩個項目依賴同一個配置文件和通用文件，但我們希望前后端項目進行靈活的分別打包导坟，那么我們可以進行如下配置：
這樣配置以后屿良，就可以單獨的構(gòu)建前后端項目。Project - src - client //客戶端項目 - index.ts // 客戶端項目文件 - tsconfig.json // 客戶端配置文件 { "extends": "../../tsconfig.json", // 繼承基礎(chǔ)配置 "compilerOptions": { "outDir": "../../dist/client", // 指定輸出目錄 }, "references": [ // 指定依賴的工程 {"path": "./common"} ] } - common // 前后端通用依賴工程 - index.ts // 前后端通用文件 - tsconfig.json // 前后端通用代碼配置文件 { "extends": "../../tsconfig.json", // 繼承基礎(chǔ)配置 "compilerOptions": { "outDir": "../../dist/client", // 指定輸出目錄 } } - server // 服務(wù)端項目 - index.ts // 服務(wù)端項目文件 - tsconfig.json // 服務(wù)端項目配置文件 { "extends": "../../tsconfig.json", // 繼承基礎(chǔ)配置 "compilerOptions": { "outDir": "../../dist/server", // 指定輸出目錄 }, "references": [ // 指定依賴的工程 {"path": "./common"} ] } - tsconfig.json // 前后端項目通用基礎(chǔ)配置 { "compilerOptions": { "target": "es5", "module": "commonjs", "strict": true, "composite": true, // 增量編譯 "declaration": true } }- 前端項目構(gòu)建
tsc -v src/client- 后端項目構(gòu)建
tsc -b src/server- 輸出目錄
Project - dist - client - index.js - index.d.ts - common - index.js - index.d.ts - server - index.js - index.d.ts
更多干貨內(nèi)容請關(guān)注微信公眾號：
柒葷捌素.jpg
