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，如作为指令使用，或者挂在原型上。