1、內容簡介
目前你們經常使用的webpack打包ts主要爲兩種方案:node
- ts-loader:將ts轉爲js,再使用babel將js轉爲低版本js;
- @babel/preset-typescript:它是直接移除TypeScript,轉爲JS,這使得它的編譯速度飛快,而且只須要管理Babel一個編譯器就好了。
2、方案對比
首先咱們須要安裝 webpack、webpack-cli、typescript
隨便寫一點ts,用於打包測試:webpack
// 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:es6
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:web
{ "compilerOptions": { "module": "commonjs", "sourceMap": true, "target": "es5", "lib": [ "es5", "dom", "es2015.promise" ] } } 複製代碼
lib根據具體代碼和應用場景還能夠配置其餘參數:typescript
接下來打包後能夠看到打包代碼: 實際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;npm
{ "presets": [ [ "@babel/preset-env", { "corejs": "3", "useBuiltIns": "usage" } ] ] } 複製代碼
在webpack.config.js中設置babel-loader處理jsjson
module: { rules: [ { test: /\.tsx?$/, exclude: /node_modules/, loader: ['babel-loader', 'ts-loader'] } ] }, 複製代碼
再進行打包:promise
能夠看到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:bash
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
打包時間:
@babel/preset-typescript
打包時間:
3、總結
經過上面的兩種方案對比,我是更喜歡@babel/preset-typescript
,相比較兩種方案:
@babel/preset-typescript
配置更簡單,並且打包速度更快一點;
而ts-loader
在配置過程當中仍是遇到了不少坑的,好比tsconfig.json
中lib沒有設置致使報錯,而在轉es5實際也是用babel處理es6的方案解決,這樣直接使用@babel/preset-typescript
感受會更加清晰。