用TypeScript構建Webpack+Vue項目

時間 2019-11-08

標籤 typescript 構建 webpack+vue webpack vue 項目简体版

原文原文鏈接

前言

都9102年了, 你還在用vue-cli一鍵生成項目嗎, 都9102年了, 你尚未用過TypeScript嗎javascript

若是你使用過TypeScript, 必定會感慨開(ban)發(zhuan)體驗真爽html

可是, 若是你嘗試過本身動手去構建一個TypeScript項目, 你可能會發現這裏面會有不少的坑, 想要順利出坑, 請記住Evan You大大的話vue

若是你問我爲啥連Webpack都要用TypeScript去配置, 由於代碼潔癖的職業病, 因此java

閱讀這篇文章, 你將收穫

如何用TypeScript寫Webpack配置
如何用TypeScript + Webpack構建Vue項目
開箱即用的TypeScript + Webpack項目
開箱即用的TypeScript + Webpack + Vue項目
開箱即用的TypeScript + Webpack + Vue + H5開發VW適配項目

bb

這是我在掘金的第一篇文章, 歡迎各位大佬交流和指正node

如何用`TypeScript`寫`Webpack`配置

在Webpack官方文檔找到對TypeScript配置語言的支持webpack.js.org/configurati…

閱讀官方文檔, 該方案的原理是利用ts-node去運行Webpackwebpack
安裝項目須要的具備類型定義的依賴git

$ npm i -D typescript ts-node @types/node @types/webpack @types/webpack-dev-server
複製代碼

配置入口文件和打包出口github
配置tsconfig.jsonweb

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "esModuleInterop": true
  }
}
複製代碼

讓ts-node找到配置文件, 安裝依賴後有兩種方案

$ npm i -D tsconfig-paths
複製代碼

// 方案1: 添加npm scripts
// "build": "cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" webpack"

// 方案2: 利用package.json的config
"config": {
    "TS_NODE_PROJECT": "\"tsconfig-for-webpack-config.json\""
  },
複製代碼

關於類型定義, 如開發環境的配置, Mac系統, 按住command鍵, 鼠標懸停至包名, 可單擊查看Webpack源碼裏的命名空間

跑起來試試

如何用`TypeScript + Webpack`構建`Vue`項目

在vue-loader官方文檔找到ts-loader預處理器的配置vue-loader.vuejs.org/zh/guide/pr…

npm i -D typescript ts-loader
複製代碼

// webpack.config.js
module.exports = {
  resolve: {
    extensions: ['.ts', '.js']
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        options: { appendTsSuffixTo: [/\.vue$/] }
      }
    ]
  },
  // ...plugin omitted
}
複製代碼

vue-loaderV15須要配置Webpack插件才能正確使用 vue-loader.vuejs.org/migrating.h…

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  // ...
  plugins: [
    new VueLoaderPlugin()
  ]
}
複製代碼

查看Vue.js官方文檔裏對TypeScript的支持vuejs.org/v2/guide/ty…vue-cli
在項目src裏添加vue-shims.d.ts

declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}
複製代碼

安裝Vue對TypeScript支持的依賴

$ npm i -D vue-class-component vue-property-decorator
複製代碼

愉快的玩耍起來吧

<template lang="pug">
  .hello {{ computedMsg }}
</template>

<script lang="ts">
  import Vue from 'vue'
  import Component from 'vue-class-component'

  @Component
  export default class HelloComponent extends Vue {
    msg = ''

    mounted () {
      this.greet()
    }

    get computedMsg () {
      return 'Hello, ' + this.msg
    }

    greet () {
      this.msg = 'typeScirpt_webpack_vue !'
    }
  }
</script>
複製代碼