【xingorg1-ui】基于vue3.0从0-1搭建组件库 (八) 组件库打包环境配置

2021年09月15日 阅读数:2
这篇文章主要向大家介绍【xingorg1-ui】基于vue3.0从0-1搭建组件库 (八) 组件库打包环境配置,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

(八) 组件打包环境配置vue

整个项目打包

使用vue-cli提供的打包功能脚本node

vue-cli-service build

修改默认打包脚本

相关配置细节见《vue-cli 库》说明文档webpack

vue-cli-service build --target lib # target为打包指定类库,类库名为lib

继续git

vue-cli-service build --target lib --name xingorg1 # --name指定名字为xingorg1

最后: 你能够经过下面的命令将一个单独的入口构建为一个库:github

vue-cli-service build --target lib --name xingorg1 ./src/packages/index.js --no-clean

no-clean表示打包时不删除build文件夹(https://cli.vuejs.org/zh/config/#outputdir) 做用就是为了后边的按需打包,下表。web

执行打包命令

npm run build

打包成功 image.pngvue-cli

引入包文件就是umd的js了npm

image.png
image.png

配置引入的入口文件

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里 image.png

vue.config.js中配置按需打包:

node之process

argv属性

image.png 切割前两个后获得传入的参数:【数组执行slice(2)后的结果】 image.png 执行&&后的第二次打包,确定能拿到“--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',
    port8080,
    disableHostChecktrue
  },
  chainWebpackconfig => {
    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
      sourceMaptrue// 源码映射
      extract: {
        filename'css/[name]/style.css' // 抽离css到./dist/css/[name]/style.css
      }
    },
    chainWebpackconfig => {
      // 去掉一些默认的没必要要的配置
      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)