如何从 ES6 模块导入默认和命名答案

【问题标题】：How to import both default and named from an ES6 module [duplicate]如何从 ES6 模块导入默认和命名
【发布时间】：2020-01-03 11:43:30
【问题描述】：

从 ES6 JavaScript 模块导入 default 和命名资源的正确语法是什么？

例子：

export const defaultBrowser = 'Chrome';

export default [
  { value: 0, label: defaultBrowser },
  { value: 1, label: 'Firefox' },
  { value: 2, label: 'Safari' },
  { value: 3, label: 'Edge' },
];

import 怎么会一口气搞定？

它不是 When should I use curly braces for ES6 import? 的重复，它更具体，要求单个 import 用例，而不是 import 文章。

【问题讨论】：

标签： javascript node.js ecmascript-6

【解决方案1】：

从 ES6 模块导入 default 和命名导出的正确语法是传递 default 名称（任何人想要的），以及用逗号分隔的命名非默认模块：

示例：index.js

import browsers, { otherValue } from './browsers';

在示例文件树中：

.
└── src
    ├── browsers.js
    └── index.js

现实生活中经常遇到的例子：

import React, { useState, useEffect } from 'react';

【讨论】：

请不要称之为解构。
好的 - 这个的正确命名是什么？
这只是一个命名导入。（您可以使用as 别名，而不是像在对象解构中那样使用:，并且您也不能解构为嵌套目标）
import defaultVar, { namedVar1, namedVar2 } from './your-file';（适用于对答案中的变量命名感到困惑的任何人）
"exemplary文件树" or "示例文件树"（有区别）？