ES6，如何在一行中导出已导入的模块？

Question

如果可能的话，我希望将以下内容在一行内完成：

• import Module from './Module/Module;'
• export Module;

我尝试了以下方式，但似乎不起作用：

• export Module from './Module/Module;

- Detuned

---

请参阅ES5中module.exports = require('./inner.js')的ES6单行模拟是否存在？和ES6中export { foo as default }是否有效？ - Bergi

Answer 1

export {default as Module} from './Module/Module';

只要您不需要在导出模块内部也使用Module，那么这是标准的ES6方式。

export Module from './Module/Module';

这是一种建议的 ESnext 实现方式，但目前只有在 Babel 中启用了它才能生效。

- loganfsmyth

---

它运行得很好，但是似乎Webpack不喜欢这样做，会发出通知说“组件”现在是只读的，无法进行热重载。非常奇怪！ - Detuned

完美，这应该是被接受的答案。（如果 webpack 热重载不喜欢那个，那么这是工具或其 HMR 插件的问题。） - Benja

如果有人想知道是哪个Babel插件，它就是export-extensions，在这里 - http://babeljs.io/docs/plugins/transform-export-extensions/ - Noitidart

@loganfsmyth 有没有一种方法可以将上述内容导出为默认设置？ - lycuid

export { default as default } from 或 export { default } from 的意思是将默认导出（default export）从一个模块导出。第一个语法可以使用 as 关键字给默认导出起一个别名为 default，而第二个语法直接将默认导出命名为 default。 - loganfsmyth

Answer 2

我不知道为什么，但这对我有效： components/index.js:

import Component from './Component';
import Component2 from './Component2';
import Component3 from './Component3';
import Component4 from './Component4';

export {Component, Component2, Component3, Component4};

我像这样导入输出：

import {Component, Component2, Component3, Component4} from '../components';

- Kamuran Sönecek

---

这个方法可以瞬间解决三星手机的闪屏问题。 - Luckylooke

如何调整以避免破坏树摇优化？ - redfox05

Answer 3

请注意，您还可以重新导出模块中的所有内容：

export * from './Module/Module';

- laszlo-horvath

---

这个通配符语法只适用于具有命名导出的文件。如果文件只有一个默认导出，你会收到错误消息 "No named exports found in module"。 - dmbaughman

Answer 4

对于React Native组件，我用这种语法可以工作：

export {default} from 'react-native-swiper';

- Ivan Chernykh

---

当我想重新导出一个默认导入时，这对React（而不是Native）对我很有用。我在index.js文件中使用它，这些文件不会将任何HOC应用于我的“纯”组件。 - Shiraz

Answer 5

// Service
// ...
export const paymentService = new PaymentService()

// Entry services/index.js file
export * from './paymentService'

// use it like
import { paymentService } from './services/'

- elverde

Answer 6

所以，我发现这种方法对于立即导出功能非常有效，只需在components目录的根目录下有一个index.js文件，就可以轻松引用：

import Component from './Component/Component'
import ComponentTwo from './ComponentTwo/ComponentTwo'

module.exports = {
  Component,
  ComponentTwo
};

你需要使用 module.exports。

- Detuned

---

请注意，由于这部分代码是基于CommonJS模块的，所以它只能在Babel中运行，并且如果您尝试在真正的ES6模块中使用它，它会失败，因为随着对ES6模块支持的增加，它可能无法工作，在未来版本的Babel中也可能停止工作。 - loganfsmyth

正确的做法是不要混淆commonJS和es6的import/export。在Babel 6中，混用这两种导入方式会出现问题。而Babel5可以允许/强制该错误的行为。在你的示例中，Component将不再引用你导出的组件，而是成为一个对象，你的实例引用将在Component.default上存在。 - Scott Silvi

有人知道如何在不使用module.exports的情况下执行此操作吗？我喜欢使用将一堆组件打包到一个index.js中的方法，但是无法弄清语法。import x from 'x'; import y from 'y'; export default {x, y};然后import {x} from xy;不起作用（我搞不清楚为什么）。 - Alex McMillan

Alex，你试过使用 export {x, y} 吗？ - jtompl

这个答案不是ES6。它是一个非ECMAScript平台。-1 - rektide