前言
成都創(chuàng)新互聯(lián)公司是專業(yè)的斗門網(wǎng)站建設(shè)公司，斗門接單;提供成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站,網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行斗門網(wǎng)站開發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!
最近新開了一個(gè)項(xiàng)目，雖然用的是 vue 技術(shù)棧，但是為了項(xiàng)目的健壯性，還是強(qiáng)上了 typescript, 于是引出了下面的問題。
問題
之前使用過 ts-loader 打包 react 項(xiàng)目，給我的感覺就是巨慢，開發(fā)環(huán)境下，每次保存后，需要等10秒鐘左右才能構(gòu)建完成，當(dāng)時(shí)為了解決這個(gè)問題，把 ts-loader 替換成了 babel 的 typescript 插件，結(jié)果是非常的快，每次保存一秒中之內(nèi)就能完成構(gòu)建。這次在 vue 中使用 typescript，開發(fā)環(huán)境下還算快，但是構(gòu)建生產(chǎn)包時(shí)，進(jìn)程都能夠被卡死，體驗(yàn)非常糟糕，接下來講解如何替換 typescript 構(gòu)建工具。
替換 ts-loader
修改 vue webpack 配置之前，我們需要知道 vue 是如何配置 ts-loader的，運(yùn)行如下代碼，輸出 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, 同時(shí)還使用到了 babel, 這倒是為我們后期的配置提供了不少方便。
首先刪除 ts-loader 的配置，因?yàn)?vue webpack 的配置使用的是 webpack-chain，所以這里也需要用到這個(gè)工具才能進(jìn)行修改，代碼如下：
// 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， 那么可能還需要添加如下配置項(xiàng)，反正我是遇到了解析 jsx 出錯(cuò)的問題。
module.exports = {
presets: [
'@vue/app',
["@babel/preset-typescript", {
"allExtensions": true,
"isTSX": true
}],
],
plugins: [
"@babel/plugin-transform-typescript"
]
}
最后再打包，嗯～ 比之前快多了！
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
