系列
组件库开发系列 - 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)
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模拟
- 快照