ts搭建组件库

想要搭建组件库，必定要有好的模仿样例，比如element-ui。阅读源码就是最好的学习路径。
本文主要内容：从零搭建自己的组件库，并进行组件测试。 涉及技术：vue + typeScript + scss + chai + mocha + karma。

一、骨架搭建

1.1 项目初始化

使用vue-cli3初始化项目，vue create dy-ui,安装如下图所示依赖，版本选择2.x。 初始化完成后，删除不必要的文件夹。修改目录如下：

.
├── src
│   ├── packages
│   │   ├── button (组件文件夹)
│   │   └── index.ts （组件注册入口）
│   ├── styles  (通用样式文件夹)
│   ├── types  (声明文件)
│   ├── App.vue
│   ├── main.ts
├── test
│   ├── unit
│   │   ├── button.spec.js (按钮测试文件)

根目录结构：

1.2 安装依赖资源

此项目所需依赖

    "@babel/polyfill": "^7.11.5",
    "babel-loader": "^8.1.0",
    "core-js": "^3.6.5",
    "karma": "^5.2.3",
    "karma-chai": "^0.1.0",
    "karma-chrome-launcher": "^3.1.0",
    "karma-mocha": "^2.0.1",
    "karma-sourcemap-loader": "^0.3.8",
    "karma-spec-reporter": "^0.0.32",
    "karma-webpack": "^4.0.2",
    "mocha": "^8.1.3",
    "sass-resources-loader": "^2.1.1",
    "vue": "^2.6.11",
    "vue-class-component": "^7.2.3",
    "vue-property-decorator": "^8.4.2"

1.3 引入scss全局变量

在vue.config.js文件中，引入scss全局变量。

module.exports = {
chainWebpack: config => {
    config
      .entry('index')
      .add('@babel/polyfill')
      .end();
    const scssRes = config.module.rule('scss').oneOfs.store;
    scssRes.forEach(item => {
      item
      .use("sass-resource-loader")
        .loader('sass-resources-loader')
        .options({
          resources: './src/styles/_var.scss'
        }).end();
    })
  },
}

_var.scss文件中写入所需样式的全局变量。

二、搭建按钮组件

2.1 编写组件

以按钮组件为例，可到element官网上查看按钮组件所需要传入的参数。

2.2 注册组件

在src文件夹下index.ts，注册组件。

import DyButton from './button/button/Button.vue';
const install = (Vue: any) => {
	Vue.component(DyButton.name, DyButton);
}
export default {
  install,
};

除了以组件形式引入，还有可能会通过script标签的方式引入。全局直接通过script 引用的方式会默认调用install.

if (typeof window !== 'undefined' && (window as any).Vue) {
  install((window as any).Vue);
}

2.3 使用组件

在main.ts文件中，引入组件的入口文件，并使用。

import dyUi from './packages/index';
Vue.use(dyUi);

三、测试按钮组件

在unit文件夹下，新建button.spec.js测试文件。在package.json文件的script中添加测试执行语句。"test": "karma start",。 按需引入所需文件依赖，使用chai断言测试按钮功能是否成立。

import { shallowMount } from '@vue/test-utils'; // vue提供的快速测试的方法
import { expect } from 'chai';
import Button from '@/packages/button/button/Button.vue';
 it('测试button能否正常显示', () => {    // 测试当前组件运行在浏览器的情况
        const wrapper = shallowMount(Button, {
            slots: {
                default: 'dy-ui'
            }
        });
        expect(wrapper.text()).to.eq('dy-ui');
    });

运行yarn run test即可。

四、npm发布组件

打包文件：

"lib": "vue-cli-service build --target lib --name dying-ui ./src/packages/index.ts"

在此，需要注意的是打包路径是否正确。 之后，在npm官网上注册一个账号。在需要发布的项目中登录自己的npm账号。

登录成功后，将package.json文件中的private改为false，便可以发布npm包。若更新，则需要确认版本号不同，才可发布。

npm publish		// 发布命令

点击查看源码。