构建者必备：Vue3组件库打包指南，一次生成esm、esm-bundle、commonjs、umd四种格式

2023-11-22 18:37:41

前言

Vue3作为前端开发领域的新宠，以其简洁高效、性能强大的特性吸引了众多开发者。为了构建出更加灵活、可复用的组件，组件库的概念应运而生。组件库的打包是构建过程中的重要环节，它决定了组件库的最终形态和适用场景。本文将详细介绍如何将Vue3组件库打包成esm、esm-bundle、commonjs、umd四种格式，帮助构建者轻松应对不同场景的需求。

准备工作

在开始打包之前，我们需要做好一些准备工作：

安装必要的工具和依赖项：首先，确保已安装好Node.js和npm/yarn。然后，根据项目需要安装webpack、rollup、babel等打包工具。
创建Vue3组件库项目：使用Vue CLI或其他脚手架工具创建新的Vue3项目。
编写Vue3组件：按照组件库的设计，编写各个组件。
配置打包工具：根据项目需求，配置webpack、rollup等打包工具。

打包过程

在准备工作完成后，就可以开始打包组件库了。以下我们将详细介绍如何使用webpack和rollup进行打包。

使用webpack打包

安装webpack及其依赖项：使用npm或yarn安装webpack及其依赖项。
配置webpack：在项目根目录下创建webpack.config.js文件，用于配置webpack的打包规则。
打包组件库：使用webpack命令打包组件库。

webpack --config webpack.config.js

生成不同格式的包：webpack可以通过配置不同的输出选项来生成不同格式的包。

webpack --config webpack.config.js --output-filename [name].esm.js --output-library [libraryName] --library-target esm
webpack --config webpack.config.js --output-filename [name].esm-bundle.js --output-library [libraryName] --library-target esm-bundle
webpack --config webpack.config.js --output-filename [name].commonjs.js --output-library [libraryName] --library-target commonjs
webpack --config webpack.config.js --output-filename [name].umd.js --output-library [libraryName] --library-target umd --umd-named-define

使用rollup打包

安装rollup及其依赖项：使用npm或yarn安装rollup及其依赖项。
配置rollup：在项目根目录下创建rollup.config.js文件，用于配置rollup的打包规则。
打包组件库：使用rollup命令打包组件库。

rollup -c rollup.config.js

生成不同格式的包：rollup可以通过配置不同的输出选项来生成不同格式的包。

rollup -c rollup.config.js -o [name].esm.js --format esm
rollup -c rollup.config.js -o [name].esm-bundle.js --format esm-bundle
rollup -c rollup.config.js -o [name].commonjs.js --format cjs
rollup -c rollup.config.js -o [name].umd.js --format umd --name [libraryName]