一孩等、編譯ts文件
命令:
tsc
// 可以自動將當(dāng)前項目下的所有ts文件編譯為js文件。前提是在根目錄下創(chuàng)建一個ts的配置文件tsconfig.json。
// 或
tsc app.ts
// 或
tsc app.ts -w // 開啟監(jiān)視模式
tsconfig.json配置文件的配置選項:
- include
- 定義希望被編譯文件所在的目錄
- 默認值:["*/"]
- 示例:
"include": ["src/**/*","tests/**/*"]
// 上述示例中,所有src目錄和tests目錄下的文件都會被編譯
- exclude
- 定義需要排除在外的目錄
- 默認值:["node_modules", "bower_components", "jspm.packages"]
- 示例:
"exclude": ["./src/hello/**/*"]
// 上述示例中留储,src下的hello目錄下的文件都不會被編譯
- extends
- 定義被繼承的配置文件
- 示例
"extends": "./configs/base"
* 上述示例中誉结,當(dāng)前配置文件中會自動包含config目錄下的base.json中的所有配置信息
- files
- 指定被編譯文件的列表,只有需要編譯的文件少時才會用到
- 示例
"files": ["core.ts",''aaa.ts'']
// 數(shù)組中的文件都會被TS編譯器編譯
- compilerOptions
- 編譯選項是配置文件中非常重要也比較復(fù)雜的配置項
- 在compilerOptions中包含多個子選項捂敌,用來完成對編譯的配置
- 項目選項
- target
- 設(shè)置ts代碼編譯的目標版本
- 可選值:ES3(默認)、ES5既琴、ES6/ES2015占婉、ES7/ES2016、ES2017甫恩、ES2018逆济、ES2019、ES2020磺箕、ESNext
- lib
- 指定代碼運行時所包含的庫(宿主環(huán)境)
- 可選值:ES5奖慌、ES6/ES2015、ES7/ES2016松靡、ES2017升薯、ES2018、ES2019击困、ES2020涎劈、ESNext、DOM阅茶、WebWorker蛛枚、ScriptHost...
- module
- 設(shè)置編譯后代碼使用的模塊化系統(tǒng)
- 可選值:CommonJs、UMD脸哀、AMD蹦浦、System、ES2020撞蜂、ESNext盲镶、None
- outDir
- 編譯后文件的所在目錄
- 默認情況下侥袜,編譯后的js文件會和ts文件位于相同的目錄,設(shè)置outDir后可以改變編譯后文件的位置
- outFile
- 將代碼合并為一個文件溉贿,所有的全局作用域中的代碼會合并到同一個文件中枫吧。
- allowJs
- 是否對js文件進行編譯,默認是false
- checkJs
- 是否檢查js代碼是否符合語法規(guī)范宇色,默認是false
- removeComments
- 是否移除注釋
- noEmit
- 不生成編譯后的文件
- noEmitOnError
- 當(dāng)有錯誤時不生成編譯后的文件
- alwaysStrict
- 用來設(shè)置編譯后的文件是否使用嚴格模式九杂,默認是false
- noImplicitAny
- 不允許隱式的any類型
- target
- 項目選項
二、使用webpack打包ts
- 安裝
cnpm i -D webpack webpack-cli typescript ts-loader