从0搭建Vue3组件库:使用gulp自动化处理打包与发布-阿里云开发者社区

前言

这一篇文章我们将实现组件库打包与发布的自动化，将我们从繁琐的打包和发布流程中解救出来(如：打包前要删除打包文件，发布前要增加版本号、修改package.json、每个包都要执行打包命令等等等等)。同时我们的组件样式的打包也将采用gulp流程化控制。如果你不太了解gulp，你可以先花十分钟时间看下前端自动化工具gulp急速入门这篇文章。如果你对vue3组件库开发感兴趣的话，你也可以先阅读前置文章使用Vite和TypeScript带你从零打造一个属于自己的Vue3组件库。当然你也可以直接阅读本篇文章，每一步我都会有详细的解释说明。相信看完这篇文章你就会发现使用gulp自动化流程带来的魅力。

我们要用gulp做什么？

我们要用gulp处理我们的打包流程和发布流程，如下图所示

让gulp支持ts和es6

我们需要使用ts以及新的es6语法，而gulp是不支持的，所以我们需要安装一些依赖使得gulp支持这些

gulp
@types/gulp gulp的ts声明文件
sucras 让我们执行gulp可以使用最新语法并且支持ts

pnpm i gulp @types/gulp sucrase -D -w

测试gulp

我们在根目录的package.json添加打包组件库脚本命令

...
 "scripts": {
    "build:kitty": "gulp -f packages/components/script/build/gulpfile.ts"
  }
...

根目录执行npm run build:kittygulp去执行packages/components/script/build/gulpfile.ts，所以在packages/components下新建gulpfile.ts并写个测试的脚本，看下我们的gulp是否生效

export default () => {
    console.log('任务完成')
    return Promise.resolve()
}

然后我们执行npm run build:kitty就会发现gulpfile.ts被执行了

接下来我们就可以使用gulp来实现我们的自动化流程了

删除dist文件夹

在打包之前我们首先是要删除我们上一次打包留下的dist文件的.我们通常删除一个文件夹只需要在cmd中输入rm -rf xxx即可，所以说我们需要写一个执行脚本命令的任务，而Node.js的子进程 child_process模块下有一 spawn 函数，可以用于调用系统上的命令。所以我们可以利用它来实现这个任务函数。因为我们是在项目根目录下执行的，所以在实现这个函数前我们还需要维护一些路径信息。

script下新建utils/paths.ts，以后的路径信息都放在这

import { resolve } from 'path'
//组件库根目录
export const componentPath = resolve(__dirname, '../../')
script/build/gulpfile.ts

import { spawn } from 'child_process'
import { series } from 'gulp'
import { componentPath } from '../utils/paths'
console.log(componentPath);
const run = async (command: string) => {
    //cmd表示命令，args代表参数，如 rm -rf  rm就是命令，-rf就为参数
    const [cmd, ...args] = command.split(' ')
    return new Promise((resolve, reject) => {
        const app = spawn(cmd, args, {
            cwd: componentPath,//执行命令的路径
            stdio: 'inherit', //输出共享给父进程
            shell: true
        })
        //执行完毕关闭并resolve
        app.on('close', resolve)
    })
}
export default series(async () => run(`rm -rf ${componentPath}/dist`))

因为我们还没有打包所以组件库目录下还没有dist文件夹，所以我们先暂时新建个dist文件夹模拟一下，我们的目录结构如下

然后在根目录下执行pnpm run build:kitty我们就会发现dist目录被删除了,此时我们的删除dist命令便完成了

注意

如果你的vscode终端没有配置git base是无法执行rm -rf这种命令的，所以你需要给你的vscode终端配置git base,配置方法如图示：

"terminal.integrated.profiles.windows": {
    "bash": {
      "path": "D:\\Git\\bin\\bash.exe", // 找到自己git安装目录所在xxx\bash.exe
      "args": []
    }
  }

打包流程控制

接下来我们开始我们的组件库打包流程控制，打包组件库我们分为打包组件和打包样式两部分

处理样式

处理样式之前我们要安装一些依赖

pnpm i gulp-less @types/gulp-less gulp-autoprefixer @types/gulp-autoprefixer -D -w

其中gulp-less是gulp中处理less的插件，gulp-autoprefixer是为css加前缀的的插件。@types/xxx则是它们的声明文件

然后写一个处理样式的任务buildStyle

//script/build/gulpfile.ts
import { spawn } from 'child_process'
import { series, src, dest, task } from 'gulp'
import { componentPath } from '../utils/paths'
import less from "gulp-less"
import autoprefixer from 'gulp-autoprefixer'
const run = async (command: string) => {
    //cmd表示命令，args代表参数，如 rm -rf  rm就是命令，-rf就为参数
    const [cmd, ...args] = command.split(' ')
    return new Promise((resolve, reject) => {
        const app = spawn(cmd, args, {
            cwd: componentPath,//目录指的是组件库根目录
            stdio: 'inherit', //输出共享给父进程
            shell: true //mac不需要开启，windows下git base需要开启支持
        })
        //执行完毕关闭并resolve
        app.on('close', resolve)
    })
}
//处理样式
const buildStyle = () => {
    return src(`${componentPath}/src/**/style/**.less`)
        .pipe(less())
        .pipe(
            autoprefixer()
        )
        .pipe(dest(`${componentPath}/dist/lib/src`))
        .pipe(dest(`${componentPath}/dist/es/src`));
};
export default series(async () => run(`rm -rf ${componentPath}/dist`), async () => buildStyle())

我们会发现gulp处理方式是以流的方式一层一层往下走，最后走到我们打包后的目录下。

然后我们根目录执行pnpm run build:kitty,就会发现样式被打包进了dist文件中

控制台输出如下

dist文件如下

组件打包

接下来就是组件的打包，详细的流程可以参考使用Vite和TypeScript带你从零打造一个属于自己的Vue3组件库,这里对原来的components/vite.config.ts做一个条调整

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue"
import dts from 'vite-plugin-dts'
import { resolve } from 'path'
export default defineConfig(
    {
        build: {
            target: 'modules',
            //打包文件目录
            outDir: "es",
            //压缩
            minify: true,
            //css分离
            //cssCodeSplit: true,
            rollupOptions: {
                //忽略打包vue文件
                external: ['vue', /\.less/],
                input: ['src/index.ts'],
                output: [
                    {
                        format: 'es',
                        //不用打包成.es.js,这里我们想把它打包成.js
                        entryFileNames: '[name].js',
                        //让打包目录和我们目录对应
                        preserveModules: true,
                        //配置打包根目录
                        dir: resolve(__dirname, './dist/es'),
                        preserveModulesRoot: 'dist'
                    },
                    {
                        format: 'cjs',
                        //不用打包成.mjs
                        entryFileNames: '[name].js',
                        //让打包目录和我们目录对应
                        preserveModules: true,
                        //配置打包根目录
                        dir: resolve(__dirname, './dist/lib'),
                        preserveModulesRoot: 'src'
                    }
                ]
            },
            lib: {
                entry: './index.ts',
                formats: ['es', 'cjs']
            }
        },
        plugins: [
            vue(),
            dts({
                outputDir: resolve(__dirname, './dist/es/src'),
                //指定使用的tsconfig.json为我们整个项目根目录下掉,如果不配置,你也可以在components下新建tsconfig.json
                tsConfigFilePath: '../../tsconfig.json'
            }),
            //因为这个插件默认打包到es下，我们想让lib目录下也生成声明文件需要再配置一个
            dts({
                outputDir: resolve(__dirname, './dist/lib/src'),
                tsConfigFilePath: '../../tsconfig.json'
            }),
            {
                name: 'style',
                generateBundle(config, bundle) {
                    //这里可以获取打包后的文件目录以及代码code
                    const keys = Object.keys(bundle)
                    for (const key of keys) {
                        const bundler: any = bundle[key as any]
                        //rollup内置方法,将所有输出文件code中的.less换成.css,因为我们当时没有打包less文件
                        this.emitFile({
                            type: 'asset',
                            fileName: key,//文件名名不变
                            source: bundler.code.replace(/\.less/g, '.css')
                        })
                    }
                }
            }
        ],
        resolve: {
            alias: {
                '@': resolve(__dirname, 'src'),
            },
        }
    }
)

主要将原来的打包路径以及声明文件路径指向了dist目录下。

然后我们写个打包组件函数buildComponent

//打包组件
const buildComponent = async () => {
    await run(`cd ${componentPath}`)
    run('pnpm run build')
}

其实步骤很简单，就是在组件库根目录(packages/componmets/)执行pnpm run build,所以components/package.json的脚本命令改为

"scripts": {
    "build": "vite build"
  }

由于我们打包组件和打包样式是互不影响的，所以这两部分可以并行执行parallel,此时我们的gulpfile.ts可以这样写

import { series, src, dest, parallel } from 'gulp'
...
//打包组件
const buildComponent = async () => {
    await run(`cd ${componentPath}`)
    run('pnpm run build')
}
export default series(
    async () => run(`rm -rf ${componentPath}/dist`),
    parallel(
        async () => buildStyle(),
        async () => buildComponent()
    )
)

根目录执行pnpm run build:kitty便可完成我们的组件与样式的打包,打包后的目录如图所示

发布流程

接下来我们要做的就是发布了，因为我们需要在dist下进行发布，所以我们要做的就是先往dist下塞一个用于发布的package.json,这个package.json我们要在组件库下新建个中转的package.json复制到dist下。

在components下新建transitpkg/package.json

{
  "name": "kitty-ui",
  "version": "1.0.0",
  "main": "lib/index.js",
  "module": "es/index.js",
  "files": ["es", "lib"],
  "keywords": ["kitty-ui", "vue3组件库"],
  "author": "小月",
  "license": "MIT",
  "description": "",
  "typings": "lib/index.d.ts"
}

根目录下package.json新增命令pnpm run publish:kitty

"scripts": {
    "build:kitty": "gulp -f packages/components/script/build/gulpfile.ts",
    "publish:kitty": "gulp -f packages/components/script/publish/gulpfile.ts"
  }

同样的我们新建packages/components/script/publish/gulpfile.ts，（相关注释写在代码中）

import { spawn } from 'child_process'
import { series, src, dest } from 'gulp'
import { componentPath } from '../utils/paths'
const run = async (command: string, path: string) => {
    //cmd表示命令，args代表参数，如 rm -rf  rm就是命令，-rf就为参数
    const [cmd, ...args] = command.split(' ')
    return new Promise((resolve, reject) => {
        const app = spawn(cmd, args, {
            cwd: path,//执行命令的路径
            stdio: 'inherit', //输出共享给父进程
            shell: true //mac不需要开启，windows下git base需要开启支持
        })
        //执行完毕关闭并resolve
        app.on('close', resolve)
    })
}
//复制
const copypackage = async () => {
    return src(`${componentPath}/transitpkg/**`).pipe(dest(`${componentPath}/dist/`));
};
//发布任务
const publish = async () => {
    //先给transitpkg升个版本
    await run('pnpm version patch', `${componentPath}/transitpkg`)
    //复制到dist目录
    await copypackage()
    //在dist下执行发布命令
    await run('npm publish', `${componentPath}/dist`)
    // run('pnpm publish')
}
export default series(
    async () => publish()
)

最后我们执行pnpm run publish:kitty便可发布我们的组件库。其实这里的一些方法可以提取到utils中，gulp的任务函数也可以写到其它地方，gulpfile.ts只作为一个集中执行的地方。具体目录如下

相关代码可以到 kittyui 查看。

到这里我们的组件库已经可以自动打包和发布了

直接使用

拉取kittyui

git clone https://gitee.com/geeksdidi/kittyui.git

安装pnpm

npm i pnpm -g

安装esno

npm i esno -g

安装项目所有依赖

pnpm install

打包组件库

pnpm run build:kitty

发布组件库

发布前记得到components/transitpkg/package.json下改个包名(不然肯定会重名，因为我已经发布过了)

pnpm run publish:kitty

从0搭建Vue3组件库:使用gulp自动化处理打包与发布

前言

我们要用gulp做什么？

让gulp支持ts和es6

测试gulp

删除dist文件夹

打包流程控制

处理样式

组件打包

发布流程

直接使用

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

从0搭建Vue3组件库:使用gulp自动化处理打包与发布

前言

我们要用gulp做什么？

让gulp支持ts和es6

测试gulp

删除dist文件夹

打包流程控制

处理样式

组件打包

发布流程

直接使用

热门文章

最新文章

相关课程

相关电子书

相关实验场景