浅谈Vue CLI 3结合Lerna进行UI框架设计

2020-06-14 06:12:24易采站长站整理

4、支持国际化
5、提供utils方法(官方文档没有说明,但事实上业务可以使用)

CDN引入的umd总文件一般是全量构建的,不会有依赖问题,但是commonjs2模块的文件需要在业务层面再次使用Webpack构建。例如需要在业务层面支持 国际化提供utils 的功能,那么就不能将 国际化提供utils 的代码 bundlecommonjs2总文件commonjs2的所有UI组件 中(每一个组件都 bundle

utils
的方法或者国际化API显然是不合理的),如果需要在业务层面支持 按需引入 的功能,那么不建议将 所有UI组件 的源码 bundlecommonjs2总文件 中,这样便可以实现层层引用,对外抛出功能的同时在业务层面可以防止Webpack二次打包,从而导致引入两遍甚至多遍相同的代码的问题。

在组件库中开发时,为了构建commonjs2模块的文件,需要对各个

utils
、组件等引入的路径做出强约定,这样不仅产生的Webpack配置会变得很难维护,对于开发者的开发也需要做出一定的规范限制。

接下来分析一下各个脚本的构建功能。

npm run build:file

build:file
脚本是自动生成一些源码文件的脚本:

“build:file”: “node build/bin/iconInit.js & node build/bin/build-entry.js & node build/bin/i18n.js & node build/bin/version.js”,

其中与构建相关的脚本是

node build/bin/build-entry.js
,主要用于生成Webpack构建的入口源文件
src/index.js


// 注释说明该文件由build-entry.js脚本自动生成
/* Automatically generated by './build/bin/build-entry.js' */

import Pagination from '../packages/pagination/index.js';
// ... 这里省略大部分组件引入
import TimelineItem from '../packages/timeline-item/index.js';
import locale from 'element-ui/src/locale';
import CollapseTransition from 'element-ui/src/transitions/collapse-transition';

const components = [
Pagination,
// ... 这里省略大部分组件
TimelineItem,
CollapseTransition
];

const install = function(Vue, opts = {}) {
locale.use(opts.locale);
locale.i18n(opts.i18n);

components.forEach(component => {
Vue.component(component.name, component);
});

Vue.use(Loading.directive);

Vue.prototype.$ELEMENT = {
size: opts.size || '',
zIndex: opts.zIndex || 2000