- npm地址
- github源码
(八) 组件打包环境配置
整个项目打包
使用vue-cli提供的打包功能脚本
代码语言：javascript复制vue-cli-service build修改默认打包脚本
相关配置细节见《vue-cli 库》说明文档
代码语言：javascript复制vue-cli-service build --target lib # target为打包指定类库，类库名为lib继续
代码语言：javascript复制vue-cli-service build --target lib --name xingorg1 # --name指定名字为xingorg1最后： 你可以通过下面的命令将一个单独的入口构建为一个库：
代码语言：javascript复制vue-cli-service build --target lib --name xingorg1 ./src/packages/index.js --no-cleanno-clean表示打包时不删除build文件夹（https://cli.vuejs.org/zh/config/#outputdir） 作用就是为了后边的按需打包，下表。
执行打包命令
代码语言：javascript复制npm run build打包成功
引入包文件就是umd的js了
image.png
配置引入的入口文件
package json里配置main入口文件
代码语言：javascript复制"main": "./dist/xingorg1.umd.min.js",按需打包-package单个组件单独打包
接着全局打包的脚本配置： 【后期这里改成了dist命令，更符合打包的使用规范】
代码语言：javascript复制"build": "vue-cli-service build --target lib --name xingorg1 ./packages/index.js && vue-cli-service build --all --no-clean",修改打包的脚本
新增内容：
代码语言：javascript复制 && vue-cli-service build --xingorg1 --no-cleanno-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/
基于此，最终配置如下：
代码语言：javascript复制/*
* @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)项目中引入：
全局引入
代码语言：javascript复制import xingorg1UI from 'xingorg1-ui'
import 'xingorg1-ui/xingorg1.css' # 需要单独引入样式
app.use(xingorg1UI)按需加载
下边这样不是按需加载，这样还是把所有组件库代码都引入项目了
代码语言：javascript复制import { GjfButton } fron 'xingorg1-ui'babel-plugin-import
使用插件babel-plugin-import后，可以帮我们转换上边的代码如下：
配置详见：
https://github.com/ant-design/babel-plugin-import
代码语言：javascript复制import { GjfButton } fron 'xingorg1-ui/lib/button/index.js' # 实现原理：靠AST语法树，做语法分析，解析import关键字来匹配组件名称再后换成单个组件的文件路径进行导入相见讲解如《Element-ui 按需引入》
代码语言：javascript复制import { GjfButton } fron 'xingorg1-ui'
import 'xingorg1-ui/css/button/style.css' # 需要单独引入样式
app.use(xingorg1UI)
