জাভাস্ক্রিপ্টে "এক্সপোর্ট ডিফল্ট" কী?


569

ফাইল: SafeString.js

// Build out our basic SafeString type
function SafeString(string) {
  this.string = string;
}

SafeString.prototype.toString = function() {
  return "" + this.string;
};

export default SafeString;

এর export defaultআগে কখনও দেখিনি । এর জন্য কি কোনও সমমানের জিনিস export defaultবোঝা সহজ হতে পারে?



2
exportকীওয়ার্ডের বিশদ এখানে । বর্তমানে এটি কোনও ওয়েব ব্রাউজার দ্বারা স্থানীয়ভাবে সমর্থিত নয়
আরবিটি

3
এটি এখন সমস্ত ব্রাউজারে সমর্থিত IE
ব্রায়ান ডি


উত্তরের জন্য উপরে দেখুন; বিভ্রান্তির জন্য \ / নীচে দেখুন। আমি তোমার দা ওয়াই দেখিয়েছি
এন্ড্রু

উত্তর:


455

এটি ES6 মডিউল সিস্টেমের অংশ, এখানে বর্ণিত । এই ডকুমেন্টেশনে একটি সহায়ক উদাহরণ রয়েছে:

যদি কোনও মডিউল ডিফল্ট রফতানি সংজ্ঞা দেয়:

export default function() { console.log("hello!") }

তারপরে আপনি কোঁকড়া ধনুর্বন্ধনী বাদ দিয়ে ডিফল্ট রফতানি আমদানি করতে পারেন:

import foo from "foo";
foo(); // hello!

আপডেট করুন: জুন 2015 পর্যন্ত মডিউল সিস্টেমের মধ্যে সংজ্ঞায়িত করা হয় §15.2 এবং exportবিশেষ করে বাক্য গঠন সংজ্ঞায়িত করা হয় §15.2.3 নাম ECMAScript 2015 স্পেসিফিকেশন করুন।


1
@ জিনহেঙ্ক আমি মনে করি যে এটি প্রত্যাশিত হবে কারণ ইএস 6 এখনও একটি খসড়া হিসাবে রয়েছে। আমি একটি আপডেট লিঙ্ক এবং একটি দাবি অস্বীকার করেছি।
PSWg

7
এক্সপোর্ট = ফাংশন () {} থেকে এক্সপোর্ট ডিফল্ট ফাংশন () {any কীভাবে আলাদা তা আমি দেখতে পাই না ....
আলেকজান্ডার মিলস

1
এটির মতো পরিস্থিতিগুলি সম্পর্কে export const Foo = () => {}এবং তারপরে ফাইলের শেষে export default Fooআমি এটিকে প্রতিক্রিয়াশীল উদাহরণগুলির একটি গোছাতে দেখছি। দুটি রফতানির কী আছে?
ফ্লেভারস্কেপ

ডিফল্ট এবং নামযুক্ত রফতানীর সাথে একটি উদাহরণ দেখতে ভাল লাগবে। অন্য কথায়, এ জাতীয় রফতানি যা সন্তুষ্ট করবেimport foo, { bar, baz } from './foo';
gumkins

1
উত্তর দেওয়ার জন্য ধন্যবাদ, তবে দ্বিতীয় উদাহরণে ফু এর ব্যবহার কিছুটা অস্পষ্ট; কী আছে এবং কীভাবে আপনি প্রথম ফাইলটির নাম দিয়েছেন; আপনি কিভাবে করতে পারেন import foo from "foo"? এমন কোনও বস্তু ছিল যা ফু ছিল, কারণ প্রথম উদাহরণে আপনার রফতানি করা কাজটি নামবিহীন। @pswg
নোসাহামা

159

export default স্ক্রিপ্ট ফাইল থেকে একক শ্রেণি, ফাংশন বা আদিম রফতানি করতে ব্যবহৃত হয়।

রফতানি হিসাবে লেখা যেতে পারে

export default function SafeString(string) {
  this.string = string;
}

SafeString.prototype.toString = function() {
  return "" + this.string;
};

এটি অন্য স্ক্রিপ্ট ফাইলে এই ফাংশনটি আমদানি করতে ব্যবহৃত হয়

App.js এ বলুন , আপনি পারেন

import SafeString from './handlebars/safe-string';

রফতানি সম্পর্কে একটু

নামটি যেমন বলেছে, এটি স্ক্রিপ্ট ফাইল বা মডিউল থেকে ফাংশন, অবজেক্টস, শ্রেণি বা এক্সপ্রেশন রফতানি করতে ব্যবহৃত হয়

Utiliites.js

export function cube(x) {
  return x * x * x;
}
export const foo = Math.PI + Math.SQRT2;

এটি আমদানি এবং হিসাবে ব্যবহার করা যেতে পারে

App.js

import { cube, foo } from 'Utilities';
console.log(cube(3)); // 27
console.log(foo);    // 4.555806215962888

অথবা

import * as utilities from 'Utilities';
console.log(utilities.cube(3)); // 27
console.log(utilities.foo);    // 4.555806215962888

যখন রফতানি ডিফল্ট ব্যবহৃত হয়, এটি অনেক সহজ। স্ক্রিপ্ট ফাইলগুলি কেবল একটি জিনিস রফতানি করে। cube.js

export default function cube(x) {
  return x * x * x;
};

এবং App.js হিসাবে ব্যবহৃত

import Cube from 'cube';
console.log(Cube(3)); // 27

78

export default function(){}ফাংশনের কোনও নাম না থাকলে ব্যবহার করা যেতে পারে। একটি ফাইলে কেবলমাত্র একটি ডিফল্ট রফতানি হতে পারে। বিকল্প একটি নামযুক্ত রফতানি হয়।

এই পৃষ্ঠাটিexport default মডিউলগুলির সম্পর্কে বিশদ পাশাপাশি অন্যান্য বিবরণ বর্ণনা করেছে যা আমি খুব সহায়ক বলে মনে করেছি।


14
আপনি চাইলে ডিফল্ট এবং নামযুক্ত রফতানি একসাথে ব্যবহার করতে পারেন।
বার্গি

@ গ্রেগ গাম পৃষ্ঠাটি পুরানো। এটি এক্সপ্লোরিং
js.com/es6/ch_modules.html

@rajakvk, সত্য, তবে মূল পৃষ্ঠায় যাঁরা শুরু করছেন তাদের জন্য অনেক বেশি পটভূমি সম্পর্কিত তথ্য রয়েছে।
গ্রেগ গাম

7
এই উত্তরটি গ্রহণযোগ্য প্রশ্নের চেয়ে উত্তম কারণ এটি ব্যাখ্যা করে যা defaultআমার অর্থ এবং আমার কাছে প্রশ্নটি এই শব্দটি সম্পর্কে ছিল।
দরিউস সিকোরস্কি

1
@ দারিউসসিকর্স্কি গৃহীত উত্তরটি এর defaultঅর্থ কী তা বোঝায় যে, ব্রেস ব্যবহার না করে ডিফল্ট রফতানি আমদানি করা যায়। এই উত্তরটি আসলে বেশ ভুল কারণ এটি বলে যে আপনি কেবল defaultতখনই ব্যবহার করতে পারবেন যখন কোনও ফাইলে কেবলমাত্র একটি রফতানি থাকে, যা মোটেই সত্য নয়। আপনার একই ফাইলে বেশ কয়েকটি রফতানি থাকতে পারে তবে অবশ্যই তাদের মধ্যে 1 টি সেট হিসাবে সেট করা যেতে পারে default
realUser404

38

আমি এই পোস্টটি লিখছি কারণ (আমি ধরে নিচ্ছি যে আমি ক্লান্ত হয়ে পড়েছি) আমি যথেষ্ট বুঝতে পারি নি বা এমডিএনও নয়, না অন্য লোকদের বিবরণ এবং কোনও কিছু বোঝার সর্বোত্তম উপায় হ'ল এটি অন্য ব্যক্তিকে শেখানো। এটি ঠিক আমি প্রশ্নের সহজ উত্তর দেখতে পাচ্ছি না।

জাভাস্ক্রিপ্টে "এক্সপোর্ট ডিফল্ট" কী?

ডিফল্ট রফতানিতে আমদানির নামকরণ সম্পূর্ণ স্বাধীন এবং আমরা আমাদের পছন্দ মতো কোনও নাম ব্যবহার করতে পারি।

আমি এই লাইনটি একটি সাধারণ উদাহরণ দিয়ে বর্ণনা করব।

যাক আমাদের 3 টি মডিউল এবং একটি সূচক html রয়েছে:

  • modul.js
  • modul2.js
  • modul3.js
  • index.html

modul.js

export function hello() {
    console.log("Modul: Saying hello!");
}

export let variable = 123;

modul2.js

export function hello2() {
    console.log("Module2: Saying hello for the second time!");
}

export let variable2 = 456;

modul3.js

export default function hello3() {
    console.log("Module3: Saying hello for the third time!");
}

index.html

<script type="module">
import * as mod from './modul.js';
import {hello2, variable2} from './modul2.js';
import blabla from './modul3.js'; //! Here is the important stuff - we name the variable for the module as we like

mod.hello();
console.log("Module: " + mod.variable);

hello2();
console.log("Module2: " + variable2);

blabla();
</script>

আউটপুটটি হ'ল:

modul.js:2:10   -> Modul: Saying hello! 
index.html:7:9  -> Module: 123 
modul2.js:2:10  -> Module2: Saying hello for the second time! 
index.html:10:9 -> Module2: 456 
modul3.js:2:10  -> Module3: Saying hello for the third time!

সুতরাং আর দীর্ঘ ব্যাখ্যা :

আপনি যদি মডিউলের জন্য কোনও জিনিস রফতানি করতে চান তবে 'রফতানি ডিফল্ট' ব্যবহার করা হবে।

সুতরাং জিনিস যে গুরুত্বপূর্ণ "আমদানি হয় blabla './modul3.js' থেকে" - আমরা পরিবর্তে বলতে পেরেছিলেন:

" ./modul3.js" থেকে পামল্যান্ডারসন আমদানি করুন এবং তারপরে পামল্যান্ডারসন (); এটি যখন আমরা 'এক্সপোর্ট ডিফল্ট' ব্যবহার করি ঠিক তখনই এটি কাজ করবে এবং মূলত এটি - এটি যখন আমাদের ডিফল্ট হয় তখন তার নাম দেওয়ার অনুমতি দেয়


পিএস আপনি উদাহরণটি পরীক্ষা করতে চান - ফাইলগুলি প্রথমে তৈরি করুন, তারপরে ব্রাউজারে সিওআরএসকে অনুমতি দিন -> আপনি যদি ব্রাউজারের ইউআরএলটিতে ফায়ারফক্স টাইপ ব্যবহার করছেন: সম্পর্কে: কনফিগারেশন -> "গোপনীয়তা.ফাইল_উনিক_রিগিন" -> পরিবর্তন অনুসন্ধান করুন এটি "মিথ্যা" -> সূচক খুলুন -> কনসোলটি খোলার জন্য F12 টিপুন এবং আউটপুট দেখুন -> উপভোগ করুন এবং কর্স সেটিংস ডিফল্টরূপে ফিরে যেতে ভুলবেন না।

নিখুঁত পরিবর্তনশীল নামকরণের জন্য PS2 দুঃখিত

আরও তথ্য @ link2medium , link2mdn1 , link2mdn2


4
এটি সেরা উত্তর হিসাবে স্বীকৃত হওয়া উচিত তবে আমি আমার আপভোট ব্যবহার করে যা করতে পেরেছি তা করেছি।
জারমোস

1
আপনাকে অনেক ধন্যবাদ!
একত্রিত

1
এই গৃহীত উত্তর হওয়া উচিত উত্থাপিত-হাত
nosahama

16

যেমনটি এই এমডিএন পৃষ্ঠায় ব্যাখ্যা করা হয়েছে

নাম এবং ডিফল্ট রফতানির জন্য আলাদা আলাদা দুটি ধরণের রয়েছে export আপনার প্রতি মডিউলে একাধিক নামী রফতানি থাকতে পারে তবে কেবলমাত্র একটি ডিফল্ট রফতানি [...] বেশ কয়েকটি মান রফতানি করতে নামযুক্ত রফতানি কার্যকর। আমদানির সময়, সংশ্লিষ্ট অবজেক্টের একই নাম ব্যবহার করা বাধ্যতামূলক ut তবে কোনও নামের সাথে একটি ডিফল্ট রফতানি আমদানি করা যায়

উদাহরণ স্বরূপ:

let myVar; export default myVar = 123; // in file my-module.js

import myExportedVar from './my-module' //  we have the freedom to use 'import myExportedVar' instead of 'import myVar' because myVar was defined as default export

console.log(myExportedVar);        // will log 123

6

আমার বিপরীতে ডিফল্ট রফতানি সম্পর্কে গুরুত্বপূর্ণটি হ'ল এটি যে কোনও নামে আমদানি করা যায়!

যদি সেখানে foo.js ফাইল থাকে যা ডিফল্ট রফতানি করে:

export default function foo(){}

এটি বার.জেএস ব্যবহার করে আমদানি করা যায়:

import bar from 'foo'
import Bar from 'foo' //or ANY other name you wish to assign to this import


0

নাম এবং ডিফল্ট রফতানির জন্য দুটি ভিন্ন ধরণের রয়েছে । আপনার প্রতি মডিউলে একাধিক নামের রফতানি থাকতে পারে তবে কেবলমাত্র একটি ডিফল্ট রফতানি। প্রতিটি ধরণের উপরের একটির সাথে মিল রয়েছে। সূত্র: এমডিএন

নামকরণ রফতানি

export class NamedExport1 { }

export class NamedExport2 { }

// import class
import { NamedExport1 } from 'path-to-file'
import { NamedExport2 } from 'path-to-file'

// OR you can import all at once
import * as namedExports from 'path-to-file'

ডিফল্ট রফতানি

export default class DefaultExport1 { }

// import class
import DefaultExport1 from 'path-to-file' // no curly braces {}

// আপনি ডিফল্ট আমদানির জন্য আলাদা নাম ব্যবহার করতে পারেন

import Foo from 'path-to-file' // this will assign any default export to Foo.

-3

এক্সপোর্ট ডিফল্ট একটি একক শ্রেণি, ফাংশন বা আদিম রফতানি করতে ব্যবহৃত হয়।

এক্সপোর্ট ডিফল্ট ফাংশন () {} ব্যবহার করা যেতে পারে যখন ফাংশনের কোনও নাম নেই। একটি ফাইলে কেবলমাত্র একটি ডিফল্ট রফতানি হতে পারে।

আরও পড়ুন

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