Javascript ES6 在索引文件中导出/导入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34072598/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ES6 exporting/importing in index file
提问by MoeSattler
I am currently using ES6 in an React app via webpack/babel. I am using index files to gather all components of a module and export them. Unfortunately, that looks like this:
我目前正在通过 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_;
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.
显然这不是一个很好的解决方案，所以我想知道是否还有其他方法。我似乎无法直接导出导入的组件。
回答by Bergi
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 ES7ES8that will let you write export Comp1 from '…';.
回答by G. M.
Also, bear in mind that if you need to export multiple functions at once, like actions you can use
另外，请记住，如果您需要一次导出多个功能，例如您可以使用的操作
export * from './XThingActions';
回答by Javier Aguila
Too late but I want to share the way that I resolve it.
太晚了，但我想分享我解决它的方式。
Having modelfile which has two named export:
具有model具有两个命名导出的文件：
export { Schema, Model };
and having controllerfile which has the default export:
并拥有具有controller默认导出的文件：
export default Controller;
I exposed in the indexfile 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/';
回答by pirs
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
回答by Akash
Install @babel/plugin-proposal-export-default-fromvia:
@babel/plugin-proposal-export-default-from通过以下方式安装：
yarn add -D @babel/plugin-proposal-export-default-from
yarn add -D @babel/plugin-proposal-export-default-from
In your .babelrc.jsonor any of the Configuration File Types
在您的.babelrc.json或任何配置文件类型中
module.exports = {
//...
plugins: [
'@babel/plugin-proposal-export-default-from'
]
//...
}
Now you can exportdirectly from a file-path:
现在你可以export直接从一个file-path：
export Foo from './components/Foo'
export Bar from './components/Bar'
Good Luck...
祝你好运...
