Експорт / імпорт 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.