在unbuild项目中构建IIFE格式代码的实践指南

unbuild是一个优秀的JavaScript/TypeScript构建工具，它基于Rollup提供了更简单的配置方式。本文将详细介绍如何使用unbuild构建立即调用函数表达式(IIFE)格式的代码。

IIFE格式简介

IIFE(Immediately Invoked Function Expression)是一种常见的JavaScript模块化模式，它通过将代码包裹在立即执行的函数中来实现作用域隔离。这种格式特别适合需要在浏览器环境中直接使用的库，因为它可以避免污染全局命名空间。

unbuild配置IIFE输出

在unbuild中配置IIFE输出非常简单，主要通过rollup.output选项进行设置：

import { defineBuildConfig } from 'unbuild'

export default defineBuildConfig({
  entries: [
    'src/index',
  ],
  clean: true,
  declaration: true,
  rollup: {
    output: {
      name: 'YourGlobalName', // 这里定义全局变量名
      format: 'iife'         // 指定输出格式为IIFE
    }
  }
})

输出文件处理

默认情况下，unbuild会生成.mjs后缀的文件。如果需要传统的.js后缀，可以通过构建完成后的hook来实现：

import { renameSync } from 'fs'
import { resolve } from 'path'

export default defineBuildConfig({
  // ...其他配置
  hooks: {
    'build:done': function ({ options }) {
      renameSync(
        resolve(options.outDir, 'index.mjs'), 
        resolve(options.outDir, 'index.js')
      )
    },
  },
})

实际应用场景

IIFE格式特别适合以下场景：

1. 浏览器端直接使用的工具库
2. 需要避免全局命名冲突的脚本
3. 传统网页项目中直接引入的JavaScript文件

注意事项

1. 确保为IIFE输出设置了正确的全局变量名(name选项)
2. 如果库依赖其他全局变量，需要在rollup.output中配置globals选项
3. IIFE格式不支持ES模块的静态分析特性，如tree-shaking

通过以上配置，开发者可以轻松地使用unbuild构建出兼容性良好的IIFE格式代码，满足不同环境下的使用需求。