立即导出 ES6(React、Webpack、Babel)

IT技术 reactjs ecmascript-6 webpack babeljs
2021-05-11 18:14:59

在目录的根目录(例如components/, containers/),我有一个index.jsx文件可以立即导出所有组件,以便我可以像这样导入它们:

    import {SampleOne, SampleTwo} from '../components'.

但是,根index.jsx文件不适用于以下内容:

    import SampleOne from './SampleOne/SampleOne';
    import SampleTwo from './Sample/SampleTwo';

    export default {
      SampleOne,
      SampleTwo  
    };

因此,我将其转换为以下内容(基本相同):

    export {default as SampleOne} from './SampleOne/SampleOne';
    export {default as SampleTwo} from './SampleTwo/SampleTwo';

这有效,但是,我收到此警告:

    Can't make class (SampleOne & SampleTwo) hot reloadable due to being read-only.
    To fix this you can try two solutions. First, you can exclude files or directories
    (for example, /node_modules/) using 'exclude' option in loader configuration.
    Second, if you are using Babel, you can enable loose mode for `es6.modules` using
    the 'loose' option. See: http://babeljs.io/docs/advanced/loose/
    and http://babeljs.io/docs/usage/options/
2个回答

经过大量的头撞之后,我们更换了

export {default as SampleOne} from './SampleOne/SampleOne';
export {default as SampleTwo} from './SampleTwo/SampleTwo';

import {default as SampleOne} from './SampleOne/SampleOne';
import {default as SampleTwo} from './SampleTwo/SampleTwo';

export {SampleOne, SampleTwo};

这似乎对我们有用。

我遇到了同样的问题,因为我在每个module中使用 index.js 来导出所有子module,如下所示:

export {default as SampleOne} from './SampleOne/SampleOne';
export {default as SampleTwo} from './SampleTwo/SampleTwo';

根据react-hot-loader repo 中的讨论,您可以忽略它(因为它仍然已加载)或不重新导出module。