如何将条件式静态require导出转为等效的ES6 Export语法？

我在React等项目里见过用require()实现的条件式重导出，代码如下：

// index.js

if (process.env.NODE_ENV === 'production') {
  exports = require('./cjs/react.production.min.js')
} else {
  exports = require('./cjs/react.development.js')
}

我想把它转成合法的ES6语法，同时保留支持树摇优化的独立导出成员。

我试过下面的写法，能运行但没法单独导入成员：

import * as prod from './cjs/react.production.min.js'
import * as dev from './cjs/react.development.js'

let exports = {}

if (process.env.NODE_ENV === 'production') {
  exports = prod
} else {
  exports = dev
}

export default exports

有没有和原写法等效的合法ES6语法？

我猜想如果编译器足够智能，能在构建时把嵌套模块的键提升到顶层，可以这么写：

import { value_1 as prod_value_1 } from './cjs/react.production.min.js'
import { value_1 as dev_value_1 } from './cjs/react.development.js'

let value_1 = undefined

if (process.env.NODE_ENV === 'production') {
  value_1 = prod_value_1
} else {
  value_1 = dev_value_1
}

export { value_1 /* value_2, etc */ }

更新：
还有一种更简洁但仍需明确导出键名的写法：

import * as prod from './cjs/react.production.min.js'
import * as dev from './cjs/react.development.js'

let selected = undefined

if (process.env.NODE_ENV === 'production') {
  selected = prod
} else {
  selected = dev
}

export const { value_1, value_2, etc } = selected

解决方案 #

要实现和原CommonJS写法等效且支持树摇的ES6语法，核心是让导出的成员处于顶层作用域——树摇工具（如Terser、Rollup）依赖顶层静态导出分析。以下是几种可行方案：

1. 构建时静态条件导出

如果使用Webpack、Vite等支持环境变量替换的构建工具，可直接写静态条件判断，构建阶段会自动剔除无用分支：

// 构建工具会根据NODE_ENV只保留对应分支的导出
if (process.env.NODE_ENV === 'production') {
  export * from './cjs/react.production.min.js'
} else {
  export * from './cjs/react.development.js'
}

注意：原生ES模块环境下这种写法会报错，但构建工具会在编译阶段处理条件，最终输出合法代码。

2. 显式逐个导出成员（兼容原生+树摇）

如果需要兼容原生ES模块环境，必须显式列出所有要导出的成员，可简化为：

import * as prod from './cjs/react.production.min.js'
import * as dev from './cjs/react.development.js'

const isProd = process.env.NODE_ENV === 'production'

// 每个导出成员都处于顶层，树摇工具可正常识别
export const value_1 = isProd ? prod.value_1 : dev.value_1
export const value_2 = isProd ? prod.value_2 : dev.value_2
// ... 其他需要导出的成员

这种写法完全符合ES模块规范，且所有导出成员都是静态可分析的。

3. 利用构建工具别名配置

更简洁的方式是在构建配置中设置别名，根据环境自动指向不同文件：

• Webpack配置示例：

// webpack.config.js
module.exports = {
  resolve: {
    alias: {
      './cjs/react': process.env.NODE_ENV === 'production' 
        ? './cjs/react.production.min.js' 
        : './cjs/react.development.js'
    }
  }
}

然后在index.js中直接导出：

export * from './cjs/react'

这种方式无需在代码中写条件，构建时自动替换目标文件，既符合ES规范又支持树摇。

内容的提问来源于stack exchange，提问作者David Alsh