การส่งออก / นำเข้า 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
ดูรูปแบบที่คล้ายกันที่นี่และที่นี่
Bergi

6
นอกเหนือจากข้อเสนอ ES8 คุณสามารถใช้การสร้างรหัสเพื่อดูแลไฟล์ดัชนี มีลักษณะที่github.com/gajus/create-indexและgithub.com/ryardley/indexr
Gajus

@Bergi ดังนั้นทั้งสามบรรทัดทำทั้งการนำเข้าและส่งออกหรือไม่ หรือนี่เป็นเพียงการส่งออก แต่คุณไม่ต้องเล่นซอกับชื่อ Comp1_ เป็นต้น?
musicformellons

@musicformellons พวกเขาส่งออกโดยตรงจากโมดูลอ้างอิงใช่
Bergi

2
@amann การอ้างอิงแบบวงกลมของตัวเองไม่เลว แต่สามารถนำไปสู่ปัญหาขึ้นอยู่กับสิ่งที่โมดูลทำ ไม่ว่าฉันคิดว่าคุณควรใช้รูปแบบนี้ในไฟล์ดัชนีของห้องสมุดของคุณเพื่อส่งออกส่วนประกอบทั้งหมดและหากคุณมีการพึ่งพาระหว่างโมดูลคุณควรนำเข้าโดยตรงแทนที่จะนำเข้าชิ้นส่วนจากขนาดใหญ่ ด้วยเหตุนี้จึงไม่มีการอ้างอิงแบบวงกลมในรูปแบบนี้
Bergi

56

นอกจากนี้โปรดทราบว่าหากคุณต้องการส่งออกหลายฟังก์ชั่นพร้อมกันเช่นเดียวกับการกระทำที่คุณสามารถใช้

export * from './XThingActions';

14
ใช่. Unforunately นี้เพียงใช้เวลาการส่งออกที่มีชื่อคือมันไม่ได้รวมการส่งออกเริ่มต้น
ArneHugo

เข้าใจฉันหน่อย (เข้าใจผิด ... ใช้เวลาสักครู่) SyntaxError: Unexpected reserved word@ คำตอบที่ยอมรับของ Bergi ก็ใช้ได้
Frank Nocke

คุณยังสามารถตั้งชื่อการส่งออกเริ่มต้นของคุณเพื่อแก้ไขปัญหานั้น และการกระทำของคุณไม่ควรมีการส่งออกเริ่มต้นเพื่อแก้ปัญหานี้ทำงานได้ดี
Barry Michael Doyle

2
แนวปฏิบัติที่เหมาะสมที่สุดคือไม่ใช้การส่งออกเริ่มต้นใน javascript ซึ่งเป็นไวยากรณ์เพิ่มเติมที่ไม่จำเป็น @GM มีคำตอบที่ดีที่สุดในหัวข้อนี้สำหรับจาวาสคริปต์ที่ทันสมัย
mibbit

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 โดยไม่ต้องกดปุ่มออก
Negin Basiri
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.