4、支持国际化
5、提供utils方法(官方文档没有说明,但事实上业务可以使用)
CDN引入的umd总文件一般是全量构建的,不会有依赖问题,但是commonjs2模块的文件需要在业务层面再次使用Webpack构建。例如需要在业务层面支持 国际化 和 提供utils 的功能,那么就不能将 国际化 和 提供utils 的代码 bundle 到 commonjs2总文件 或 commonjs2的所有UI组件 中(每一个组件都 bundle
utils 的方法或者国际化API显然是不合理的),如果需要在业务层面支持 按需引入 的功能,那么不建议将 所有UI组件 的源码 bundle 到 commonjs2总文件 中,这样便可以实现层层引用,对外抛出功能的同时在业务层面可以防止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










