webpack4.29.x成神之路（二十四） 手動配置vue-cli——集成typescript

目錄

上節： 手動配置vue-cli下

上節目錄：

本節給以前配的vue-cli集成ts，讓它支持ts + vue的開發。
首先修改build/webpack.base.js:

const HTMLPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const {resolve} = require('path');
module.exports = {
  entry: resolve(__dirname, '../src/main.ts'),
  resolve: {
    // 這裏能夠配置些文件後綴，用於寫路徑時可省略後綴（會影響打包速度，不建議配太多）
    extensions: [ '.tsx', '.ts', '.js', 'vue', 'less' ]
  },
  module: {
    rules: [{
      // 識別.vue文件
      test: /\.vue$/,
      loader: 'vue-loader'
    }, {
      // 識別.ts或.tsx文件
      test: /\.tsx?$/,
      use: 'ts-loader'
    }, {
      // 用於識別vue文件中的script塊
      test: /\.js$/,
      loader: 'babel-loader',
    }, {
      test: /\.(gif|jpg|jpeg|png|svg|ttf|woff)$/,
      loader: 'url-loader'
    }]
  },
  plugins: [
    new HTMLPlugin({
      template: resolve(__dirname, '../index.html')
    }),

    // 將定義過的其它規則複製並應用到 .vue 文件裏相應語言的塊
    new VueLoaderPlugin()
  ]
};

在rule里加了ts規則後，經過VueLoaderPlugin也能將其用於.vue文件

而後根目錄下新建tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "esNext",
    // "strict": true,
    "strictPropertyInitialization": false,
    "strictNullChecks": false,
    "noImplicitAny": false,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    /*"types": [
      "webpack-env"
    ],*/
    "paths": {
      "@/*": [
        "src/*"
      ],
      "*": [
        "src/*"
      ]
    },
    "lib": [
      "esNext",
      "dom",
      "dom.iterable",
      "scripthost",
      "es2015.promise"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

這是ts的配置文件，不熟的話能夠複製上面的，具體選項參考官網

而後要給vue寫一下類型聲明，src下新建shims-vue.d.ts
src/shims-vue.d.ts:

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

若是你要寫tsx語法的話再新建shims-tsx.d.ts
src/shims-tsx.d.ts:

import Vue, { VNode } from 'vue'

declare global {
  namespace JSX {
    // tslint:disable no-empty-interface
    interface Element extends VNode {}
    // tslint:disable no-empty-interface
    interface ElementClass extends Vue {}
    interface IntrinsicElements {
      [elem: string]: any
    }
  }
}

而後改一下App.vue，把ts部分改爲外部引入的:
src/App.vue:

<template>
  <div class="app">
    <h1>hello {{msg}}</h1>
  </div>
</template>
<script lang="ts" src="./App.ts"></script>
<style scoped lang="less">
.app{
  h1{
    color: #f60;
  }
}
</style>

src下新建App.ts:

import { Component, Vue } from "vue-property-decorator";
  @Component({
    name: "App"
  })
  export default class App extends Vue {
    msg = 'webpack4'
  }

將src/main.js改爲main.ts, 如今目錄大體以下：

而後安裝依賴：
npm i typescript ts-loader vue-class-component vue-property-decorator -D

而後npm run dev，打開瀏覽器:

試下npm run build應該也能成功打包：

下節：vue-cli與vue-loader介紹(待更新)