组件库开发系列 - 样式、图标、国际化、jest测试

119 阅读1分钟

系列

组件库开发系列 - package.json 认识

组件库开发系列 - webpack 和 rollup 打包 (带视频和源码)

目录

 - scss样式

 - icon图标处理

 - 国际化
 

项目地址

继续沿用上篇,rollup打包出来的项目,增加上述三点需求,采用gulp处理scss样式

scss 样式 和 图标

  • .js/.vue 和 .scss 是不同的,js代码用rollup处理,scss代码用gulp处理

  • scss 样式要打包称 css 文件

  • scss文件要有变量,可供后续项目替换

  • 图标采用font字体

gulpfile.js

const { series, src, dest } = require("gulp");
const sass = require("gulp-sass")(require("sass"));
const autoprefixer = require("gulp-autoprefixer");
const cssmin = require("gulp-cssmin");

function compile() {
  return src("./src/components/theme-chalk/*.scss")
    .pipe(sass.sync())
    .pipe(autoprefixer())
    .pipe(cssmin())
    .pipe(dest("./lib/theme-chalk"));
}

function copyfont() {
  return src("./src/components/theme-chalk/fonts/**")
    .pipe(cssmin())
    .pipe(dest("./lib/theme-chalk/fonts"));
}

function moveMainCss() {
  return src("./lib/theme-chalk/index.css").pipe(dest("./dist/theme-chalk"));
}

exports.build = series(compile, copyfont, moveMainCss);

package.json


  "scripts": {
    "build": "npm run build:js && npm run build:css",
    "build:js": "rollup -c",
    "build:css": "gulp build"
  },

国际化

element-ui 处理国际化的思路是:

  • 如果项目使用了 vue-i18n 库,则托管到它的 $t,由 vue-i18n 去维护双向绑定

  • 否则,失去双向绑定

使用:

import lang from 'element-ui/lib/locale/lang/en' 
import locale from 'element-ui/lib/locale' 
// 设置语言 
locale.use(lang)

原理: github.com/ElemeFE/ele…

let i18nHandler = function() {
const vuei18n = Object.getPrototypeOf(this || Vue).$t;
if (typeof vuei18n === 'function' && !!Vue.locale) {
  if (!merged) {
    merged = true;
    Vue.locale(
      Vue.config.lang,
      deepmerge(lang, Vue.locale(Vue.config.lang) || {}, { clone: true })
    );
  }
  return vuei18n.apply(this, arguments);
}
};

对于失去双向绑定这个事情,我们可以换个思路,创建个 新的vue 实例,注入到需要国际化的组件中,由mixin注入computed,这样当外部修改组件库的locel时,组件也会更新,就保持了双向绑定,而且不依赖 vue-i18n;vue2和vue3差异很大,这里还是改为vue2了

import defaultLocal from "./cn";

export const vueLocal = null;

export default install = (Vue) => {
  if (vueLocal) return;
  vueLocal = new Vue({
    data() {
      return {
        locale: defaultLocal,
      };
    },
  });
};

export const use = (l) => {
  vueLocal.$data.locale = l || defaultLocal;
};

jest 测试

  • 输入、输出、期望、匹配、分组
  • 异步
  • mock模拟
  • 快照