`export Module from "module"` 是有效的 JavaScript 语法吗？答案

【问题标题】：Is `export Module from "module"` a valid JavaScript syntax?`export Module from "module"` 是有效的 JavaScript 语法吗？
【发布时间】：2019-12-26 02:08:25
【问题描述】：

问题

在我公司的 React Native 项目中，我遇到了这样的代码，它聚合了来自多个模块的导出：

export Icon from "./Icon";
export Input from "./Input";
export Pills from "./Pills";

我的编辑器将此突出显示为无效语法。我检查了MDN docs on export，确实他们没有列出这样的聚合语法。从他们列出的内容看来，正确的应该是：

export { default as Icon } from "./Icon";
export { default as Input } from "./Input";
export { default as Pills } from "./Pills";

但是第一个代码在我所在的 React Native 项目中有效。

问题

这是 JavaScript 中的有效语法，还是只有我们在项目中使用的某些第三方包可用？

【问题讨论】：

你试过了吗？从“./Icon”导出{图标}；
@sagar 该语法要求模块命名为 export Icon，而帖子中的代码导出的是 default 导出，而不是命名的。
您只能使用 default 关键字导出默认导出，并在大括号中使用它们的名称或使用 * 来导出 ES6 中的所有命名导出。否则，从语法上讲就是错误的。

标签： javascript es6-modules

【解决方案1】：

你是对的，但你并不是真的在使用 ES6 模块。

你正在使用 babel，metro-react-native-babel-preset。这使得上述语法有效。

与往常一样，有一个 proposal 使其成为语言的一部分，但它目前处于第一阶段。

来自提案：

建议的添加遵循相同的对称模式：

导入“默认”名称（现有）：

import v from "mod";

导出该名称（现有）：

import v from "mod"; export {v};

对称“导出自”（建议）：

export v from "mod";

【讨论】：

【解决方案2】：

在 ES6 和 Javascript 的上下文中。语法反应本机方法将无效。然而，正如@federkun 所建议的那样，它在 babel 的上下文中是有效的，并且已经在同一张桌面上提出了建议。但是，“default”用于导出可以再次导出的默认导出

export {default} from '.\example.js'

或者您可以在花括号中使用名称导出来仅导出命名导出。此外，要导出所有命名的导出，您可以使用“*”

export * from '.\example.js'
export {test} from '.\example.js'

或者你可以添加 babel 依赖来使用相同的语法。

【讨论】：