第8章 - vuepress编写组件文档

1.组件库全量打包

所有的文件打包到一个文件中，直接引入打包的一个文件就行。

1.新建packages文件夹，这个文件夹下面放置编写好的所有的组件，也就是我们打包的入口文件夹。然后拷贝其他的引用的文件夹，修改文件的路径。ps：不要忘记在packages/index.ts中引入style样式文件。

// command/build.js
// 打包配置
const path = require('path')
const { defineConfig, build } = require('vite')
const vue = require('@vitejs/plugin-vue')
const vueJsx = require('@vitejs/plugin-vue-jsx')

// 打包入口文件夹
const entryDir = path.resolve(__dirname, '../packages')

// 出口文件夹
const outDir = path.resolve(__dirname, '../lib')

// vite基础配置
const baseConfig = defineConfig({
    configFile: false,
    publicDir: false,
    plugins: [vue(), vueJsx()]
})

// rollup打包
const rollOptions = {
    // 排除的包，不需要打包的
    enternal: ['vue', 'vue-router'],

    // 使用全局的vue
    output: {
        globals: {
            vue: 'Vue'
        }
    }
}

// 全量打包构建方法
const buildAll = async() => {
    await build({
        ...baseConfig,
        build: {
            rollOptions,
            // lib：打包的库配置
            lib: {
                // 打包的入口
                entry: path.resolve(entryDir, 'index.ts'),

                // 打包的名字
                name: 'mooc-element-components',

                fileName: 'mooc-element-components',

                // 输出格式（exmodule，umd规范）
                formats: ['es', 'umd']
            },
            outDir
        }
    })
}

const buildLib = async () => {
    await buildAll()
}

buildLib()

package.json 配置启动脚本

scripts: {
	"build:components": "node ./command/build.js"
    "lib": "build:components"
}

npm run lib

然后在项目中引入打包的文件

2.按需打包

每个文件按需打包，这样引入的时候就可以按需要引入使用的组件，不必全部引入。

command/build.js

// 打包配置
const path = require('path')
const { defineConfig, build } = require('vite')
const vue = require('@vitejs/plugin-vue')
const vueJsx = require('@vitejs/plugin-vue-jsx')

const fsExtra = require('fs-extra')

const fs = require('fs')
// 打包入口文件夹
const entryDir = path.resolve(__dirname, '../packages')

// 出口文件夹
const outDir = path.resolve(__dirname, '../lib')

// vite基础配置
const baseConfig = defineConfig({
    configFile: false,
    publicDir: false,
    plugins: [vue(), vueJsx()]
})

// rollup打包
const rollOptions = {
    // 排除的包，不需要打包的
    enternal: ['vue', 'vue-router'],

    // 使用全局的vue
    output: {
        globals: {
            vue: 'Vue'
        }
    }
}

// 单组件打包构建，需要传入每个文件的名字
// name: 组件的名字
const buildSingle = async (name) => {
    await build({
        ...baseConfig,
        build: {
            rollOptions,
            lib: {
                entry: path.resolve(entryDir, name),

                // 打包的名字
                name: `index`,

                fileName: `index`,

                // 输出格式
                formats: ['es', 'umd']
            },
            outDir: path.resolve(outDir, name)
        }
    })
}

// 每个组件生成自己的package.json
// 安装：fs-extra
const createPackageJson = (name) => {
    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')
}


const buildLib = async () => {

    // 获取组件名称的数组
    const components = fs.readdirSync(entryDir).filter((name) => {
        const componentDir = path.resolve(entryDir, name)
        
        // 判断是否是目录
        const isDir = fs.lstatSync(componentDir).isDirectory()

        // 是文件夹，并且这个文件见下面包含index.ts文件
        return isDir && fs.readdirSync(componentDir).includes('index.ts')
    })

    // 循环构建
    for (const name of components) {
        await buildSingle(name)
        createPackageJson(name)
    }
}
buildLib()

npm install fs-extra --save

package.json 配置启动脚本

scripts: {
	"build:components": "node ./command/build.js"
    "lib": "build:components",
     "lib": "build:components && cp package.json"
}

npm run lib

3.发布组件库到 npm

1.创建package.json

 {
    "name": "${name}",
     "main": "index.umd.js",
     "module": "index.es.js",
     "style": "style.css",
     "types:":"index.d.ts",
     "keywords": {
		"element-plus",
	}
 }

2.创建index.d.ts

3.vitepress的搭建和使用

vitepress：新一代建站工具，文档编辑工具，适合前后端开发人员快速建站

4.部署项目在 github 和 gitte

总结：组件库全量打包和按需打包
发布组件库到 npm
vitepress的搭建和使用
部署项目在 github 和 gitte
组件库文档编写
组件库文档交互