ES6 экспорт / импорт в индексный файл

В настоящее время я использую ES6 в приложении React через webpack/babel. Я использую индексные файлы, чтобы собрать все компоненты модуля и экспортировать их. К сожалению, это выглядит так:

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

Очевидно, что это не очень хорошее решение, поэтому мне было интересно, есть ли другой способ. Кажется, я не могу экспортировать импортированный компонент напрямую.

Источник

8 ответов

Решение

Вы можете легко реэкспортировать импорт по умолчанию:

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

Источник

Также имейте в виду, что если вам нужно экспортировать несколько функций одновременно, например, действия, которые вы можете использовать

export * from './XThingActions';
Источник

У меня была проблема с export *вернулся undefinedкогда я импортировал бы функцию / класс по умолчанию...

Итак, я наконец исправил это с export {default} from './MyClass' и это сработало

Источник

Слишком поздно, но я хочу поделиться тем, как я это решаю.

имеющий 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/';
Источник

Структура папки:

      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'
Источник

Я годами искал, как экспортировать модули как с именами, так и с экспортом по умолчанию в модульном 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;

Вы можете возиться с этим, чтобы он соответствовал вашим потребностям, но это работает для меня. Надеюсь, поможет!

Источник

Установить @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'
  ]
  //...
}

Теперь вы можете export прямо из file-path:

export Foo from './components/Foo'
export Bar from './components/Bar'

Удачи...

Источник

Что сработало для меня, так это добавление typeключевое слово:

      export type { Comp1, Comp2 } from './somewhere';
Источник
Другие вопросы по тегам