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

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

// 'element-ui': path.resolve(__dirname, '../')
// alias中的'element-ui'作为npm包抛出后指向了业务项目node_modules所在的npm包路径
alias: config.alias
},
externals: {
// 构建只排除vue
// umd模块通过CDN形式引入,因此将所有的组件、utils、i18n等构建在内
// umd模块没有按需引入功能
vue: config.vue
},
// ...忽略
};

构建文件

lib/index.js
主要的功能是用于CDN形式引入项目,并且无法做到按需加载,产生的体积非常大,对于简单的应用可能不适用。

webpack --config build/webpack.common.js

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


lib
├── element-ui.common.js # commonjs2 总文件

由于该文件需要在业务层面再次使用Webpack构建,因此考量的方面较多。在分析Webpack配置之前,再次回顾一下

Element
能为我们做什么:

1、完整引入(抛出commonjs2总文件)
2、按需引入(抛出commonjs2的所有UI组件)
3、支持国际化(commonjs2)
4、提供utils方法(commonjs2,当然官方没有对外说明

webpack --config build/webpack.common.js
脚本主要用于构建完整引入功能,同时为了可以在业务层面抛出 按需引入、支持国际化 等功能,构建
element-ui.common.js
时需要将 UI组件、支持国际化、utils方法 的源代码排除。

webpack.common.js
配置如下:


// build/webpack.common.js

// ...忽略

module.exports = {
mode: 'production',
entry: {
app: ['./src/index.js'] },
output: {
path: path.resolve(process.cwd(), './lib'),
publicPath: '/dist/',
filename: 'element-ui.common.js',
chunkFilename: '[id].js',
libraryExport: 'default',
library: 'ELEMENT',
// 生成commonjs2模块
libraryTarget: 'commonjs2'
},
resolve: {
extensions: ['.js', '.vue', '.json'],
// 'element-ui': path.resolve(__dirname, '../')
alias: config.alias,
modules: ['node_modules'] },
// 这里用于排除UI组件、支持国际化、utils方法的源代码,这些源代码需要额外的脚本进行构建
externals: config.externals,
optimization: {
// commonjs2无须压缩处理