vue-cli 3.0 下發佈一個 TypeScript 組件

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.extend() 形式導出的子類組件。

使用子類組件時，須要實例化：new VueLoading()。

咱們所須要的 props 屬性，被放在實例屬性 $options 上：

可是仍是有些問題，當你使用 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，如作爲指令使用，或者掛在原型上。