umd和esm-bundle两种格式都会把所有内容都打包到一个文件，用的是Vite提供的方法进行打包。sci拜客生活常识网

commonjs和module是单独打包每个组件，不会把所有组件的内容都打包到一起，Vite没有提供这个能力，所以需要自行处理，具体操作为：sci拜客生活常识网

• 先把组件源码目录varlet/src/下的所有组件文件都复制到对应的输出目录下；
• 然后在输出目录遍历每个组件目录： 创建两个样式的导出文件；删除不需要的目录、文件（测试、示例、文档）；分别编译Vue单文件、ts文件、less文件；
• 全部打包完成后，遍历所有组件，动态生成整体的导出文件；

以compileESEntry方法为例看一下整体导出文件的生成：sci拜客生活常识网

// varlet-cli/src/compiler/compileScript.ts
export async function compileESEntry(dir: string, publicDirs: string[]) {
  const imports: string[] = []
  const plugins: string[] = []
  const constInternalComponents: string[] = []
  const cssImports: string[] = []
  const lessImports: string[] = []
  const publicComponents: string[] = []
  // 遍历组件目录名称
  publicDirs.forEach((dirname: string) => {
    // 连字符转驼峰式
    const publicComponent = bigCamelize(dirname)
 // 收集组件名称
    publicComponents.push(publicComponent)
    // 收集组件导入语句
    imports.push(`import ${publicComponent}, * as ${publicComponent}Module from './${dirname}'`)
    // 收集内部组件导入语句
    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('
  ')}
}
`

  // 拼接导出入口index.js文件的内容，注意它是不包含样式的
  const indexTemplate = `
${imports.join('
')}

${constInternalComponents.join('
')}

${install}
export {
  install,
  ${publicComponents.join(',
  ')}
}

export default {
  install,
  ${publicComponents.join(',
  ')}
}
`
  
  // 拼接css导入语句
  const styleTemplate = `
${cssImports.join('
')}
`

  // 拼接umdIndex.js文件，这个文件是用于后续打包umd和esm-bundle格式时作为打包入口，注意它是包含样式导入语句的
  const umdTemplate = `
${imports.join('
')}

${cssImports.join('
')}

${install}
export {
  install,
  ${publicComponents.join(',
  ')}
}

export default {
  install,
  ${publicComponents.join(',
  ')}
}
`

  // 拼接less导入语句
  const lessTemplate = `
${lessImports.join('
')}
`
  // 将拼接的内容写入到对应文件
  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'),
  ])
}

打包成module和commonjs格式

打包成umd和esm-bundle两种格式依赖module格式的打包产物，而打包成module和commonjs两种格式是同一套逻辑，所以我们先来看看是如何打包成这两种格式的。sci拜客生活常识网

这两种格式就是单独打包每个组件，生成单独的入口文件和样式文件，然后再生成一个统一的导出入口，不会把所有组件的内容都打包到同一个文件，方便按需引入，去除不需要的内容，减少文件体积。sci拜客生活常识网

打包每个组件的compileDir方法：sci拜客生活常识网

// varlet-cli/src/compiler/compileModule.ts
export async function compileDir(dir: string) {
  // 读取组件目录
  const dirs = await readdir(dir)
  // 遍历组件目录下的文件
  await Promise.all(
    dirs.map((filename) => {
      const file = resolve(dir, filename)
      // 删除组件目录下的__test__目录、example目录、docs目录
      ;[TESTS_DIR_NAME, EXAMPLE_DIR_NAME, DOCS_DIR_NAME].includes(filename) && removeSync(file)
   // 如果是.d.ts文件或者是style目录（前面为样式入口文件创建的目录）直接返回
      if (isDTS(file) || filename === STYLE_DIR_NAME) {
        return Promise.resolve()
      }
   // 编译文件
      return compileFile(file)
    })
  )
}