Webpack组合Vue+TypeScript

我不想生命被时光遗忘,只能努力学习.

一、 安装依赖

• 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

这些库大体作用

• vue-class-component：强化 Vue 组件，使用 TypeScript/装饰器 增强 Vue 组件
• vue-property-decorator：在 vue-class-component 上增强更多的结合 Vue 特性的装饰器
• ts-loader：TypeScript 为 Webpack 提供了 ts-loader，其实就是为了让webpack识别 .ts .tsx文件

关于vue-property-decorator的详细用法可以看我另一篇
vue-property-decorator用法

---

二、配置webpack

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

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

添加webpack对.ts和.tsx的解析

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

ts-loader会检索当前目录下的tsconfig.json 文件，根据里面定义的规则来解析.ts文件（就跟.babelrc的作用一样）

---

三、添加 tsconfig.json

在根目录下创建tsconfig.json文件

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

{
  // 编译选项
  "compilerOptions": {
    // 输出目录
    "outDir": "./output",
    // 是否包含可以用于 debug 的 sourceMap
    "sourceMap": true,
    // 以严格模式解析
    "strict": true,
    // 采用的模块系统
    "module": "esnext",
    // 如何处理模块
    "moduleResolution": "node",
    // 编译输出目标 ES 版本
    "target": "es5",
    // 允许从没有设置默认导出的模块中默认导入
    "allowSyntheticDefaultImports": true,
    // 将每个文件作为单独的模块
    "isolatedModules": false,
    // 启用装饰器
    "experimentalDecorators": true,
    // 启用设计类型元数据（用于反射）
    "emitDecoratorMetadata": true,
    // 在表达式和声明上有隐含的any类型时报错
    "noImplicitAny": false,
    // 不是函数的所有返回路径都有返回值时报错。
    "noImplicitReturns": true,
    // 从 tslib 导入外部帮助库: 比如__extends，__rest等
    "importHelpers": true,
    // 编译过程中打印文件名
    "listFiles": true,
    // 移除注释
    "removeComments": true,
    "suppressImplicitAnyIndexErrors": true,
    // 允许编译javascript文件
    "allowJs": true,
    // 解析非相对模块名的基准目录
    "baseUrl": "./",
    // 指定特殊模块的路径
    "paths": {
      "jquery": [
        "node_modules/jquery/dist/jquery"
      ]
    },
    // 编译过程中需要引入的库文件的列表
    "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 识别 .vue

由于 TypeScript默认并不支持*.vue 后缀的文件，所以在 vue项目中引入的时候需要创建一个vue-shim.d.ts文件，放在项目项目对应使用目录下，例如 src/vue-shim.d.ts

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

意思是告诉 TypeScript *.vue 后缀的文件可以交给 vue模块来处理。

而在代码中导入*.vue文件的时候，需要写上.vue后缀。原因还是因为 TypeScript 默认只识别*.ts文件，不识别*.vue文件：

---

四、改造 .vue 文件

下面内容需要掌握es7的装饰器(decorator)

vue-property-decorator

vue-property-decorator 是在 vue-class-component 上增强了更多的结合 Vue 特性的装饰器，新增了这 7 个装饰器：

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

详见官方文档

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) { }
}

相当于

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 标签上加上 lang="ts", 意思是让webpack将这段代码识别为typescript 而非javascript
2. 修改vue组件的构造方式( 跟react组件写法有点类似, 详见官方 )， 如下图
3. 用vue-property-decorator语法改造之前代码

• 参考文章
  https://segmentfault.com/a/1190000011744210#articleHeader5
  https://segmentfault.com/a/1190000011878086