webpack打包ts的兩種方案對比

1、內容簡介

目前你們經常使用的webpack打包ts主要爲兩種方案：

1. ts-loader：將ts轉爲js，再使用babel將js轉爲低版本js；
2. @babel/preset-typescript：它是直接移除TypeScript，轉爲JS，這使得它的編譯速度飛快,而且只須要管理Babel一個編譯器就好了。

2、方案對比

首先咱們須要安裝 webpack、webpack-cli、typescript 隨便寫一點ts，用於打包測試:

// index.ts

class Student {
  name: string
  age: Number
  constructor(name: string, age: Number) {
    this.name = name
    this.age = age
  }

  greet() {
    console.log(`Hello, my name is ${this.name}`)
  }
}

const testPromise = (): Promise<string> => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('1')
    }, 1000)
  })
}

const studentA = new Student('a', 20)
studentA.greet()
testPromise().then(data => {
  console.log('data', data)
})
複製代碼

1.使用方法法對比

1）ts-loader：

先安裝ts-loader: npm install ts-loader --save-dev 在項目中配置webpack.config.js：

const path = require('path')

module.exports = {
  mode: 'development',
  entry: './index.ts',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist')
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js"]
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        loader: 'ts-loader'
      }
    ]
  },
  plugins: []
}
複製代碼

而後須要設置tsconfig.json:

{
  "compilerOptions": {
    "module": "commonjs",
    "sourceMap": true,
    "target": "es5",
    "lib": [
      "es5",
      "dom",
      "es2015.promise"
    ]
  }
}
複製代碼

lib根據具體代碼和應用場景還能夠配置其餘參數：

接下來打包後能夠看到打包代碼：

實際const、箭頭函數之類的已經轉成了es5，而 promise可能在低版本瀏覽器不兼容，那麼設置babel將一些不兼容的語法轉爲es5：

npm install core-js
npm install --save-dev babel-loader @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill
複製代碼

設置.babelrc；

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "corejs": "3",
        "useBuiltIns": "usage"
      }
    ]
  ]
}
複製代碼

在webpack.config.js中設置babel-loader處理js

module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        loader: ['babel-loader', 'ts-loader']
      }
    ]
},
複製代碼

再進行打包：

能夠看到promse這類的方法已經有了定義，這樣不會形成低版本不兼容的問題了,固然若是你已經設置了 高版本的瀏覽器，這部分代碼也不會被打包進來，由於高版本瀏覽器已經能夠直接使用promise。

2）@babel/preset-typescript：

和上面相關bebel的插件基本相同

npm install core-js
npm install --save-dev babel-loader @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill
npm install --save-dev @babel/preset-typescript
複製代碼

就多了@babel/preset-typescript webpack.config.js中直接使用了babel-loader：

const path = require('path')

module.exports = {
  mode: 'development',
  entry: './index.ts',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist')
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        loader: ['babel-loader']
      }
    ]
  },
  plugins: []
}
複製代碼

.babelrc中也只多了@babel/preset-typescript

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "corejs": "3",
        "useBuiltIns": "usage"
      }
    ],
    "@babel/preset-typescript"
  ]
}
複製代碼

執行打包，發現bundle.js也是打包了promise。
這裏使用@babel/preset-typescript的時候專門刪了tsconfig.js，發現依然能夠打包成功，可是ts-loader是必定要設置tsconfig.js的，由於我只是作了一下測試，因此刪除了，實際項目中仍是要設置tsconfig.js。

2.打包時間比較

兩種方案中ts代碼徹底相同:
ts-loader打包時間：

大概 1000ms

@babel/preset-typescript打包時間：

大概500ms 感受打包速度上提高仍是很明顯的，打包的大小是大體同樣。

3、總結

經過上面的兩種方案對比，我是更喜歡@babel/preset-typescript，相比較兩種方案：
@babel/preset-typescript配置更簡單，並且打包速度更快一點；
而ts-loader在配置過程當中仍是遇到了不少坑的，好比tsconfig.json中lib沒有設置致使報錯，而在轉es5實際也是用babel處理es6的方案解決，這樣直接使用@babel/preset-typescript感受會更加清晰。