• npm地址

• github源码

(八) 组件打包环境配置

整个项目打包

使用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)