webpack429x成神之路二十四-手动配置vuecli集成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 介绍 (待更新)