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

ES6 exporting/importing in index file

本文关键字：导入 索引 文件 ES6      更新时间：2023-09-26

我目前正在通过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';

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

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

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

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

export * from './XThingActions';

默认导出 

// Default export (recommended)
export {default} from './module' 
// Default export with alias
export {default as d1} from './module'

全部导出

// In >ES7, it could be
export * from './module'
// In >ES7, with alias
export * as d1 from './module'

函数名称导出

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

解构对象导出

// export destructured object
export const { myVar, myFunction } = myObjectWithEverything
// export destructured object, with renaming
export const { v1: myVar, f1: myFunction } = myBigObject

带数组

// it works with array as well
export const [ funcName1, funcName2 ] = myBigArray

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

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

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

文件夹结构：

components|
          |_Comp.js
          |_AnotherComp.js
          |_YetAnotherComp.js
          |_index.js

在 Comp.js 文件中，并执行与其他组件类似的操作：

export {Comp}

从索引.js

export {Comp} from './Comp';
export {AnotherComp} from './AnotherComp';
export {YetAnotherComp} from './YetAnotherComp';

现在您可以在任何地方导入

import {Comp, AnotherComp, YetAnotherComp} from './components'

多年来我一直在寻找如何将模块导出为命名导出和模块化 JavaScript 中的默认导出。经过大量的实验，我找到的解决方案非常简单高效。

// index.js
export { default as Client } from "./client/Client.js";
export { default as Events } from "./utils/Events.js";
// Or export named exports
export { Client } from "./client/Client.js";
export { Events } from "./utils/Events.js";
export * as default from "./index.js";

这将允许以两种方式导入每个导出的模块：

// script.js
import { Client } from "index.js";
new Client();
import module from "index.js";
new module.Client();
// You could also do this if you prefer to do so:
const { Client } = module;

你可以弄乱这个让它适合你的需求，但它对我有用。希望对您有所帮助！

对我有用的是添加type关键字：

export type { Comp1, Comp2 } from './somewhere';
通过以下方式

安装@babel/plugin-proposal-export-default-from：

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

在您的.babelrc.json或任何配置文件类型中

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

现在您可以直接从file-path export：

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

祝你好运。。。

相关文章：