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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏石奈子的Java之路

原 Intellij idea2017编辑

3506
来自专栏葡萄城控件技术团队

WebStorm 常用功能的使用技巧分享

WebStorm 是 JetBrain 公司开发的一款 JavaScript IDE,使用非常方便,可以使编写代码过程更加流畅。 本文在这里分享一些常用功能的使...

2858
来自专栏Google Dart

AngularDart4.0 指南-体系结构概述 顶

AngularDart(我们通常在这个文档中简单地称为Angular)是一个框架,用于在HTML和Dart中构建客户端应用程序。它是作为Angular包发布的,...

873
来自专栏编程坑太多

「小程序JAVA实战」 小程序默认加载的页面和生命周期(八)

1042
来自专栏前端小作坊

网页上的复制与剪切

IE 10及以上的版本修改了Document.execCommand()方法,增加了对剪切和复制的支持。Chrome从43版本开始也支持了这项特性。

1282
来自专栏葡萄城控件技术团队

Angular的12个经典问题,看看你能答对几个?(文末附带Angular测试)

Angular作为目前最为流行的前端框架,受到了前端开发者的普遍欢迎。不论是初学Angular的新手,还是有一定Angular开发经验的开发者,了解本文中的12...

2208
来自专栏Youngxj

EMLOG自适应emMsg提示信息

2228
来自专栏小文博客

win10 Edge浏览器插件开发

1402
来自专栏salesforce零基础学习

salesforce lightning零基础学习(四) 事件(component events)简单介绍

2053
来自专栏十月梦想

node项目中文乱码解决

上一篇的第一个node项目成功运行,但是设置res.write('你好,世界'),浏览器运行出现乱码

923

扫码关注云+社区

领取腾讯云代金券