【问题标题】:ES6, how can you export an imported module in a single line?ES6,如何在一行中导出导入的模块?
【发布时间】:2016-06-10 11:56:19
【问题描述】:

如果可能的话,我想要以下内容,但使用一行:

  • import Module from './Module/Module;'
  • export Module;

我尝试了以下方法,但似乎不起作用:

  • export Module from './Module/Module;

【问题讨论】:

标签: react-native ecmascript-6 import


【解决方案1】:
export {default as Module} from './Module/Module';

是标准的 ES6 方式,只要您不需要 Module 也可以在执行导出的模块内使用。

export Module from './Module/Module';

是一种提议的 ESnext 方法,但仅当您现在在 Babel 中启用它时才有效。

【讨论】:

  • 它工作得很好,但是,Webpack 似乎不喜欢这样,通知component 现在是只读的,无法热重新加载。很奇怪!
  • 完美,这应该是公认的答案。 (如果 webpack 热重载不喜欢那是那个工具或者它的 HMR 插件的问题。)
  • 如果有人想知道它是哪个 babel 插件,这里是 export-extensions - babeljs.io/docs/plugins/transform-export-extensions
  • @loganfsmyth 有没有办法将上述内容导出为默认值?
  • @abhishek-kdm export { default as default } fromexport { default } from
【解决方案2】:

我不知道为什么,但这对我有用:

组件/index.js:

import Component from './Component';
import Component2 from './Component2';
import Component3 from './Component3';
import Component4 from './Component4';

export {Component, Component2, Component3, Component4};

我这样导入导出:

import {Component, Component2, Component3, Component4} from '../components';

【讨论】:

  • ⚠这个方法秒杀三抖
  • 如何调整以不杀死摇晃树?
【解决方案3】:

请注意,您还可以重新导出模块中的所有内容:

export * from './Module/Module';

【讨论】:

  • 此通配符语法仅适用于具有命名导出的文件。如果文件只有一个默认导出,您将收到错误“模块中未找到命名导出”。
【解决方案4】:

对于 React Native 组件,此语法适用于我:

export {default} from 'react-native-swiper';

【讨论】:

  • 当我希望重新导出导入的默认值时,这适用于 React(不是 Native)。我在 index.js 文件中使用它,这些文件不会将任何 HOC 应用于我的“纯”组件
【解决方案5】:
// Service
// ...
export const paymentService = new PaymentService()

// Entry services/index.js file
export * from './paymentService'

// use it like
import { paymentService } from './services/'

【讨论】:

    【解决方案6】:

    所以,我发现这对于在 components 目录的根目录下有一个 index.js 以便于引用的即时导出功能非常有效:

    import Component from './Component/Component'
    import ComponentTwo from './ComponentTwo/ComponentTwo'
    
    module.exports = {
      Component,
      ComponentTwo
    };
    

    您需要使用module.exports

    【讨论】:

    • 请记住,由于这部分是 CommonJS 模块,因此它只能在 Babel 中专门工作,如果您尝试在真正的 ES6 模块中使用它,一旦对它们的支持进入更多环境,就会失败,并且可能会在未来版本的 Babel 中停止工作。
    • 正确。在 Babel 6 中混合 commonJS 和 es6 导入/导出中断。 Babel5 允许/加强了这种不正确的行为。在您的示例中,Component 将不再是对导出组件的引用,而是一个对象,您的实例引用位于 Component.default
    • 有人知道如何在不使用 module.exports 的情况下执行此操作吗?我喜欢这种将一堆组件打包成index.js 的方法,但无法弄清楚语法。 import x from 'x'; import y from 'y'; export default {x, y}; 然后 import {x} from xy; 不起作用(我不知道为什么不)
    • Alex,你试过export {x, y}吗?
    • 这个答案不是 es6。它是一个非 EcamScript 平台。 -1
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-06-29
    • 1970-01-01
    • 1970-01-01
    • 2017-01-04
    • 2016-05-16
    • 2017-12-09
    相关资源
    最近更新 更多