如何在ES6中导出导入的对象?


242

用例很简单:我只想导出名称与导入的对象相同的对象。

例如:

import React from 'react';
export React;

但这不起作用。我要写:

import React from 'react';
export const React = React;

但这很奇怪。什么是正确的方法?

更新时间

感谢您的帮助和参考。我已经用许多线索解决了我的问题。我想分享一些常见的案例和解决方案。

出口进口

import d, {obj} from '...';

export {obj, d};
export {obj as name1, d as name2};

再出口所有已命名的进口

export * from '...';
export * as name1 from '...';

再出口一些已命名的进口货

export {a, b as name1} from '...';

重新导出默认导入作为默认导出

export {default} from '...';

重新导出默认导入为命名导出

export {default as name1} from '...';

你为什么要出口反应?
omarjmh

您可以export {React}但又可以,如果您需要在某个地方使用React,则应将其导入到那里。
loganfsmyth

2
导出反应只是一个例子,实际上,我要组织一些项目,以便用户可以在较短和较高级别的路径中导入一些对象。
姚钊

非常感谢您的更新。它解决了我对ES6 / 7遇到的所有问题。我建议您将此添加为答案并接受它。
Florian Wendelborn

12
export * as name1 from '...';这对我不起作用(使用webpack 2)。有任何想法吗?
实体黑人

Answers:


130

我经常在由多个文件组成的index.js文件中执行以下操作:

export {default as SomeClass} from './SomeClass';
export {someFunction} from './utils';
export {default as React} from 'react';

博客条目提供了一些不错的示例。

重要的提示

在访问这些导出的进口商品时,您应该了解此eslint规则。基本上,在另一个文件中,您不应:

import SomeClassModule from 'SomeClass/index.js';
SomeClassModule.someFunction(); // Oops, error

你应该做这个:

import SomeClassModule, {someFunction} from 'SomeClass/index.js';
someFunction(); // Ok


2

对于我的用例,我显式需要某种显式的import语句,以便babel可以将我的es7代码转换为es5。

以下导致错误You gave us a visitor for the node type "ForAwaitStatement" but it's not a valid type

require( 'babel-core/register' ); //transpiles es7 to es5
export {default} from './module_name'

我的解决方案是通过使用require()以下方式显式导入模块:

require( 'babel-core/register' );
export default require( './module_name' ).default;

-1

鉴于./foo.js

const Foo = class {
  talk() { return 'hello'; }
};

export default Foo;

然后,您应该可以执行以下操作:

import Foo from './foo';

let foo = new Foo();

foo.talk(); // => 'hello';

语法或多或少遵循commonjs module.exports模式,您可以在其中执行以下操作:

const Foo = class {

};

module.exports = Foo;

更多内容:

http://exploringjs.com/es6/ch_modules.html


那不是问题的全部吗?
Dan Dascalescu

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.