ฉันจะสร้างชื่อแทนการนำเข้าเริ่มต้นใน Javascript ได้อย่างไร?


381

เมื่อใช้โมดูล ES6 ฉันรู้ว่าฉันสามารถตั้งชื่อแทนการนำเข้าได้

import { foo as bar } from 'my-module';

และฉันรู้ว่าฉันสามารถนำเข้าการนำเข้าเริ่มต้น

import defaultMember from 'my-module';

ฉันต้องการนามแฝงการนำเข้าเริ่มต้นและฉันคิดว่าสิ่งต่อไปนี้จะได้ผล

import defaultMember as alias from 'my-module';

แต่นั่นส่งผลให้เกิดข้อผิดพลาดในการแยกวิเคราะห์ (ไวยากรณ์)

ฉันจะสร้างชื่อแทนการนำเข้าเริ่มต้นได้อย่างไร (หรือฉันสามารถ?)

คำตอบ:


724

defaultMemberแล้วเป็นนามแฝง - มันไม่จำเป็นต้องเป็นชื่อของฟังก์ชั่นการส่งออก / สิ่ง แค่ทำ

import alias from 'my-module';

หรือคุณสามารถทำได้

import {default as alias} from 'my-module';

แต่มันค่อนข้างลึกลับ


12
นามแฝงของตัวเองคือความลับ! การนำเข้าการส่งออกที่มีชื่อและค่าเริ่มต้นจะสะดวกเมื่อทำการทดสอบส่วนประกอบ redux:import WrappedComponent, { Component } from 'my-module';
ptim

กฎการ tslinting ที่เข้มงวดบางอย่างไม่เห็นด้วยและต้องการให้คุณรักษาชื่อของอินพุตเริ่มต้นเป็นชื่อไฟล์
phil294

1
@Blauhirn นั่นสำหรับ IDE แบบเก่าที่ไม่สามารถติดตามการอ้างอิงและจำเป็นต้องใช้การค้นหาและแทนที่ระดับโลกสำหรับเครื่องมือการเปลี่ยนโครงสร้างใหม่หรือไม่? ไร้สาระ.
Bergi

@ ไม่มีเบอร์มันเป็นกฎ tslint "import-name" ที่ใช้เช่นโดยชุดกฎ tslint airbnb และดังนั้นจึงค่อนข้างแพร่หลาย กฎเหล่านี้มีอยู่เพื่อส่งเสริมรหัสที่สอดคล้องปราศจากข้อผิดพลาดและสามารถอ่านได้
phil294

2
เอกสาร MDN ควรสะท้อนถึงการปรับปรุงเอกสารเหล่านี้: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
nardecky
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.