(八) 组件打包环境配置
整个项目打包
使用vue-cli提供的打包功能脚本
vue-cli-service build
修改默认打包脚本
相关配置细节见《vue-cli 库》说明文档
vue-cli-service build --target lib # target为打包指定类库，类库名为lib
继续
vue-cli-service build --target lib --name xingorg1 # --name指定名字为xingorg1
最后： 你可以通过下面的命令将一个单独的入口构建为一个库：
vue-cli-service build --target lib --name xingorg1 ./src/packages/index.js --no-clean
no-clean表示打包时不删除build文件夹（https://cli.vuejs.org/zh/config/#outputdir） 作用就是为了后边的按需打包，下表。
执行打包命令
npm run build
打包成功
引入包文件就是umd的js了
配置引入的入口文件
package json里配置main入口文件
"main": "./dist/xingorg1.umd.min.js",
按需打包-package单个组件单独打包
接着全局打包的脚本配置： 【后期这里改成了dist命令，更符合打包的使用规范】
"build": "vue-cli-service build --target lib --name xingorg1 ./packages/index.js && vue-cli-service build --all --no-clean",
修改打包的脚本
新增内容：
&& vue-cli-service build --xingorg1 --no-clean
no-clean的作用：因为每次执行build，cli的默认配置是会把前一次vue-cli-service打包的build删除再重建，而这里有两个串行的build命令，为了不清楚前一次的，所以加上--no-clean配置
--xingorg1为自定义属性，用于把所有组件分别打包到dist目录下，对应细节配置在vue.config.js里
vue.config.js中配置按需打包：
node之process
argv属性
切割前两个后得到传入的参数：【数组执行slice(2)后的结果】
执行&&后的第二次打包，肯定能拿到“--xingorg1“这个我们自定义的属性。检测到这个属性后，做相应的配置。
webpack enternals
排除打包项：https://www.webpackjs.com/configuration/externals/
基于此，最终配置如下：
/*
* @Author: @Guojufeng
* @Date: 2020-11-01 00:12:31
* @LastEditors: @Guojufeng
* @LastEditTime: 2020-11-01 23:29:39
* @FilePath: /Users/guojufeng/Documents/GitHub/xingorg1-ui/vue.config.js
*/
const isProd = process.env.NODE_ENV === 'production'
const path = require('path')
const fs = require('fs')
function resolve(filePath) {
return path.join(__dirname, filePath)
}
const getEntries = dir => {
// 整理需要按需加载的文件，dir为各组件所在的共同目录
let absolutionPath = path.resolve(dir) // 绝对路径
let sonFiles = fs.readdirSync(absolutionPath) // 读取第一层级的子元素文件,就是每个组件的包文件名
let entries = {}
sonFiles.forEach(file => {
let fileDirPath = path.join(absolutionPath, file) // 路径拼接，得到组件所在地址
if (fs.statSync(fileDirPath).isDirectory()) { // 判断路径的状态是不是文件夹
let filePath = path.join(fileDirPath, 'index.js') // 得到组件所在路径，继续拼接得到文件地址的pwd——绝对地址
entries[file] = filePath
}
})
return entries
}
const commonConfig = {
publicPath: '/',
devServer: {
host: 'dev.xingorg1-ui.com',
port: 8080,
disableHostCheck: true
},
chainWebpack: config => {
config.resolve.alias
.set('packages', resolve('packages'))
.set('comp', resolve('src/components'))
.set('style', resolve('styles'))
}
}
let buildConfig = {}
// 按需加载（build命令&&后第二个脚本，为按需加载打包）
const args = process.argv.slice(2); // 取出脚本执行时用户传入的所有参数
if (isProd && args.includes('--xingorg1')) { // '--xingorg1'作为自定义属性，为的是标识当前脚本是执行按需加载配置的
// 生产环境 && 按需加载配置的时候
buildConfig = {
outputDir: 'dist', // 导出目录
configureWebpack: { // 配置webpack
entry: { // 打包入口，为多个。
...getEntries('./packages') // 传入打包文件所在目录，通过函数获取一个对象，表明所有入口的配置
},
output: { // 组件使用者借助babel-plugin-import来实现按需导入
filename: 'lib/[name]/index.js', // 导出到对应名字的文件夹下的index.js
libraryTarget: 'umd', // 打包规范umd (将 library 暴露为所有的模块定义下都可运行的方式。它将在 CommonJS, AMD 环境下运行，或将模块导出到 global 下的变量)
libraryExport: 'default', // 导出格式-默认导出
library: ['xingorg1', '[name]'] // 打包的库名，会挂载在window上：window.xingorg1，其作为一个对象，内部还有多组件的[name]属性，如window.xingorg1.button
},
externals: { // 打包时的排除项,以减少包的体积 https://www.webpackjs.com/configuration/externals/
vue: {
root: 'Vue', // 指向全局变量
commonjs: 'vue',
commonjs2: 'vue',
amd: 'vue'
}
}
},
css: { // 抽离css
sourceMap: true, // 源码映射
extract: {
filename: 'css/[name]/style.css' // 抽离css到./dist/css/[name]/style.css
}
},
chainWebpack: config => {
// 去掉一些默认的不必要的配置
config.optimization.delete('splitChunks')
config.plugins.delete('copy')
config.plugins.delete('preload')
config.plugins.delete('prefetch')
config.plugins.delete('html')
config.plugins.delete('hmr') // 热更新
config.entryPoints.delete('app')
}
}
}
module.exports = !isProd ? commonConfig : Object.assign(commonConfig, buildConfig)
项目中引入：
全局引入
import xingorg1UI from 'xingorg1-ui'
import 'xingorg1-ui/xingorg1.css' # 需要单独引入样式
app.use(xingorg1UI)
按需加载
下边这样不是按需加载，这样还是把所有组件库代码都引入项目了
import { GjfButton } fron 'xingorg1-ui'
babel-plugin-import
使用插件babel-plugin-import后，可以帮我们转换上边的代码如下：
配置详见：
https://github.com/ant-design/babel-plugin-import
import { GjfButton } fron 'xingorg1-ui/lib/button/index.js' # 实现原理：靠AST语法树，做语法分析，解析import关键字来匹配组件名称再后换成单个组件的文件路径进行导入
相见讲解如《Element-ui 按需引入》
import { GjfButton } fron 'xingorg1-ui'
import 'xingorg1-ui/css/button/style.css' # 需要单独引入样式
app.use(xingorg1UI)