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

Posted 2023-02-18

【中文标题】ES6 在索引文件中导出/导入

【英文标题】：ES6 exporting/importing in index file

【发布时间】：2016-03-08 10:57:38

【问题描述】：

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

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';

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

【问题讨论】：

import modules from files in directory的可能重复

【参考方案1】：

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

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

还有一个proposal for ES7 ES8 可以让你写export Comp1 from '…';。

【讨论】：

另见类似模式 here 和 here

除了 ES8 提案之外，还可以使用代码生成来维护索引文件。看看github.com/gajus/create-index 和github.com/ryardley/indexr。

@Bergi 那么这 3 行既可以导入也可以导出？或者这只是导出但您不再需要摆弄 Comp1_ 名称等？

@musicformellons 他们直接从引用的模块导出，是的。

@amann 循环引用本身还不错，但 可能 会导致问题，具体取决于模块的功能。无论如何，我认为你应该只在库的索引文件中使用这种模式来导出所有组件，如果你有模块间依赖项，你应该直接导入它们，而不是从大的部分导入。这样，这种模式就不会引入循环引用。

【参考方案2】：

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

export * from './XThingActions';

【讨论】：

是的。不幸的是，这 only 采用命名导出，即它不包括默认导出。

给我一个（相当误导......花了我一点时间）SyntaxError: Unexpected reserved word，@Bergi 接受的答案确实有效。

您还可以命名您的默认导出来解决该问题。而且您的操作不应该真正具有默认导出，因此此解决方案运行良好。

最佳实践是不要在 javascript 中使用默认导出，不必要的额外语法。 @GM在此线程上为现代 javascript 提供了最佳答案。

【参考方案3】：

为时已晚，但我想分享我解决它的方法。

拥有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/';

【讨论】：

当您导入一个函数然后将其导出回来时，这是否有效？我试过了，但没有。

抱歉，它确实有效，我的路径中缺少 /。

【参考方案4】：

简单地说：

// 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

【讨论】：

default 2 分！不知道有这样的好东西存在。

如果你在一个文件中有一个export myFile，然后在另一个文件中有一个const myFile = require('/myfile')，你可以console.log('myFile')看到import在对象中添加一个覆盖层，你会看到参数default 也在您导入的对象中。

【参考方案5】：

文件夹结构：

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

组件文件夹内的 Nav.js 组件

export Nav

组件文件夹中的index.js

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

在任何地方导入

import Nav, Another from './components'

【参考方案6】：

通过以下方式安装@babel/plugin-proposal-export-default-from：

yarn add -D @babel/plugin-proposal-export-default-from

在您的.babelrc.json 或任何Configuration File Types

module.exports = 
  //...
  plugins: [
     '@babel/plugin-proposal-export-default-from'
  ]
  //...

现在你可以直接从file-pathexport：

export Foo from './components/Foo'
export Bar from './components/Bar'

祝你好运……

【讨论】：

Create-React-App 不弹出怎么办？