[英]ES6 exporting/importing in index file
I am currently using ES6 in an React app via webpack/babel.我目前正在通过 webpack/babel 在 React 应用程序中使用 ES6。 I am using index files to gather all components of a module and export them.
我正在使用索引文件来收集模块的所有组件并导出它们。 Unfortunately, that looks like this:
不幸的是,这看起来像这样:
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_;
So I can nicely import it from other places like this:所以我可以很好地从其他地方导入它:
import { Comp1, Comp2, Comp3 } from './components';
Obviously that isn't a very nice solution, so I was wondering, if there was any other way.显然这不是一个很好的解决方案,所以我想知道是否还有其他方法。 I don't seem to able to export the imported component directly.
我似乎无法直接导出导入的组件。
You can easily re-export the default import:您可以轻松地重新导出默认导入:
export {default as Comp1} from './Comp1.jsx';
export {default as Comp2} from './Comp2.jsx';
export {default as Comp3} from './Comp3.jsx';
There also is a proposal for ES7 ES8 that will let you write export Comp1 from '…';
还有一个
ES7 ES8的提议,可以让你编写export Comp1 from '…';
. .
另外,请记住,如果您需要一次导出多个功能,例如您可以使用的操作
export * from './XThingActions';
Too late but I want to share the way that I resolve it.太晚了,但我想分享我解决它的方式。
Having model
file which has two named export:具有具有两个命名导出的
model
文件:
export { Schema, Model };
and having controller
file which has the default export:并具有具有默认导出的
controller
文件:
export default Controller;
I exposed in the index
file in this way:我以这种方式在
index
文件中公开:
import { Schema, Model } from './model';
import Controller from './controller';
export { Schema, Model, Controller };
and assuming that I want import all of them:并假设我想导入所有这些:
import { Schema, Model, Controller } from '../../path/';
Simply:简单地:
// 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'
Or by functions names :或按函数名称:
// export by function names
export { funcName1, funcName2, …} from './MyClass'
// export by aliases
export { funcName1 as f1, funcName2 as f2, …} from './MyClass'
More infos: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export更多信息: https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export
Folder structure:文件夹结构:
compoments|
|_ Nave.js
|_Another.js
|_index.js
Nav.js comp inside components folder组件文件夹中的 Nav.js comp
export {Nav}
index.js in component folder组件文件夹中的 index.js
export {Nav} from './Nav';
export {Another} from './Another';
import anywhere随处导入
import {Nav, Another} from './components'
@babel/plugin-proposal-export-default-from
via:@babel/plugin-proposal-export-default-from
: yarn add -D @babel/plugin-proposal-export-default-from
.babelrc.json
or any of the Configuration File Types.babelrc.json
或任何配置文件类型中module.exports = {
//...
plugins: [
'@babel/plugin-proposal-export-default-from'
]
//...
}
export
directly from a file-path
:file-path
export
:export Foo from './components/Foo'
export Bar from './components/Bar'
Good Luck...祝你好运...
对我有用的是添加type<\/code>关键字:
export type { Comp1, Comp2 } from './somewhere';
I've been searching for years how to export modules as both, named exports, and default exports in modular JavaScript.多年来,我一直在寻找如何在模块化 JavaScript 中将模块导出为命名导出和默认导出。 After tons of experimenting, the solution I found is quite simple and efficient.
经过大量试验,我发现的解决方案非常简单有效。
// 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";
This would allow each exported module to be imported in two ways:这将允许以两种方式导入每个导出的模块:
// 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;
You can mess around with this to have it suit your needs, but it works for me.您可以随意使用它以使其适合您的需求,但它对我有用。 Hope it helps!
希望能帮助到你!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.