Webpack組合Vue+TypeScript

我不想生命被時(shí)光遺忘,只能努力學(xué)習(xí).

一、 安裝依賴

  • typescript@3.2.1
  • ts-loader@5.3.1
  • vue@2.5.17
  • vue-loader@15.4.2
  • vue-template-compiler@2.5.17
  • vue-property-decorator@7.2.0
  • webpack@4.26.1
  • webpack-cli@3.1.2

這些庫(kù)大體作用

  • vue-class-component:強(qiáng)化 Vue 組件,使用 TypeScript/裝飾器 增強(qiáng) Vue 組件
  • vue-property-decorator:在 vue-class-component 上增強(qiáng)更多的結(jié)合 Vue 特性的裝飾器
  • ts-loader:TypeScript 為 Webpack 提供了 ts-loader揪惦,其實(shí)就是為了讓webpack識(shí)別 .ts .tsx文件

關(guān)于vue-property-decorator的詳細(xì)用法可以看我另一篇
vue-property-decorator用法


二、配置webpack

入口文件, 注意后綴是.ts

entry: {
    index: './src/index.ts'
}

添加webpack對(duì).ts.tsx的解析

      {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                exclude: /node_modules/,
                options: {
                    appendTsSuffixTo: [/\.vue$/]
                }
        }

ts-loader會(huì)檢索當(dāng)前目錄下的tsconfig.json 文件锋玲,根據(jù)里面定義的規(guī)則來(lái)解析.ts文件(就跟.babelrc的作用一樣)


三仗哨、添加 tsconfig.json

在根目錄下創(chuàng)建tsconfig.json文件

下面是一份參考的tsconfig.json配置

{
  // 編譯選項(xiàng)
  "compilerOptions": {
    // 輸出目錄
    "outDir": "./output",
    // 是否包含可以用于 debug 的 sourceMap
    "sourceMap": true,
    // 以嚴(yán)格模式解析
    "strict": true,
    // 采用的模塊系統(tǒng)
    "module": "esnext",
    // 如何處理模塊
    "moduleResolution": "node",
    // 編譯輸出目標(biāo) ES 版本
    "target": "es5",
    // 允許從沒(méi)有設(shè)置默認(rèn)導(dǎo)出的模塊中默認(rèn)導(dǎo)入
    "allowSyntheticDefaultImports": true,
    // 將每個(gè)文件作為單獨(dú)的模塊
    "isolatedModules": false,
    // 啟用裝飾器
    "experimentalDecorators": true,
    // 啟用設(shè)計(jì)類型元數(shù)據(jù)(用于反射)
    "emitDecoratorMetadata": true,
    // 在表達(dá)式和聲明上有隱含的any類型時(shí)報(bào)錯(cuò)
    "noImplicitAny": false,
    // 不是函數(shù)的所有返回路徑都有返回值時(shí)報(bào)錯(cuò)桥言。
    "noImplicitReturns": true,
    // 從 tslib 導(dǎo)入外部幫助庫(kù): 比如__extends,__rest等
    "importHelpers": true,
    // 編譯過(guò)程中打印文件名
    "listFiles": true,
    // 移除注釋
    "removeComments": true,
    "suppressImplicitAnyIndexErrors": true,
    // 允許編譯javascript文件
    "allowJs": true,
    // 解析非相對(duì)模塊名的基準(zhǔn)目錄
    "baseUrl": "./",
    // 指定特殊模塊的路徑
    "paths": {
      "jquery": [
        "node_modules/jquery/dist/jquery"
      ]
    },
    // 編譯過(guò)程中需要引入的庫(kù)文件的列表
    "lib": [
      "dom",
      "es2015",
      "es2015.promise"
    ]
  }
}

自己使用的配置

{
    "compilerOptions": {
        "outDir": "./built/",
        "sourceMap": true,
        "strict": true,
        "noImplicitReturns": true,
        "module": "es2015",
        "moduleResolution": "node",
        "target": "es5",
        "experimentalDecorators": true
    },
    "include": [
        "./src/**/*"
    ]
}

讓 ts 識(shí)別 .vue

由于 TypeScript默認(rèn)并不支持*.vue 后綴的文件谋国,所以在 vue項(xiàng)目中引入的時(shí)候需要?jiǎng)?chuàng)建一個(gè)vue-shim.d.ts文件槽地,放在項(xiàng)目項(xiàng)目對(duì)應(yīng)使用目錄下,例如 src/vue-shim.d.ts

declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}

意思是告訴 TypeScript *.vue 后綴的文件可以交給 vue模塊來(lái)處理芦瘾。

而在代碼中導(dǎo)入*.vue文件的時(shí)候捌蚊,需要寫上.vue后綴。原因還是因?yàn)?TypeScript 默認(rèn)只識(shí)別*.ts文件近弟,不識(shí)別*.vue文件:


四缅糟、改造 .vue 文件

下面內(nèi)容需要掌握es7的裝飾器(decorator)

vue-property-decorator

vue-property-decorator 是在 vue-class-component 上增強(qiáng)了更多的結(jié)合 Vue 特性的裝飾器,新增了這 7 個(gè)裝飾器:

  • @Emit
  • @Inject
  • @Model
  • @Prop
  • @Provide
  • @Watch

詳見(jiàn)官方文檔

import { Component, Emit, Inject, Model, Prop, Provide, Vue, Watch } from 'vue-property-decorator'

@Component
export class MyComponent extends Vue {
  
  @Prop()
  propA: number = 1

  @Prop({ default: 'default value' })
  propB: string

  @Prop([String, Boolean])
  propC: string | boolean

  @Prop({ type: null })
  propD: any

  @Watch('child')
  onChildChanged(val: string, oldVal: string) { }
}

相當(dāng)于

export default {
  props: {
    propA: Number,
    propB: {
      type: String,
      default: 'default value'
    },
    propC: [String, Boolean],
    propD: { type: null }
  }
  methods: {
    onChildChanged(val, oldVal) { }
  },
  watch: {
    'child': {
      handler: 'onChildChanged',
      immediate: false,
      deep: false
    }
  }
}

.vue 文件中使用

  1. script 標(biāo)簽上加上 lang="ts", 意思是讓webpack將這段代碼識(shí)別為typescript 而非javascript
  2. 修改vue組件的構(gòu)造方式( 跟react組件寫法有點(diǎn)類似, 詳見(jiàn)官方 )祷愉, 如下圖
  3. vue-property-decorator語(yǔ)法改造之前代碼
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末窗宦,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子二鳄,更是在濱河造成了極大的恐慌赴涵,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,743評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件订讼,死亡現(xiàn)場(chǎng)離奇詭異句占,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)躯嫉,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,296評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門纱烘,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人祈餐,你說(shuō)我怎么就攤上這事擂啥。” “怎么了帆阳?”我有些...
    開(kāi)封第一講書人閱讀 157,285評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵哺壶,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我蜒谤,道長(zhǎng)山宾,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書人閱讀 56,485評(píng)論 1 283
  • 正文 為了忘掉前任鳍徽,我火速辦了婚禮资锰,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘阶祭。我一直安慰自己绷杜,他們只是感情好直秆,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,581評(píng)論 6 386
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著鞭盟,像睡著了一般圾结。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上齿诉,一...
    開(kāi)封第一講書人閱讀 49,821評(píng)論 1 290
  • 那天筝野,我揣著相機(jī)與錄音,去河邊找鬼粤剧。 笑死遗座,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的俊扳。 我是一名探鬼主播途蒋,決...
    沈念sama閱讀 38,960評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼馋记!你這毒婦竟也來(lái)了号坡?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書人閱讀 37,719評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤梯醒,失蹤者是張志新(化名)和其女友劉穎宽堆,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體茸习,經(jīng)...
    沈念sama閱讀 44,186評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡畜隶,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,516評(píng)論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了号胚。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片籽慢。...
    茶點(diǎn)故事閱讀 38,650評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖猫胁,靈堂內(nèi)的尸體忽然破棺而出箱亿,到底是詐尸還是另有隱情,我是刑警寧澤弃秆,帶...
    沈念sama閱讀 34,329評(píng)論 4 330
  • 正文 年R本政府宣布届惋,位于F島的核電站,受9級(jí)特大地震影響菠赚,放射性物質(zhì)發(fā)生泄漏脑豹。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,936評(píng)論 3 313
  • 文/蒙蒙 一衡查、第九天 我趴在偏房一處隱蔽的房頂上張望瘩欺。 院中可真熱鬧,春花似錦峡捡、人聲如沸击碗。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 30,757評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)稍途。三九已至,卻和暖如春砚婆,著一層夾襖步出監(jiān)牢的瞬間械拍,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 31,991評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工装盯, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留坷虑,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,370評(píng)論 2 360
  • 正文 我出身青樓埂奈,卻偏偏與公主長(zhǎng)得像迄损,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子账磺,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,527評(píng)論 2 349

推薦閱讀更多精彩內(nèi)容

  • 整理自:三命:Vue + TypeScript 新項(xiàng)目起手式最新版:Vue-cli 整合 Typescript 筆...
    六毫笙閱讀 2,014評(píng)論 1 2
  • 01 臨近年關(guān)垮抗,城市里的異鄉(xiāng)人氏捞,又開(kāi)始候鳥(niǎo)一般的遷徙。學(xué)校還沒(méi)放假的時(shí)候冒版,辦公室里已經(jīng)有同事討論買票的事了液茎。 到了...
    平方田閱讀 619評(píng)論 2 4
  • 轉(zhuǎn)自http://blog.csdn.net/fesdgasdgasdg/article/details/5232...
    M_667c閱讀 474評(píng)論 0 3
  • 如果是一只貓咪,家里一定要有人辞嗡,盡量避免讓小貓咪自己在家捆等,如果習(xí)慣家庭生活的小貓咪,那么也是可以讓它自己待在家续室,因...
    天叔帶你養(yǎng)肥貓閱讀 1,023評(píng)論 0 0
  • 風(fēng)雪到 暖被難離 我屋子赴考 旺財(cái)饑寒難耐 鎖鏈拖地犬聲吠 臘八至 寒梅花開(kāi) 鄰家女于歸 賓客紛至沓來(lái) 爆竹響起鑼...
    廖阿大閱讀 239評(píng)論 2 1