如何导入不同文件指定同名函数避免命名冲突且支持tree shaking

解决方法 #

方法1：导入时逐个重命名 #

你可以在导入时为同名方法单独指定别名，避免标识符冲突，这种写法天然支持tree shaking，未被使用的导出会被构建工具直接移除：

// index.ts
import { 
  doSomething as carDoSomething, 
  doSomethingElse as carDoSomethingElse, 
  doA3rdThing as carDoA3rdThing 
} from './Car'
import { 
  doSomething as userDoSomething, 
  doSomethingElse as userDoSomethingElse, 
  doA3rdThing as userDoA3rdThing 
} from './User'

// 调用示例
carDoSomething()
userDoSomething()

这种方案的缺点是导入语句会随着导出项变多变长，适合仅需要导入模块中少量方法的场景。

方法2：命名空间导入（最贴近你预期的写法） #

你期望的分组调用效果可以通过ES模块的命名空间导入实现，写法如下：

// index.ts
import * as Car from './Car'
import * as User from './User'

// 调用方式和你预期的完全一致
Car.doSomething() 
User.doSomething()

注意：这种写法是完全支持tree shaking的，webpack 4+、Rollup、Vite等主流构建工具都可以静态分析你调用了命名空间下的哪些方法，未被调用的导出会被正常摇掉。只要你不要用动态访问的写法（比如Car[变量名]()这种）影响构建工具的静态分析即可。

你提到的import { doSomething, doSomethingElse, doA3rdThing } as Car from './Car'属于尚未落地的ES提案语法，目前还没有被主流环境支持，现阶段使用命名空间导入是最优解。

内容的提问来源于stack exchange，提问作者Jacob Weisenburger