vue-cli 3.0 下釋出一個 TypeScript 元件

三毛丶發表於2018-06-24
VueTypeScript元件

vue-cli 釋出在即，TypeScript 也日益普及，於是藉此機會，將以前寫過的一個外掛 vue-loading-template 用 TypeScript 重構，並新增一些實用的功能。

構建配置

vue-cli 3.0 提供了一系列功能，包括對 Babel, TypeScript, ESlint, PWA 等開箱即用的支援，同時，它也提供了一個 CLI 上的 GUI 介面，你只需輸入 vue ui 即可看到配置介面，這裡不過多說明，有興趣的同學，可以參考文件： https://cli.vuejs.org/dev-guide/ui-api.html 。

構建目標

當使用命令 vue-cli-service build 時，vue-cli 提供不同構建目標選項（預設為 app）。如果目的是構建釋出一個 npm 包，我們可以選擇 lib 為構建目標，在此種模式下，vue 不會被打包進來，即使你的專案裡引用了 vue：

vue-cli-service build --target lib --name vueLoading [entry]
複製程式碼

--name 檔名字，[entry] 構建入口。

除了構建一個 lib 以外，我們還需構建一個 target 為 app 的專案，用以部署在 GitHub Pages 上，於是，專案裡的 package.json 至少含有以下兩條命令：

// package.json
{
  // others..
  "scripts": {
    "build": "vue-cli-service build --dest docs",
    "build-bundle": "vue-cli-service build --target lib --name vueLoading ./src/index.ts",
  }
}

複製程式碼

除此之外，還需配置 vue.config.js 下的 baseUrl，因為 GitHub Pages 上 url 是 https://jkchao.github.io/vue-loading/ ，

module.exports = {
  baseUrl: process.env.NODE_ENV === 'production'
		    ? '/vue-loading/'
		    : '/'
}
複製程式碼

配置 loaders

這個專案裡，我們匯入的檔案是 svg，預設情況下，vue-cli 的配置將其轉化為 base64 檔案，此時，需替換 vue-cli 的 loader 配置：

module.exports = {
  // ... other
  chainWebpack: config => {
    const svgRule = config.module.rule('svg')

    svgRule.uses.clear()

    svgRule
      .use('raw-loader')
        .loader('raw-loader')
  }
}
複製程式碼

修改檔案

index.ts

釋出的元件有兩種方式供社群使用：

  • 在單檔案裡引入檔案如 import { vueLoading } from 'vue-loading-template'，後在單檔案元件 components 選項中定義就可使用。

  • 可當外掛使用，並提供可選的全域性屬性配置：

    import Vue from 'vue'
import vueLoading from 'vue-loading-template'
Vue.use(vueLoading, {
    type: 'balls',
    color: '#5ac1dd',
    size: {
      width: '30px',
      height: '30px'
    }
})
複製程式碼

    install 之後，vueLoading 元件被全域性註冊。

第一點實現比較容易，匯入寫好的元件，作為成員匯出即可：

import VueLoading from './components/Loading.vue'

export { VueLoading }

複製程式碼

在第二點裡，當做為外掛使用時，匯出的成員必須提供 install 方法，install 第一個引數是 Vue 構造器，第二個引數即是元件的屬性：

import Vue from 'vue'

import VueLoading from './components/Loading.vue'

// VueLoadingOptions 是定義的宣告，下文將會出現。
import { VueLoadingOptions } from '../typings/index'

const install = (
  vue: typeof Vue,
  options?: VueLoadingOptions
) => {
  vue.component('vue-loading', VueLoading)
}

export default { install }
複製程式碼

這樣構建的包，允許我們作為外掛使用 Vue.use(vueLoading)，但是並沒有使用接受的一個可選 options 引數。

在沒改寫成 TypeScript 之前，我們可以把 options 值賦給元件的 props：

const install = (
  vue,
  options
) => {
  if (options) {
    VueLoading.props.type.default = options.type
    VueLoading.props.color.default = options.color
    VueLoading.props.size.default = () => options.size
  }
  vue.component('vue-loading', VueLoading)
}
複製程式碼

改寫為 TypeScript 元件之後（實際上是通過 Vue.extend 定義的 Vue 子類），並不能直接獲取元件的 props，我們可以通過列印兩種不同元件來清楚的瞭解：

vue-cli 3.0 下釋出一個 TypeScript 元件

vue-cli 3.0 下釋出一個 TypeScript 元件

圖一，是普通元件匯出形式，

圖二，是使用 Vue.extend() 形式匯出的子類元件。

使用子類元件時，需要例項化：new VueLoading()。

我們所需要的 props 屬性，被放在例項屬性 $options 上：

vue-cli 3.0 下釋出一個 TypeScript 元件

但是還是有些問題，當你使用 new VueLoading().$options.props.type 時，它會發出警告：

  • props 屬性可能是不存在的；
  • type 可能並沒有在 props 屬性上。

我們需要給 props 斷言：

import Vue from 'vue'

import VueLoading from '@/components/Loading.vue'
import { VueLoadingOptions } from '../typings/index'

interface Props {
  type: { default: string },
  color: { default: string },
  size: { default: () => any },
  [key: string]: any
}

const install = (
  vue: typeof Vue,
  options?: VueLoadingOptions
) => {
  if (options) {
    const componentProps = new VueLoading().$options.props as Props

    componentProps.type.default = options.type || 'spiningDubbles'
    componentProps.color.default = options.color || '#457e86'
    componentProps.size.default = () => options.size || { width: '40px', height: '40px' }
  }

  vue.component('vue-loading', VueLoading)
}

export { VueLoading }
export default { install }

複製程式碼

宣告檔案

在 TypeScript 檔案中，當以非相對路徑匯入一個模組時，宣告檔案扮演著非常重要的角色。

如果你想進一步瞭解在 TypeScript 模組匯入，可以參考這篇文章。

一個模組的宣告檔案，用以提供對應模組的行為提示，以及約束能力。因此，我們只需根據模組匯出寫宣告檔案即可：

import Vue from 'vue'

type LoadingType = 'balls' | 'bars' | 'beat' | 'bubbles' | 'cylon' | 'spin' | 'spiningDubbles' | 'barsCylon'

interface VueLoadingOptions {
  // loading type
  type: LoadingType

  // loading color
  color: string

  // loading size
  size: { width: string, height: string }
}

declare function install(vue: typeof Vue, options?: VueLoadingOptions): void

declare class VueLoading extends Vue {}

declare const _default: {
  install: typeof install
}

export { VueLoading, LoadingType, VueLoadingOptions }

export default _default

複製程式碼

至此，一個簡單的 TypeScript 元件包已經完成了。

有點牽強？

  • 是的，特別是當改變元件 default props 時（使用 Vue.extend() 匯出的元件是一個構造器）。
  • 此外，作為外掛使用時，對傳入的引數，並沒有一個約束（提示）的資訊（和想象中有點不太一樣）。

當然，這只是一個簡單的例子，你可以為它添件多種 Feature，如做為指令使用，或者掛在原型上。

相關文章