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

Posted 2023-02-22

【中文标题】如何从 ES6 模块导入默认和命名

【英文标题】：How to import both default and named from an ES6 module [duplicate]

【发布时间】：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 文章。

【参考方案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 "示例文件树"（有区别）？