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

Question

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

顯然這不是一個很好的解決方案，所以我想知道是否還有其他方法。 我似乎無法直接導出導入的組件。

Answer 1

您可以輕松地重新導出默認導入：

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

Answer 2

另外，請記住，如果您需要一次導出多個功能，例如您可以使用的操作

export * from './XThingActions';

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

Answer 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

Answer 5

文件夾結構：

compoments|
          |_ 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'

Answer 6

通過以下方式安裝@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'

祝你好運...

Answer 7

對我有用的是添加type<\/code>關鍵字：

export type { Comp1, Comp2 } from './somewhere';

Answer 8

多年來，我一直在尋找如何在模塊化 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;

您可以隨意使用它以使其適合您的需求，但它對我有用。 希望能幫助到你！