【九月打卡】第1天 组件打包

课程名称：基于Vue3+Vite+TS，二次封装element-plus业务组件
课程章节：第8章 使用vuepress 编写组件文档
主讲老师：五月的夏天

课程内容：

今天学习的内容包括：
8-1 本章概述——组件库开发完成后如何提供给大家使用，这章学习打包，文档等。
8-2 实现组件的全量打包——全量打包可以理解为全量引入，打包后提供给别人引入使用。
8-3 单独打包每个组件实现按需引入——全量包一般比较大，为了更好的性能等，一般使用按需引用。

课程收获：

组件的全量打包

1、将原先开发的compontens、untils、style复制一份到packages文件夹下。
2、编写打包脚本build.js并打包。
3、在项目中引用并测试效果。

const { defineConfig, build } = require('vite')
lib: {
  entry: path.resolve(entryDir, name),
  name: 'index',
  fileName: 'index',
  formats: ['es', 'umd']
},

单独打包按需引入

1、因为全量包较大，在项目中有些使用不到，故加入单独打包进行按需引用提升代码质量。
2、使用node的fs.readdirSync(entryDir)进行读取packages文件夹下组件的数组。
3、循环生成单独的组件进行按需引用。

const fileStr = `{
    "name": "${name}",
    "main": "index.umd.js",
    "module": "index.es.js",
    "style": "style.css"
  }`
  //  输出
  fsExtra.outputFile(
    path.resolve(outDir, `${name}/package.json`),
    fileStr,
    'utf-8'
  )
import chooseIcon from '../lib/chooseIcon/index.mjs'
import '../lib/chooseIcon/style.css'
app.use(chooseIcon)

今天的学习遇到了不少问题，然后都解决了，上个月参与打卡学习收获满满，后面不打卡后便放任自己，不学习了，这个月打卡活动今天开始后，一方面可以约束自己每天都进行学习，还有奖品可以领取，非常好，感谢慕课网的活动。

下一步就是学习 发布组件库 了。今天学习就先到这里吧。

坚持打卡，坚持学习，未来可期，加油😀~

​