JavaScript中花括号import与普通import的区别及适用场景

两种写法的本质区别是对应模块完全不同的导出规则，和运行环境没有本质关系，只和被导入文件的内容暴露方式有关：

不带花括号：默认导入 #

这种写法用来接收模块的默认导出值，对应模块内部用export default语法暴露的内容：

// 被导入的模块文件 different-file.js
const util = {
  formatTime: () => {},
  parseData: () => {}
}
// 一个模块最多只能有1个默认导出
export default util

默认导入有两个特点：

• 导入时的变量名可以随便自定义，不需要和导出时的变量名一致，比如你写import otherThing from 'different-file'、import myUtil from 'different-file'拿到的都是上面导出的util对象
• 不需要做名称匹配，因为一个模块只有一个默认导出值

带花括号：命名导入 #

这种写法用来接收模块的命名导出值，对应模块内部直接用export关键字暴露的、带固定名称的内容：

// 被导入的模块文件 file.js
// 一个模块可以有任意多个命名导出
export const thing = "测试变量"
export function doSomething() {
  console.log('执行方法')
}

命名导入有两个特点：

• 花括号里的名称必须和模块导出时的名称完全一致，否则会拿到undefined，如果要改导入名必须用as关键字重命名，比如import { thing as myThing } from 'file'
• 支持按需导入，你可以只引入自己需要的某几个导出值，不用把整个模块的内容都加载进来

根本不用死记规则，判断逻辑非常直接：

• 看你要引入的模块/文件是怎么写导出的：如果是export default导出的，就用不带花括号的写法；如果是export 变量/函数这种命名导出的，就用带花括号的写法
• 两种写法可以混合使用，当一个文件同时存在默认导出和命名导出时，可以这么写：

import 默认导出值, { 命名导出值1, 命名导出值2 } from '目标模块'

日常开发里根本不用刻意纠结，编辑器（比如VSCode）在你敲代码的时候会自动根据模块的导出方式补全正确的导入写法，写错了控制台也会直接抛错提示，试错成本极低。

你日常用Node.js开发的话，只需要额外注意CommonJS模块的兼容差异就行：

• 如果你的项目用的是标准ES Module规范（package.json里配置了"type": "module"），上面说的所有import规则和浏览器环境完全一致，没有特殊差异
• 如果是引入老的CommonJS规范的模块（用module.exports/require写的模块），不带花括号的默认导入拿到的就是module.exports的整体值；你也可以用带花括号的写法拿模块上的某个属性，但这本质是语法层面的解构，和ES标准的命名导入不是一回事，会有细微的行为差异，遇到老包直接看文档示例写就行。

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