溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
最近新開了一個項目，雖然用的是 vue 技術棧，但是為了項目的健壯性，還是強上了 typescript, 于是引出了下面的問題。
問題
之前使用過 ts-loader 打包 react 項目，給我的感覺就是巨慢，開發環境下，每次保存后，需要等10秒鐘左右才能構建完成，當時為了解決這個問題，把 ts-loader 替換成了 babel 的 typescript 插件，結果是非常的快，每次保存一秒中之內就能完成構建。這次在 vue 中使用 typescript，開發環境下還算快，但是構建生產包時，進程都能夠被卡死，體驗非常糟糕，接下來講解如何替換 typescript 構建工具。
替換 ts-loader
修改 vue webpack 配置之前，我們需要知道 vue 是如何配置 ts-loader的，運行如下代碼，輸出 webpack 配置文件：
vue inspect > output.js
打開 output.js 搜索 ts-loader,可以看到如下配置：
/* config.module.rule('ts') */
{
test: /\.ts$/,
use: [
/* config.module.rule('ts').use('cache-loader') */
{
loader: 'cache-loader',
options: {
cacheDirectory: '/Users/edz/Desktop/project/senguo/cashier-admin/node_modules/.cache/ts-loader',
cacheIdentifier: 'aee3033a'
}
},
/* config.module.rule('ts').use('babel-loader') */
{
loader: 'babel-loader'
},
/* config.module.rule('ts').use('ts-loader') */
{
loader: 'ts-loader',
options: {
transpileOnly: true,
appendTsSuffixTo: [
'\\.vue$'
],
happyPackMode: false
}
}
]
},
/* config.module.rule('tsx') */
{
test: /\.tsx$/,
use: [
/* config.module.rule('tsx').use('cache-loader') */
{
loader: 'cache-loader',
options: {
cacheDirectory: '/Users/edz/Desktop/project/senguo/cashier-admin/node_modules/.cache/ts-loader',
cacheIdentifier: 'aee3033a'
}
},
/* config.module.rule('tsx').use('babel-loader') */
{
loader: 'babel-loader'
},
/* config.module.rule('tsx').use('ts-loader') */
{
loader: 'ts-loader',
options: {
transpileOnly: true,
happyPackMode: false,
appendTsxSuffixTo: [
'\\.vue$'
]
}
}
]
}
可以看到使用到了 ts-loader, 同時還使用到了 babel, 這倒是為我們后期的配置提供了不少方便。
首先刪除 ts-loader 的配置，因為 vue webpack 的配置使用的是 webpack-chain，所以這里也需要用到這個工具才能進行修改，代碼如下：
// vue.config.js
module.exports = {
chainWebpack: config => {
config.module.rule('ts').uses.delete('ts-loader')
config.module.rule('tsx').uses.delete('ts-loader')
}
}
接著安裝 babel 的 typescript 插件
yarn add @babel/preset-typescript @babel/plugin-transform-typescript
然后修改 babel.config.js 如下：
module.exports = {
presets: [
'@vue/app',
"@babel/preset-typescript"
],
plugins: [
"@babel/plugin-transform-typescript"
]
}
如果你在代碼中使用到了 jsx， 那么可能還需要添加如下配置項，反正我是遇到了解析 jsx 出錯的問題。
module.exports = {
presets: [
'@vue/app',
["@babel/preset-typescript", {
"allExtensions": true,
"isTSX": true
}],
],
plugins: [
"@babel/plugin-transform-typescript"
]
}
最后再打包，嗯～ 比之前快多了！
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
