webpack 支持 ts

1. npm install -g typescript (支持 tsc)

2. tsconfig.json

3. 兩種思路

   1. 使用 typescript (tsc 對(duì)代碼進(jìn)行編譯), 配置ts-loader
   2. babel編譯ts, ts只進(jìn)行語(yǔ)法校驗(yàn)

4. webpack 配置 ts-loader

   1. 底層依賴 typescript (額外不需要安裝 typescript, 只安裝 ts-loader)
   2. 配置

      {
        test: /\.ts$/
        use: ['ts-loader']
      }
      

   3. 不太好支持新的語(yǔ)法(ts 中只處理了語(yǔ)法轉(zhuǎn)化, 但是新的特性沒(méi)有被 babel 處理)

5. babel-loader 編譯 ts

   1. @babel/preset-typescript 幫忙處理 typescript 語(yǔ)法填充

      {
        test: /\.ts$/
        use: ['babel-loader']
      }
      
      // .babelrc
      {
        presets: [
          ['@babel/preset-env', { builtIns: 'usage', corejs: 3 }],
          ['@babel/preset-typescript']
        ]
      }
      

   2. babel-loader 的缺點(diǎn): 在 build 階段不會(huì) ts 編譯報(bào)錯(cuò), 會(huì)正常生成dist目錄下打包文件, 只會(huì)在代碼的本地運(yùn)行的時(shí)候提示報(bào)錯(cuò) (不太友好)

6. typescript 最佳實(shí)踐

   {
      test: /\.ts$/
      use: ['babel-loader']
     // babelrc文件中, 記得在presets中添加 @babel/preset-typescript
   }
   
   // package.json
   "ts-check": "tsc --noEmit", // 只進(jìn)行校驗(yàn), 不生成文件
   "build": "npm run ts-check && webpack" // 構(gòu)建之前先進(jìn)行編譯檢查
    "build:types": "tsc -p tsconfig.json --emitDeclarationOnly",  // 生成類(lèi)型文件