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

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

};

Vue.prototype.$loading = Loading.service;
// ...
};

/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue);
}

export default {
version: '2.7.0',
locale: locale.use,
i18n: locale.i18n,
install,
CollapseTransition,
Loading,
Pagination,
// ... 这里省略大部分组件
TimelineItem
};

在组件的开发过程中如果组件较多,建议使用脚本自动生成构建入口文件。

npm run lint

构建之前使用

lint
脚本对构建的源码文件进行
eslint
校验:


"lint": "eslint src/**/* test/**/* packages/**/* build/**/* --quiet",

Element
eslint
做了严格控制,一旦
eslint
报错那么
dist
总体构建脚本 执行停止,整体构建失败。这里的
eslint
校验可以使用eslint-loader 进行处理(如果你希望
eslint
校验失败也可以进行构建可以查看Errors and Warning )。

webpack --config build/webpack.conf.js

webpack --config build/webpack.conf.js
脚本用于构建umd总文件,执行该脚本最终会在
lib
下生成
index.js
文件:


lib
├── index.js # umd 总文件

webpack.conf.js
配置如下:


// build/webpack.conf.js

// ...忽略

module.exports = {
mode: 'production',
// 指定入口文件src/index.js,该入口文件由`build:file`脚本自动生成
entry: {
app: ['./src/index.js'] },
output: {
// 在lib文件中生成
path: path.resolve(process.cwd(), './lib'),
// 生成lib/index.js
filename: 'index.js',
// 生成umd模块
libraryTarget: 'umd',
// src/index.js文件采用export default语法抛出,因此需要设置libraryExport
// 否则引入的UI组件库需要使用.default才能引用到抛出的对象
// if your entry has a default export of `MyDefaultModule`
// var MyDefaultModule = _entry_return_.default;
// 这里踩过坑,所以说明一下,不配置的话遇到的问题是引入的UI组件库没法解构
libraryExport: 'default',
},
resolve: {
extensions: ['.js', '.vue', '.json'],