ES2022模块两种导入写法的差异及如何选择？

这两种导入方式的核心差异在于目标内容的类型，具体区分和选择建议如下：

1. 核心区别 #

• import mod from 'module'：专门导入模块的默认导出。一个模块只能有一个默认导出，对应模块里用export default声明的内容（比如export default function() {}或export default 123）。导入后mod直接指向这个默认导出的值。
• import * as mod from 'module'：导入模块的所有导出内容，包括默认导出和所有命名导出（用export直接声明的变量、函数等），并把它们打包成一个对象。其中默认导出会作为这个对象的default属性存在，其他命名导出则以原名称作为对象属性。

举个实际例子更直观：
假设模块文件module.js内容如下：

// module.js
export default function greet() { console.log('Hello!') }
export const version = '1.0.0'
export function logout() { console.log('Goodbye!') }

用第一种方式导入：

import mod from './module.js'
mod() // 直接调用默认导出的greet函数
// 此处无法访问version和logout，除非额外添加命名导入

用第二种方式导入：

import * as mod from './module.js'
mod.default() // 调用默认导出的greet
mod.version // 拿到'1.0.0'
mod.logout() // 调用logout函数

2. 写法选择建议 #

• 若仅需使用模块的默认导出内容，选import mod from 'module'，写法简洁直接。
• 若需要用到模块里多个命名导出，或想把模块所有导出封装在一个对象里（避免和当前文件变量命名冲突），选import * as mod from 'module'更合适。
• 也可以结合两种方式的优点，同时导入默认导出和指定命名导出：

  import greet, { version, logout } from './module.js'
  greet()
  console.log(version)
  logout()
  

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