ES6 在索引文件中导出/导入

IT技术 javascript ecmascript-6 webpack babeljs
2021-02-05 04:55:39

我目前正在通过 webpack/babel 在 React 应用程序中使用 ES6。我正在使用索引文件来收集module的所有组件并导出它们。不幸的是，它看起来像这样：

import Comp1_ from './Comp1.jsx';
import Comp2_ from './Comp2.jsx';
import Comp3_ from './Comp3.jsx';

export const Comp1 = Comp1_;
export const Comp2 = Comp2_;
export const Comp3 = Comp3_;

所以我可以很好地从其他地方导入它，如下所示：

import { Comp1, Comp2, Comp3 } from './components';

显然这不是一个很好的解决方案，所以我想知道是否还有其他方法。我似乎无法直接导出导入的组件。

6个回答

您可以轻松地重新导出默认导入：

export {default as Comp1} from './Comp1.jsx';
export {default as Comp2} from './Comp2.jsx';
export {default as Comp3} from './Comp3.jsx';

还有一个ES7 ES8的提案，可以让你编写export Comp1 from '…';.

@musicformellons 他们直接从引用的module导出，是的。
2021-03-17 04:55:39
另请参阅此处和此处的类似模式
2021-03-18 04:55:39
除了 ES8 提案，您还可以使用代码生成来维护索引文件。看看github.com/gajus/create-index和github.com/ryardley/indexr。
2021-03-25 04:55:39
@amann 自身的循环引用还不错，但可能会导致问题，具体取决于module的作用。无论如何，我认为你应该只在你的库的索引文件中使用这种模式来导出所有组件，如果你有module间的依赖关系，你应该直接导入它们，而不是从大的部分导入。这样，这种模式就不会引入循环引用。
2021-04-05 04:55:39
@Bergi 所以这 3 行同时进行导入和导出？或者这只是导出但您不再需要摆弄 Comp1_ 名称等？
2021-04-08 04:55:39

另外，请记住，如果您需要一次导出多个功能，例如您可以使用的操作

export * from './XThingActions';
给我一个（相当误导......花了我一点时间）SyntaxError: Unexpected reserved word，@Bergi 接受的答案确实有效。
2021-03-20 04:55:39
您还可以命名默认导出以解决该问题。并且您的操作不应该真正具有默认导出，因此此解决方案运行良好。
2021-03-25 04:55:39
是的。不幸的是，这只需要命名导出，即它不包括默认导出。
2021-03-28 04:55:39
最佳实践是不要在 javascript 中使用默认导出，不必要的额外语法。@GM 在此线程上为现代 javascript 提供了最佳答案。
2021-03-30 04:55:39

太晚了，但我想分享我解决它的方式。

具有model具有两个命名导出的文件：

export { Schema, Model };

并拥有具有controller默认导出的文件：

export default Controller;

我是这样在index文件中暴露的：

import { Schema, Model } from './model';
import Controller from './controller';

export { Schema, Model, Controller };

并假设我想导入所有这些：

import { Schema, Model, Controller } from '../../path/';
当您导入一个函数然后将其导出回来时，这是否有效？我试过了，但没有。
2021-03-27 04:55:39
对不起，它确实有效，我在我的道路上失踪了/。
2021-04-04 04:55:39

简单地：

// Default export (recommended)
export {default} from './MyClass' 

// Default export with alias
export {default as d1} from './MyClass' 

// In >ES7, it could be
export * from './MyClass'

// In >ES7, with alias
export * as d1 from './MyClass'

或按函数名称：

// export by function names
export { funcName1, funcName2, …} from './MyClass'

// export by aliases
export { funcName1 as f1, funcName2 as f2, …} from './MyClass'

更多信息：https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export

如果您export myFile在文件中有一个，然后const myFile = require('/myfile')在其他文件中有一个，您可以console.log('myFile')看到import在对象中添加了一个覆盖层，并且您将default在导入的对象中看到参数。
2021-03-23 04:55:39
{default} 2 分！不知道有这样的好东西存在。
2021-04-10 04:55:39

文件夹结构：

components|
          |_ Nave.js
          |_Another.js
          |_index.js

组件文件夹中的 Nav.js comp

export {Nav}

组件文件夹中的 index.js

export {Nav} from './Nav';
export {Another} from './Another';

随处导入

import {Nav, Another} from './components'
其它你可能感兴趣的问题
上一篇Javascript 等价于 PHP Explode() 下一篇window.location.reload 清除缓存