編譯選項 - HackMD

# 編譯選項 >Editor: Jung :::info - 自動編譯文件 - 編譯文件時，使用 -w 指令後，TS編譯器會自動監視文件的變化，並在文件發生變化時對文件進行重新編譯。 - 範例： - ```powershell tsc xxx.ts -w ``` - 自動編譯整個項目 - ```powershell tsc -w ``` - 如果直接使用tsc指令，則可以自動將當前專案下的所有ts文件編譯為js文件。 - 但是能直接使用tsc命令的前提時，要先在專案的根目錄下創建一個ts的配置文件 tsconfig.json - tsconfig.json是一個JSON文件，添加配置文件後，只需 tsc 命令即可完成對整個專案的編譯 - 配置選項： - include - 定義希望被編譯文件所在的目錄 - 默認值：["\*\*/\*"] - 範例： - ```json "include":["src/**/*", "tests/**/*"] ``` - 上述範例中，所有src目錄和tests目錄下的文件都會被編譯 - exclude - 定義需要排除在外的目錄 - 默認值：["node_modules", "bower_components", "jspm_packages"] - 範例： - ```json "exclude": ["./src/hello/**/*"] ``` - 上述範例中，src下hello目錄下的文件都不會被編譯 - extends - 定義被繼承的配置文件 - 範例： - ```json "extends": "./configs/base" ``` - 上述範例中，當前配置文件中會自動包含config目錄下base.json中的所有配置信息 - files - 指定被編譯文件的列表，只有需要編譯的文件少時才會用到 - 範例： - ```json "files": [ "core.ts", "sys.ts", "types.ts", "scanner.ts", "parser.ts", "utilities.ts", "binder.ts", "checker.ts", "tsc.ts" ] ``` - 列表中的文件都會被TS編譯器所編譯 - compilerOptions - 編譯選項是配置文件中非常重要也比較複雜的配置選項 - 在compilerOptions中包含多個子選項，用來完成對編譯的配置 - 項目選項 - target - 設置ts代碼編譯的目標版本 - 可選值： - ES3（默認）、ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext - 範例： - ```json "compilerOptions": { "target": "ES6" } ``` - 如上設置，我們所編寫的ts代碼將會被編譯為ES6版本的js代碼 - lib - 指定代碼運行時所包含的庫（宿主環境） - 可選值： - ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext、DOM、WebWorker、ScriptHost ...... - 範例： - ```json "compilerOptions": { "target": "ES6", "lib": ["ES6", "DOM"], "outDir": "dist", "outFile": "dist/aa.js" } ``` - module - 設置編譯後代碼使用的模塊化系統 - 可選值： - CommonJS、UMD、AMD、System、ES2020、ESNext、None - 範例： - ```typescript "compilerOptions": { "module": "CommonJS" } ``` - outDir - 編譯後文件的所在目錄 - 默認情況下，編譯後的js文件會和ts文件位於相同的目錄，設置outDir後可以改變編譯後文件的位置 - 範例： - ```json "compilerOptions": { "outDir": "dist" } ``` - 設置後編譯後的js文件將會生成到dist目錄 - outFile - 將所有的文件編譯為一個js文件 - 默認會將所有的編寫在全局作用域中的代碼合併為一個js文件，如果module制定了None、System或AMD則會將模塊一起合併到文件之中 - 範例： - ```json "compilerOptions": { "outFile": "dist/app.js" } ``` - rootDir - 指定代碼的根目錄，默認情況下編譯後文件的目錄結構會以最長的公共目錄為根目錄，通過rootDir可以手動指定根目錄 - 範例： - ```json "compilerOptions": { "rootDir": "./src" } ``` - allowJs - 是否對js文件編譯 - checkJs - 是否對js文件進行檢查 - 範例： - ```json "compilerOptions": { "allowJs": true, "checkJs": true } ``` - removeComments - 是否刪除註釋 - 默認值：false - noEmit - 不對代碼進行編譯 - 默認值：false - sourceMap - 是否生成sourceMap - 默認值：false - 嚴格檢查 - strict - 啟用所有的嚴格檢查，默認值為true，設置後相當於開啟了所有的嚴格檢查 - alwaysStrict - 總是以嚴格模式對代碼進行編譯 - noImplicitAny - 禁止隱式的any類型 - noImplicitThis - 禁止類型不明確的this - strictBindCallApply - 嚴格檢查bind、call和apply的參數列表 - strictFunctionTypes - 嚴格檢查函數的類型 - strictNullChecks - 嚴格的空值檢查 - strictPropertyInitialization - 嚴格檢查屬性是否初始化 - 額外檢查 - noFallthroughCasesInSwitch - 檢查switch語句包含正確的break - noImplicitReturns - 檢查函數沒有隱式的返回值 - noUnusedLocals - 檢查未使用的局部變數 - noUnusedParameters - 檢查未使用的參數 - 高級 - allowUnreachableCode - 檢查不可達代碼 - 可選值： - true，忽略不可達代碼 - false，不可達代碼將引起錯誤 - noEmitOnError - 有錯誤的情況下不進行編譯 - 默認值：false ::: ###### tags: `TypeScript`

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.