S রফতানি কনস্ট `বনাম` রফতানি ডিফল্ট` ES6 এ


204

আমি export defaultঠিক করেই আমদানি করতে সক্ষম হওয়া ব্যতীত এই দুটির মধ্যে কোনও বড় পার্থক্য রয়েছে কিনা তা নির্ধারণ করার চেষ্টা করছি :

import myItem from 'myItem';

এবং ব্যবহার করে export constআমি করতে পারি:

import { myItem } from 'myItem';

আমি ভাবছি এইগুলি বাদে কোনও মতপার্থক্য এবং / অথবা ব্যবহারের মামলা রয়েছে কিনা।


1
ব্যবহার constশনাক্তকারীকে কেবল পঠনযোগ্য করে তুলবে। সুতরাং আদিম মানগুলির ক্ষেত্রে, আপনি এটিকে অপরিবর্তনীয় বলে বিবেচনা করতে পারেন। মনে রাখবেন যে মানটি নিজেই অপরিবর্তনীয় নয়, সুতরাং বস্তু, অ্যারে ইত্যাদি পরিবর্তন করা যেতে পারে - কেবল পুনরায় বরাদ্দ করা হয়নি।
spmurrayzzz

4
@ স্পমুররেজজ: এফডাব্লুআইডাব্লু, আমদানি বাইন্ডিংগুলিও অপরিবর্তনীয়, ঠিক যেমন const
ফেলিক্স ক্লিং

@ ফেলিক্সক্লিং-এর স্পষ্টতার জন্য ধন্যবাদ, এটি জানা ছিল না
spmurrayzzz

@ ফেলিক্সকলিং: বাইরে থেকে কমপক্ষে। তারা যদিও ধ্রুবক নাও হতে পারে, রফতানি পরিবর্তন করা যেতে পারে।
বার্গি

@Bergi: ঠিক আছে, কেন যে আমি বললাম আমদানি বাইন্ডিং ;)
ফেলিক্স Kling

উত্তর:


326

এটি একটি নামযুক্ত রফতানি বনাম একটি ডিফল্ট রফতানি। export constহ'ল নামযুক্ত রফতানি যা কনস্ট্যান্টের ঘোষণা বা ঘোষণা রফতানি করে।

জোর দেওয়ার জন্য: এখানে যা গুরুত্বপূর্ণ তা হ'ল মূল exportশব্দটি constহ'ল কনস্ট্যান্ট ডিক্লেয়ারেশন বা ঘোষণার জন্য ব্যবহৃত হয়। exportক্লাস বা ফাংশন ঘোষণার মতো অন্যান্য ঘোষণাপত্রগুলিতেও প্রয়োগ করা যেতে পারে।

ডিফল্ট রফতানি ( export default)

আপনার প্রতি ফাইলটিতে একটি ডিফল্ট রফতানি থাকতে পারে। আপনি যখন আমদানি করবেন তখন আপনাকে একটি নাম নির্দিষ্ট করতে হবে এবং এর মতো আমদানি করতে হবে:

import MyDefaultExport from "./MyFileWithADefaultExport";

এটি আপনার পছন্দ মতো কোনও নাম দিতে পারেন।

নামযুক্ত রফতানি ( export)

নামযুক্ত রফতানির সাথে আপনার ফাইলের প্রতি একাধিক নামিক রফতানি থাকতে পারে। তারপরে আপনি ধনুর্বন্ধনী দ্বারা ঘিরে থাকা বিশেষ রফতানি আমদানি করুন:

// ex. importing multiple exports:
import { MyClass, MyOtherClass } from "./MyClass";
// ex. giving a named import a different name by using "as":
import { MyClass2 as MyClass2Alias } from "./MyClass2";

// use MyClass, MyOtherClass, and MyClass2Alias here

অথবা একই বিবৃতিতে নামযুক্ত আমদানির সাথে একটি ডিফল্ট ব্যবহার করা সম্ভব:

import MyDefaultExport, { MyClass, MyOtherClass} from "./MyClass";

নেমস্পেস আমদানি

কোনও জিনিস থেকে ফাইল থেকে সমস্ত কিছু আমদানি করাও সম্ভব:

import * as MyClasses from "./MyClass";
// use MyClasses.MyClass, MyClasses.MyOtherClass and MyClasses.default here

মন্তব্য

  • বাক্য গঠনটি ডিফল্ট রফতানিকে কিছুটা সংক্ষিপ্ত আকারে সমর্থন করে কারণ তাদের ব্যবহারের ঘটনাটি বেশি সাধারণ ( এখানে আলোচনাটি দেখুন )।
  • একটি ডিফল্ট রফতানি আসলে নামের সাথে একটি রফতানি রফতানি হয় defaultতাই আপনি এটি একটি নামযুক্ত আমদানি সহ আমদানি করতে সক্ষম হন:

    import { default as MyDefaultExport } from "./MyFileWithADefaultExport";

24

export defaultরফতানি করা "জিনিস" আমদানি করার সময় সিনট্যাক্সকে প্রভাবিত করে, যখন আমদানি করার অনুমতি দেওয়া হয়, যা কিছু রফতানি করা হয়, importনিজেই নামটি বেছে নিয়ে, রফতানির সময় নামটি কী তা বিবেচনা না করে, কারণ এটি "ডিফল্ট" হিসাবে চিহ্নিত করা হয়।

একটি দরকারী ব্যবহারের ক্ষেত্রে, যা আমি পছন্দ করি (এবং ব্যবহার), একটি রপ্তানি করতে অনুমতি বেনামী ছাড়া কাজ স্পষ্টভাবে এটির নাম হচ্ছে, এবং শুধুমাত্র যখন যে ফাংশন আমদানি করা হয়, এটি একটি নাম দেওয়া হবে:


উদাহরণ:

2 টি ফাংশন রফতানি করুন default:

export function divide( x ){
    return x / 2;
}

// only one 'default' function may be exported and the rest (above) must be named
export default function( x ){  // <---- declared as a default function
    return x * x;
}

উপরের ফাংশনগুলি আমদানি করুন। defaultএকটির জন্য নাম তৈরি করা :

// The default function should be the first to import (and named whatever)
import square, {divide} from './module_1.js'; // I named the default "square" 

console.log( square(2), divide(2) ); // 4, 1

যখন {}এটা যাই হোক না কেন আমদানি করা হয় করা হয় যে মানে সিনট্যাক্স একটি ফাংশন (অথবা পরিবর্তনশীল) আমদানি করতে ব্যবহার করা হয় ইতিমধ্যে যখন রপ্তানি নামে, তাই এক এটি দ্বারা আমদানি আবশ্যক সঠিক একই নামের অন্য আমদানি হবে না কাজ, বা।


ভ্রান্ত উদাহরণ:

  1. ডিফল্ট ফাংশনটি আমদানির জন্য প্রথম হতে হবে

    import {divide}, square from './module_1.js
  2. divide_1রফতানি করা হয়নি module_1.js, এভাবে কিছুই আমদানি করা হবে না

    import {divide_1} from './module_1.js
  3. squareরফতানি করা হয়নি module_1.js, কারণ {}ইঞ্জিনকে কেবল নামমাত্র রফতানিগুলি স্পষ্টভাবে অনুসন্ধান করতে বলে ।

    import {square} from './module_1.js

এর অর্থ এই নয় যে এটি কোনও জিনিস রফতানি করে। একই মডিউলে আপনার একাধিক নাম এবং একটি ডিফল্ট থাকতে পারে। ডিফল্ট কেবল ঠিক এর মানে হল যে - এটি ডিফল্ট রপ্তানি যদি তুমি অর্থাত যখন আমদানি নাম উল্লেখ না, import something fromপরিবর্তে import { somethingNamed } from
অ্যান্ডিস

আমি এখানে নতুন ইংরেজি শব্দও শিখেছি: "এররোনাস" +1 এর জন্য
যুবল লেভি

12

গৌণ নোট: দয়া করে বিবেচনা করুন যে আপনি যখন কোনও ডিফল্ট রফতানি থেকে আমদানি করেন, নামকরণ সম্পূর্ণ স্বাধীন। এটি আসলে রিফ্যাক্টরিংগুলিতে প্রভাব ফেলে।

ধরা যাক আপনার Fooসাথে সম্পর্কিত আমদানি সহ একটি বর্গ রয়েছে :

export default class Foo { }

//the name 'Foo' could be anything, since it's just an
//identifier for the default export
import Foo from './Foo'

এখন আপনি যদি নিজের Fooশ্রেণীর Barফাইলটিকে পুনরায় নামকরণ করতে এবং পুনরায় নামকরণ করতে চান তবে বেশিরভাগ আইডিই আপনার আমদানিকে স্পর্শ করবে না। সুতরাং আপনি এটি দিয়ে শেষ হবে:

export default class Bar { }

//the name 'Foo' could be anything, since it's just an
//identifier for the default export.
import Foo from './Bar'

বিশেষত টাইপস্ক্রিপ্টে, আমি সত্যিই নামকরণকৃত রফতানি এবং আরও নির্ভরযোগ্য রিফ্যাক্টরিংয়ের প্রশংসা করি। পার্থক্যটি হ'ল defaultকীওয়ার্ড এবং কোঁকড়া ধনুর্বন্ধনী এর অভাব । আপনার এখন টাইপ চেকিং হওয়ায় এই বিটিডাব্লু আপনাকে আপনার আমদানিতে টাইপো তৈরি করতে বাধা দেয়।

export class Foo { }

//'Foo' needs to be the class name. The import will be refactored
//in case of a rename!
import { Foo } from './Foo'

2
" 'ফু' ক্লাসের নাম হওয়া দরকার " "- না! আপনি ডিফল্ট রফতানিতে import { Foo as Anything } from …যেমন করতে পারেন তেমন সহজেই করতে পারেন import Anything from …
বার্গি

আপনি যেটির সাথে এটির নাম পরিবর্তন করতে পারেন তা asউত্স মন্তব্যের মূল বিষয় নয়। ডাউনভোটের জন্য ধন্যবাদ; পি
ফিলিপ সুমি

1
আমি হ্রাস করি নি, তবে আমি নিশ্চিত নই যে এই যুক্তিটি দৃ conv়প্রত্যয়ী। আমি জানি না যে আমি আমার আইডিইটি একটি একক মডিউলকে পুনরায় সংশোধন করার সময় সমস্ত আমদানির নাম পরিবর্তন করতে চাইব কিনা, মডুলারাইজেশনটি হ'ল :-) এবং এটি মনে হয় যে কোনও আইডিই "সমস্যা" রফতানি শৈলী চয়ন করার কারণ নয় …
বার্গি

আমি সম্মত হই যে আমি এখানে বিকাশকারী ইউএক্সের জন্য নামযুক্ত রফতানি ব্যবহার করি - তবে তারপরে আপনি যুক্তি দিতে পারেন যে প্রতি সে টাইপসক্রিপ্ট এ সবই। আমি প্রায়শই রিফ্যাক্টর করি এবং আমার কাছে প্রতি ফাইলটি সাধারণত একটি ক্লাস থাকে (আমার ক্ষেত্রে: প্রতিক্রিয়াযুক্ত উপাদান), আমি একেবারে চাই যে আমদানিগুলি সংযোগ বিচ্ছিন্ন না করার জন্য একটি নাম পরিবর্তিত উপাদান অনুসরণ করে follow অবশ্যই এটি পৃথক বিকাশকারীদের উপর নির্ভর করে বোধগম্য হতে পারে বা নাও পারে।
ফিলিপ সুমি

আমি একটি নিবন্ধ পেয়েছি যা একই জিনিস বলে। হতে পারে যুক্তিসঙ্গত অবস্থান হতে পারে: আমাদের export defaultকোনও প্রকল্পের মূল অবজেক্ট রফতানি করার জন্য ব্যবহার করা উচিত , বিশেষত একটি এনএমপি প্যাকেজ থেকে (এটি এটিকে প্রতিস্থাপন করে module.exports =)। তবে, কোনও প্রকল্পের অভ্যন্তরীণভাবে, কেবল নামমাত্র রফতানি ব্যবহার করা ভাল।
প্যালিয়ো

7

ডকুমেন্টেশন থেকে :

নামকৃত রফতানি বেশ কয়েকটি মান রফতানি করতে কার্যকর। আমদানির সময়, সংশ্লিষ্ট মান উল্লেখ করতে কেউ একই নাম ব্যবহার করতে সক্ষম হবে।

ডিফল্ট রফতানি সম্পর্কিত, মডিউলে কেবলমাত্র একক ডিফল্ট রফতানি হয়। একটি ডিফল্ট রফতানি একটি ফাংশন, শ্রেণি, কোনও বস্তু বা অন্য যে কোনও কিছু হতে পারে। এই মানটিকে "প্রধান" রফতানি করা মান হিসাবে বিবেচনা করা হবে কারণ এটি আমদানির সবচেয়ে সহজ হবে।


0

আপনি যখন ডিফল্ট রাখেন তখন এটির নামক ডিফল্ট এক্সপোর্ট। আপনার কাছে প্রতি ফাইলের জন্য কেবল একটি ডিফল্ট রফতানি থাকতে পারে এবং আপনি যে কোনও নামের সাথে এটি অন্য একটি ফাইলে আমদানি করতে পারেন। আপনি যখন ডিফল্ট রাখেন না, যার নাম দেওয়া নামটি রফতানি হয়, আপনার এটিকে অন্য নামের সাথে কোঁকড়া ধনুর্বন্ধনী সহ একই নাম ব্যবহার করে আমদানি করতে হয়।


0

আমার সমস্যা ছিল যে ব্রাউজারটি এস 6 ব্যবহার করে না।

আমি এটি দিয়ে ঠিক করেছি:

 <script type="module" src="index.js"></script>

টাইপ মডিউল ব্রাউজারকে ES6 ব্যবহার করতে বলে।

export const bla = [1,2,3];

import {bla} from './example.js';

তাহলে এটি কাজ করা উচিত।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.