一、編譯ts文件

命令：

tsc 
// 可以自動將當(dāng)前項目下的所有ts文件編譯為js文件。前提是在根目錄下創(chuàng)建一個ts的配置文件tsconfig.json。
// 或
tsc app.ts 
// 或
tsc app.ts -w   // 開啟監(jiān)視模式

tsconfig.json配置文件的配置選項：

• include
  • 定義希望被編譯文件所在的目錄
  • 默認(rèn)值：["*/"]
  • 示例：

"include": ["src/**/*","tests/**/*"]
// 上述示例中，所有src目錄和tests目錄下的文件都會被編譯

• exclude
  • 定義需要排除在外的目錄
  • 默認(rèn)值：["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代碼編譯的目標(biāo)版本
        • 可選值：ES3(默認(rèn))、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
        • 編譯后文件的所在目錄
        • 默認(rèn)情況下，編譯后的js文件會和ts文件位于相同的目錄，設(shè)置outDir后可以改變編譯后文件的位置
      • outFile
        • 將代碼合并為一個文件，所有的全局作用域中的代碼會合并到同一個文件中。
      • allowJs
        • 是否對js文件進行編譯，默認(rèn)是false
      • checkJs
        • 是否檢查js代碼是否符合語法規(guī)范，默認(rèn)是false
      • removeComments
        • 是否移除注釋
      • noEmit
        • 不生成編譯后的文件
      • noEmitOnError
        • 當(dāng)有錯誤時不生成編譯后的文件
      • alwaysStrict
        • 用來設(shè)置編譯后的文件是否使用嚴(yán)格模式，默認(rèn)是false
      • noImplicitAny
        • 不允許隱式的any類型

二、使用webpack打包ts

• 安裝
  cnpm i -D webpack webpack-cli typescript ts-loader