是否存在无需配置define选项即可检测构建所用bundler的方法

架构老林

2026-8-30

零配置识别当前构建bundler实现方案

不需要手动在webpack、esbuild配置里添加define项，两种落地方式都可以直接生效：

方案1：利用包exports条件自动匹配（推荐，准确率100%）

webpack 5+、esbuild 0.14+ 原生支持package.json的exports条件解析，两个工具解析依赖时会自动命中对应自身的条件字段，完全不需要额外改配置：

在项目中新建一个独立的标识模块目录，比如src/bundler-flag

目录下创建三个文件：

src/bundler-flag/webpack.js，内容为：
```
export default 'webpack'
```
src/bundler-flag/esbuild.js，内容为：
```
export default 'esbuild'
```

src/bundler-flag/package.json，内容为：

{
  "name": "bundler-flag",
  "main": "./esbuild.js",
  "exports": {
    "webpack": "./webpack.js",
    "esbuild": "./esbuild.js",
    "default": "./esbuild.js"
  }
}

在业务代码中直接引入即可拿到当前构建所用的bundler：

import currentBundler from './bundler-flag'
console.log('current bundler:', currentBundler)

打包时两个工具会自动替换为对应文件的内容，无冗余代码，也不会出现判断失效的问题。

方案2：利用打包工具内置运行时标识判断（兼容老版本工具）

不管什么版本的webpack、esbuild，打包后的产物都会自带工具注入的运行时标识，不需要手动配置define，直接在代码顶层做判断即可，打包工具的tree-shaking机制会自动移除无效分支，不会增加产物体积：

let currentBundler = 'unknown'
// webpack 全版本自带的运行时函数标识
if (typeof __webpack_require__ === 'function') {
  currentBundler = 'webpack'
} 
// esbuild 全版本自带的运行时对象标识
else if (typeof __esbuild !== 'undefined') {
  currentBundler = 'esbuild'
}