ES6 คุณจะส่งออกโมดูลที่นำเข้าในบรรทัดเดียวได้อย่างไร?

108

ฉันต้องการทำสิ่งต่อไปนี้ แต่มีบรรทัดเดียวถ้าเป็นไปได้:

import Module from './Module/Module;'
export Module;

ฉันลองทำสิ่งต่อไปนี้แล้ว แต่ดูเหมือนจะไม่ได้ผล:

export Module from './Module/Module;

react-native ecmascript-6 import

ดูเพิ่มเติมมีอะนาล็อกบรรทัดเดียวใน ES6 สำหรับ ES5 module.exports = require('./inner.js')หรือไม่ และคือexport { foo as default }ES6 ถูกต้อง?

— Bergi

196

export {default as Module} from './Module/Module';

เป็นวิธี ES6 มาตรฐานตราบเท่าที่คุณไม่จำเป็นต้องModuleมีอยู่ภายในโมดูลที่ทำการส่งออก

export Module from './Module/Module';

เป็นวิธี ESnext ที่นำเสนอ แต่จะใช้ได้เฉพาะเมื่อคุณเปิดใช้งานใน Babel แล้ว

— loganfsmyth
แหล่งที่มา

อย่างไรก็ตามดูเหมือนว่า Webpack จะไม่ชอบสิ่งนี้โดยแจ้งว่าcomponentขณะนี้เป็นแบบอ่านอย่างเดียวและไม่สามารถโหลดใหม่ได้ ที่แปลกมาก!

— ปลดประจำการ

สมบูรณ์แบบนี่ควรเป็นคำตอบที่ยอมรับได้ (ถ้า webpack hot reload ไม่ชอบนั่นเป็นปัญหาในเครื่องมือนั้นหรือเป็นปลั๊กอิน HMR)

— เบญจา

18

หากใครสงสัยว่ามันคือปลั๊กอิน babel ตัวไหนอยู่export-extensionsที่นี่ - babeljs.io/docs/plugins/transform-export-extensions

— Noitidart

@loganfsmyth มีวิธีส่งออกข้างต้นเป็นค่าเริ่มต้นหรือไม่?

— lycuid

4

@ abhishek-kdm export { default as default } fromหรือexport { default } from

— loganfsmyth

26

ฉันไม่รู้ว่าทำไม แต่สิ่งนี้เหมาะกับฉัน:

ส่วนประกอบ / index.js:

import Component from './Component';
import Component2 from './Component2';
import Component3 from './Component3';
import Component4 from './Component4';

export {Component, Component2, Component3, Component4};

ฉันนำเข้าการส่งออกดังนี้:

import {Component, Component2, Component3, Component4} from '../components';

— Kamuran Sönecek
แหล่งที่มา

23

โปรดทราบว่าคุณสามารถรีพอร์ตทุกอย่างได้จากโมดูล:

export * from './Module/Module';

— RynoRn
แหล่งที่มา

ไวยากรณ์ตัวแทนนี้จะใช้ได้เฉพาะกับไฟล์ที่มีการเอ็กซ์พอร์ตที่มีชื่อ หากไฟล์มีการส่งออกเริ่มต้นเพียงรายการเดียวคุณจะได้รับข้อผิดพลาด "ไม่พบการส่งออกที่มีชื่อในโมดูล"

— dmbaughman

13

สำหรับส่วนประกอบ React Native ไวยากรณ์นี้ใช้ได้กับฉัน:

export {default} from 'react-native-swiper';

— เชอร์นิฟ
แหล่งที่มา

สิ่งนี้ใช้ได้กับฉันสำหรับ React (ไม่ใช่ Native) เมื่อฉันต้องการส่งออกค่าเริ่มต้นที่นำเข้าอีกครั้ง ฉันใช้สิ่งนี้ในไฟล์ index.js ที่ไม่ได้ใช้ HOC ใด ๆ กับส่วนประกอบ 'บริสุทธิ์' ของฉัน

— Shiraz

-1

ดังนั้นฉันพบว่าสิ่งนี้ทำงานได้ดีสำหรับฟังก์ชันการส่งออกทันทีโดยมีindex.jsที่รากของcomponentsไดเรกทอรีเพื่อให้อ้างอิงได้ง่าย:

import Component from './Component/Component'
import ComponentTwo from './ComponentTwo/ComponentTwo'

module.exports = {
  Component,
  ComponentTwo
};

module.exportsคุณจำเป็นต้องใช้

— Detuned
แหล่งที่มา

3

โปรดทราบว่าเนื่องจากนี่เป็นโมดูล CommonJS บางส่วนสิ่งนี้จะใช้งานได้เฉพาะใน Babel และจะล้มเหลวหากคุณพยายามใช้ในโมดูล ES6 จริงเมื่อรองรับพวกมันในสภาพแวดล้อมที่มากขึ้นและมีแนวโน้มที่จะหยุดทำงานในเวอร์ชันอนาคตของ Babel

— loganfsmyth

แก้ไข. การนำเข้า / ส่งออก JS & es6 ร่วมกันใน Babel 6 ช่วงพัก Babel5 อนุญาต / เสริมพฤติกรรมที่ไม่ถูกต้องนี้ ในตัวอย่างของคุณComponentจะไม่อ้างอิงถึงองค์ประกอบที่ส่งออกอีกต่อไป แต่จะเป็นวัตถุแทนโดยมีการอ้างอิงอินสแตนซ์ของคุณอยู่Component.default

— Scott Silvi

ใครรู้วิธีทำโดยไม่ใช้module.exports? ฉันชอบวิธีการบรรจุส่วนประกอบมากมายลงในindex.jsแต่ไม่สามารถหาไวยากรณ์ได้ import x from 'x'; import y from 'y'; export default {x, y};จากนั้นใช้import {x} from xy;ไม่ได้ (และฉันคิดไม่ออกว่าทำไมไม่)

— Alex McMillan

2

อเล็กซ์คุณลองexport {x, y}แทนไหม

— jtompl

คำตอบนี้ไม่ใช่ es6 เป็นแพลตฟอร์มที่ไม่ใช่ EcamScript -1

— rektide