Vue3组件库打包指南，一次生成esm、esm-bundle、commonjs、umd

本文是阅读Varlet 组件库源代码系列的第二篇文章。阅读本文，了解如何将Vue3 组件库打包成不同的格式。

上一篇文章提到，组件库是在启动服务之前打包的。运行的命令是：

varlet-cli编译显然是varlet-cli提供的命令。

处理函数编译完毕现在让我们仔细看看这个函数做了什么。

//varlet-cli/src/commands/compile.tsexport async functioncompile(cmd: { noUmd: boolean }) { process.env.NODE_ENV='compile'等待RemoveDir() //.}//varlet-cli/src /命令/compile.tsexport function deleteDir() { //ES_DIR: varlet-ui/es //LIB_DIR: varlet-ui/lib //HL_DIR: varlet-ui/highlight //UMD_DIR: varlet-ui/umd 返回Promise。 all([remove(ES_DIR),remove(LIB_DIR),remove(HL_DIR),remove(UMD_DIR)])} 首先设置当前环境变量，然后清除关联的输出目录。

//varlet-cli/src/commands/compile.tsexport async function apply(cmd: { noUmd: boolean }) { //. process.env.TARGET_MODULE='module' wait runTask('module',compileModule) process.env .TARGET_MODULE='esm-bundle'等待runTask('esm Bundle', ()=compileModule('esm-bundle')) process.env.TARGET_MODULE='commonjs'等待runTask('commonjs', ()=compileModule(' commonjs')) process.env.TARGET_MODULE='umd' !cmd.noUmd(await runTask('umd', ()=compileModule('umd')))} 接下来依次打包四个产品，运行这个方法都是同一个compileModule，后面我们会详细分析。

组件基础配置：以Button组件为例，回顾一下打包前的组件结构。

典型的组件由四个主要文件组成。

.less: style.vue: 组件index.ts: 组件导出，组件注册方法提供props.ts: 组件props定义

对于样式部分，Varlet 使用less 语言。如果样式数量比较少，样式直接内联写入Vue单文件样式块中。否则，将创建一个单独的样式文件（例如，button.less）。每个组件不仅介绍了自己，还介绍了一些基本样式以及除了样式之外其他组件的样式。

Index.ts文件用于导出组件并提供组件的注册方法。

props.ts 文件用于声明组件的props 类型。

有些组件使用.tsx 而不是.vue，有些组件包含其他文件。例如，某些组件还有一个Provide.ts 文件，用于将数据注入到后代组件中。

首先，让我们从高层次看一下整个包装过程。主要功能是compileModule。

//varlet-cli/src/compiler/compileModule.tsexport 异步函数compileModule(modules: 'umd' | 'commonjs' | 'esm-bundle' | boolean=false) { if (modules==='umd') { //打包umd格式await CombiUMD() return } if (modules==='esm-bundle') { //打包esm-bundle格式await CombiESSMBundle() return } //打包commonjs和模块格式//打包过程前设置环境变量.env.BABEL_MODULE=module==='commonjs' 'commonjs' : 'module' //输出目录//ES_DIR: varlet-ui/es //LIB_DIR: varlet-ui/lib const dest=module===' commonjs ' LIB_DIR : ES_DIR //SRC_DIR：varlet-ui/src，直接将组件源代码目录复制到输出目录wait copy(SRC_DIR, dest) //读取输出目录const moduleDir: string[]=wait readdir(dest) ) //遍历并打包各个组件await Promise.all( //遍历各个组件的目录moduleDir.map((filename: string)={ const file: string=solve(dest, filename ) if (isDir(file)) { //在每个组件目录下新建两个样式入口文件EnsureFileSync(resolve(file, './style/index.js')) EnsureFileSync(resolve(file, './style/less.js')) } //打包该组件return isDir(file)compileDir(file) : null }) ) //遍历varlet-ui/src/目录并删除所有现有的['index.vue', 'index.tsx', 'index.ts', 'index .jsx', 'index.js'] 这些文件之一的目录const publicDirs=wait getPublicDirs() //整体等待(modules==='commonjs'compileCommonJSEntry(dest, publicDirs) : applyESEntry(dest, publicDirs ) )} umd 和esm-bundle 格式都遵循Vite 提供的打包方式，将所有内容打包到一个文件中。 commonjs 和module 分别封装各个组件，并不将所有组件的内容打包在一起。 Vite不提供此功能，需要您自行处理。具体操作如下：

首先将组件源代码目录varlet/src/下的所有组件文件复制到对应的输出目录下，然后检查输出目录内的各个组件目录： 创建两种样式的导出文件，删除不需要的目录和文件（test、例如，文档）。 分别编译Vue单文件、ts文件、less文件。一旦所有打包完成，它会遍历所有组件并动态生成整个导出文件。以compileESEntry方法为例，查看整个导出文件的生成。

//varlet-cli/src/compiler/compileScript.tsexport 异步函数compileESEntry(dir: string, publicDirs: string[]) { const import: string[]=[] constplugins: string[]=[] const constInternalComponents: string[]=[] const cssImports: string[]=[] constlessImports: string[]=[] const publicComponents: string[]=[] //遍历组件目录名称publicDirs.forEach((dirname: string)={ //驼峰连字符转换const publicComponent=bigCamelize(dirname ) //收集组件名称publicComponents.push(publicComponent) //收集组件导入语句imports.push(`import ${publicComponent}, * as ${publicComponent}Module from ' ./${dirname}'` ) //收集内部组件的import 语句constInternalComponents.push( `export const _${publicComponent}Component=${publicComponent}Module._${publicComponent}Component || {} ` ) //收集插件注册语句plugins Push(` ${publicComponent }.install app.use(${publicComponent})`) //收集样式导入语句cssImports.push(`import './${dirname}/style'`)lessImports.push(`import './${dirname }/style/less'`) }) //拼接组件注册方法const install=`function install(app) { ${plugins.join('\n ')}}` //注意拼接导出入口Index. js 文件不包含任何样式constindexTemplate=`\${imports.join( '\n')}\n${constInternalComponents.join('\n')}\n${install} import { install, ${publicComponents .join(',\n ')}}export default { install, $ {publicComponents.join(',\n ')}}` //合并css import 语句const styleTemplate=`\$ { cssImports.join(' \n')}` //合并umdIndex.js 文件Masu.该文件稍后将在打包umd 和esm-bundle 格式时用作打包入口。请注意const umdTemplate=`\ ${ 。 import.join('\n')}\n${cssImports.join('\n')}\n${install}export { install, ${publicComponents.join(',\n ')}} 默认导出{ install, ${publicComponents.join(',\n ')}}` //不合并import 语句constlessTemplate=`\${lessImports.join('\n')}` //合并内容对应文件await Promise.all([ writeFile(resolve(dir, 'index.js'), IndexTemplate, 'utf-8'), writeFile(resolve(dir, 'umdIndex.js'), umdTemplate, 'utf - 8' ), writeFile (resolve(dir, 'style.js'), styleTemplate, 'utf-8'), writeFile(resolve(dir, 'less.js'), lessTemplate, 'utf-8'), ] ) }打包模块和commonjs格式，打包成umd和esm-bundle格式依赖于模块格式打包产品，而打包成module和commonjs格式是同一套逻辑，所以我们先看一下如何打包。将其转换为两种格式。这两种格式分别对每个组件进行打包，生成单独的入口和样式文件，然后生成统一的导出入口。它不会将所有组件的内容打包到同一个文件中，从而更容易按需部署和删除。删除不必要的内容并减小文件大小。为每个组件封装compileDir方法。

//varlet-cli/src/compiler/compileModule.tsexport async function applyDir(dir: string) { //读取组件目录const dirs=wait readdir(dir) //遍历组件目录下的文件wait Promise.all( dirs .map((filename)={ const file=solve(dir, filename) //删除组件目录下的__test__、example、docs 目录； [TESTS_DIR_NAME, EXAMPLE_DIR_NAME, DOCS_DIR_NAME].includes( filename) RemoveSync(file) ) //对于.d.ts 文件或样式目录（为样式入口文件预先创建的目录），返回if (isDTS(file) || filename===STYLE_DIR_NAME) { return Promise.resolve() } //编译文件return CombiFile(file) }) )} 删除不需要的目录，然后对需要编译的文件调用compileFile 方法。

//varlet-cli/src/compiler/compileModule.tsexport async functioncompileFile(file: string) { isSFC(file) (await compiSFC(file))//编译vue文件isScript(file) (await cancelScriptFile(file))//编译js file isLess(file) (await compiLess(file))//编译less file isDir(file) (await compiDir(file))//对目录进行递归} 分别处理3种类型的文件我们来处理一下，请看一下一。

编译Vue 单文件//varlet-cli/src/compiler/compileSFC.tsimport { parse } from '@vue/compiler-sfc'export async functioncompileSFC(sfc: string) { //读取Vue 单文件的内容constsources: string=wait readFile(sfc, 'utf-8') //使用@vue/compiler-sfc包解析单个文件const {descriptor }=parse(sources, { sourceMap: false }) //提取单个文件的各个部分const { script , scriptSetup, template,styles }=descriptor //Varlet 暂时不支持setup 语法if (scriptSetup) { logger.warning( `\n Varlet Cli 不支持编译脚本setup 语法\\n ${sfc}` ) return } //.} 使用@vue/compiler-sfc 包解析Vue 单个文件。 parse 方法可以解析单个Vue 文件中的每个块。对于每个块，@vue/compiler-sfc 包都提供了相应的块。稍后我们将解释如何编译它。

//varlet-cli/src/compiler/compileSFC.tsimport hash from 'hash-sum'export async functioncompileSFC(sfc: string) { //. //Scoped //检查是否存在作用域样式块const hasScope=style .some((style)=style.scoped) //哈希单个文件的内容以生成ID const id=hash(sources) //生成stylescopeId constscopeId=hasScope ` data-v-${id } ` : '' //.} 这一步主要是检查样式块是否有作用域块。如果存在，则会生成范围ID 作为CSS 范围，以防止与其他样式发生冲突。您必须使用使这两个ID 相关的编译方法。

//varlet-cli/src/compiler/compileSFC.tsimport { COMPILETemplate } from '@vue/compiler-sfc' 导出异步函数COMPILESFC(sfc: string) { //. if (script) { //template //编译模板是渲染函数const render=template COMPILETemplate({ id, source: template.content, filename: sfc, COMPILEROptions: {scopeId, },}) //插入渲染函数let { content }=script if (render) { const { code }=render content=jectRender(content, code) } //. }}使用@vue/compiler-sfc包的compileTemplate方法将解析后的模板部分编译为渲染函数，并使用injectRender方法调用。将渲染函数插入到脚本中。

//varlet-cli/src/compiler/compileSFC.tsconst NORMAL_EXPORT_START_RE=/export\s+default\s+{/const DEFINE_EXPORT_START_RE=/export\s+default\s+defineComponent\s*\(\s*{/导出函数) insertRender(script: string, render: string): string { if (DEFINE_EXPORT_START_RE.test(script.trim())) { return script.trim().replace( DEFINE_EXPORT_START_RE, `${render}\nexport 默认DefineComponent({ render, \ ` ) } if (NORMAL_EXPORT_START_RE.test(script.trim())) { return script.trim().replace( NORMAL_EXPORT_START_RE, `${render}\nexport default { render,\ ` ) } return script}看一个兼容的小例子。例如生成的渲染函数为：

import function render(_ctx, _cache) { //.}脚本内容如下：

exportdefaultdefineComponent({ name: 'VarButton', //.}) 插入渲染后，脚本应如下所示：

export function render(_ctx, _cache) { //.}exportdefaultdefineComponent({ render, name: 'VarButton', ///.}) 实际上将render 函数的内容与脚本的内容合并。 script实际上是组件的一个选项对象，因此组件的绘图功能也被添加到组件对象中。接下来，运行compileSFC 方法。

//varlet-cli/src/compiler/compileSFC.tsimport {compileStyle } from '@vue/compiler-sfc'导出异步函数compileSFC(sfc: string) { //. if (script) { //.//script //编译js等待cancelScript(content, sfc) //style //编译样式(letindex=0;indexstyles.length;index++) { const style: SFCStyleBlock=styles[index] //replaceExt方法指定一个文件名，如xxx.vue，并使用第二个参数来替换文件扩展名。例如，处理后返回xxxSfc.less const file=ReplaceExt(sfc, `Sfc${index ||)。 ''}.${style.lang || 'css'}`) //编译样式块let { code }=applyStyle({ source: style.content, filename: file, id:scopeId,scoped: style.scoped, }) //去掉样式中的import语句code=extractStyleDependency(file, code, STYLE_IMPORT_RE, style.lang as 'css' | 'less', true) //将解析后的样式写入文件writeFileSync(file, clearEmptyLine( code), ' utf-8') //对于样式，该块采用less 语言，因此它也会被编译成css 文件。 style.lang==='less' (await COMPILELEss(file)) } }} compi 被调用。