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


201

Зараз я використовую 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';

Очевидно, що це не дуже приємне рішення, тому мені було цікаво, чи є інший спосіб. Я не можу експортувати імпортний компонент безпосередньо.


Відповіді:


369

Ви можете легко реекспортувати імпорт за замовчуванням:

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


2
Подивіться також подібні зразки тут і тут
Бергі

6
Окрім пропозиції ES8, ви можете використовувати генерацію коду для підтримки файлів індексів. Погляньте на github.com/gajus/create-index та github.com/ryardley/indexr .
Gajus

@Bergi Отже, ці 3 рядки роблять і імпорт, і експорт? Або це лише експорт, але вам більше не потрібно возитися з ім'ям Comp1_ тощо.
musicformellons

@musicformellons Вони безпосередньо експортують із згаданого модуля, так.
Бергі

2
@amann Кругова посилання на себе не є поганою, але може призвести до проблем залежно від того, що робить модуль. Незважаючи на це, я думаю, що вам слід використовувати цей шаблон лише у файлі індексів вашої бібліотеки для експорту всіх компонентів, і якщо у вас є міжмодульні залежності, вам слід імпортувати їх безпосередньо, а не імпортувати частину з великої. При цьому жодні кругові посилання не вводяться за цією схемою.
Бергі

56

Також майте на увазі, що якщо вам потрібно експортувати відразу кілька функцій, як дії, які ви можете використовувати

export * from './XThingActions';

14
Так. Зазвичай цей експорт бере лише названий експорт, тобто він не включає експорт за замовчуванням.
ArneHugo

Прийміть мене (досить оману ... узяв мене на хвилинку) SyntaxError: Unexpected reserved word, @ прийнята відповідь Бергі спрацює.
Френк Нокк

Ви також можете назвати експорт за замовчуванням, щоб обійти цю проблему. І ваші дії насправді не повинні мати експорт за замовчуванням, тому це рішення працює добре.
Баррі Майкл Дойл

2
найкраща практика - не використовувати експорт за замовчуванням у javascript, зайвий додатковий синтаксис. @GM має найкращу відповідь на цю тему для сучасного JavaScript.
меббіт

39

Занадто пізно, але я хочу поділитися способом вирішення.

Маючи 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/';

Чи працює це, коли ви імпортуєте функцію, а потім експортуєте її назад? Я спробував, але не вийшло.
Aftab Naveed

Вибачте, що це насправді спрацювало, я пропав безвісти / на своєму шляху.
Aftab Naveed

14

Просто:

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

Або за назвами функцій:

// export by function names
export { funcName1, funcName2, …} from './MyClass'

// export by aliases
export { funcName1 as f1, funcName2 as f2, …} from './MyClass'

Більше інформації: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export


1

Встановити @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'

Щасти...


Як це зробити для Create-React-App, не видаляючи його?
Негін Басірі
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.