معمولن وقتی با جاوا اسکریپت یا تایپ اسکریپت برنامه مینویسیم به کتابخانه های مختلفی نیاز داریم که آن ها را برای استفاده در کدمان import میکنیم اما ببینیم کلیدواژه import چه قابلیت هایی دارد و چطور باید از آن استفاده کنیم.
با import میتوانیم کلاس ها یا متدهایی که توسط یک ماژول اکسپورت شده اند را در کد خودمان استفاده کنیم. ضن اینکه باید توجه داشته باشیم import استاتیک با شبه تابع import() هم تفاوت هایی دارد و یکسان نیستند.
از import به شکل های زیر میتوان از آن استفاده کرد
import defaultExport from "module-name";
که defaultExport نام آیتمی است که از آن ماژول به صورت دیفالت اکسپورت شده است. یعنی به چنین شکلی:
export default defaultExport;
که در ادامه شکل های دیگر default export هم خواهیم دید.
import * as name from "module-name";
در مثال name در واقع نام ماژولی که ایمپورت کرده‌ایم میشود و شبیه یک namespace عمل میکند، که پیش از استفاده از ممبرهایی که ماژول اکسپورت کرده از این نام استفاده میکنیم. مثلن اگر آن ماژول ممبری به نام aUsefulFunction را اکسپورت کرده باشد، پس از ایمپورت کردن آن به شکل بالا به صورت زیر قابل استفاده خواهد بود.
name.aUsefulFunction();
import { export1 } from "module-name";
ایمپورت کردن یک ممبر خاص از یک ماژول
کلن به چی میگیم ماژول؟
import { export1 as alias1 } from "module-name";
میتوانیم به ممبری که ایمپورت میکنیم یک نام مستعار هم بدهیم
سینتکسهای دیگری هم وجود دارند که به این شکل هستند
import { export1 , export2 } from "module-name";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export1 [ , [...] ] } from "module-name";
همینطور که میبینیم این امکان وجود دارد که یک اکسپورت پیش فرض در ماژول داشت که میشود به این شکل ایمپورت کرد، این اکسپورت میتواند یک آبجکت، فانکشن یا یک کلاس باشد
همچنین میشود این دیفالت با بقیه ایمپورت ها هم ترکیب شود که در این صورت باید قبل از بقیه ظاهر گردد
import defaultExport, * as name from "module-name";
import "module-name";
این ایمپورت زمانی به کار میرود که نیاز به چیزی که اکسپورت شده نداشته باشیم و در واقع به اثرات جنبی این ماژول نیاز داشته باشیم، یعنی اثراتی که لود شدن آن روی اسکوپ گلوبال می گذارد. البته توصیه میشود که در ماژول چنین ساید افکت هایی نداشته باشیم ولی روی بعضی از لایبرری هایی که استفاده میکنیم کنترلی نداریم
var promise = import("module-name");
این هم که ایپورت داینامیک هست که کمک میکند یک ماژول را به صورت داینامیک لود کنیم به عنوان مثال فقط تحت شرایطی اقدام به لود یک ماژول کنیم که این کار با ایمپورت استاتیک قابل انجام نیست.
**اکسپورت**
حالا ببینیم که اکسپورت کردن از ماژول چه شرایطی دارد و چطور میتواند انجام شود
طبق تعریفی که در سایت موزیلا عنوان شده اکسپورت برای استخراج live bindings به توابع، آبجکت ها و مقادیر ابتدایی از یک ماژول به کار میرود تا در یک برنامه دیگر با ایمپورت بتوانیم آنها را استفاده کنیم. مقدار یک ایمپورتد بایندینگ ممکن است توسط ماژولی که آن را اکسپورت کرده تغییر کند و این تغییر در ماژولی که آن را ایمپورت کرده قابل مشاهده خواهد بود.
ماژولهایی که اکسپورت شده اند در حالت strict mode خواهند بود. فارق از اینکه اکسپلیسیت عنوان شده باشد یا خیر.
همچنین اکسپورت در اسکریپتهای امبد شده قابل استفاده نیست.
معنی لایو بایندینگ این است که تغییر در ماژول ایمپورت شده در ماژولی که آن را ایمپورت کرده مشاهده میشود و مثل کپی نیست برخلاف چیزی که به عنوان مثال در CommonJS اتفاق می افتد
https://stackoverflow.com/a/57552682/1306720
دو نوع اکسپورت وجود دارد
اکسپورت دارای نام که هر ماژول میتواند چند اکسپورت با نام داشته باشد و اکسپورت پیش فرض که هر ماژول فقط یک اکسپورت پیش فرض میتواند داشته باشد
// Exporting individual features
export let name1, name2, …, nameN; // also var, const
export let name1 = …, name2 = …, …, nameN; // also var, const
export function functionName(){...}
export class ClassName {...}
// Export list
export { name1, name2, …, nameN };
// Renaming exports
export { variable1 as name1, variable2 as name2, …, nameN };
// Exporting destructured assignments with renaming
export const { name1, name2: bar } = o;
// Default exports
export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };
// Aggregating modules
export * from …; // does not set the default export
export * as name1 from …; // ECMAScript® 2O20
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
export { default, … } from …;
اکسپورت دارای نام وقتی به کار می آید که چند تا مقدار را میخواهیم اکسپورت کنیم و وقتی میخواهیم ایمپورت کنیم باید آن ها را حتمن در آکولاد بنویسیم و با همان نامی که اکسپورت شده اند.
اما یک اکسپورت دیفالت میتواند به هرنامی ایمپورت شود
مثلن:
// file test.js
let k; export default k = 12;
// some other file
import m from './test'; // note that we have the freedom to use import m instead of import k, because k was default export
console.log(m); // will log 12
التبه میشود اکسپورتها را برای جلوگیری از تداخل نام با as تغییر نام داد
export { myFunction as function1,
myVariable as variable };
یک کار دیگر که میشود با اکسپورت کرد این است که از ماژول دیگری ایمپورت کنیم و بعد اکسپورت کنیم، که چنین کاری برای تجمیع یک سری ماژول میتواند مفید باشد
با چنین سینتکسی
export { default as function1,
function2 } from 'bar.js';
که معادل موارد زیر خواهد بود
import { default as function1,
function2 } from 'bar.js';
export { function1, function2 };
با این تفاوت که در اولی موارد fucntion1 , function2 قابل استفاده در همین ماژول نیستند و مستقیمن اکسپورت شده اند
و اینکه در مورد مقادیر پیش فرض (default) نمیشود چنین کاری کرد
import DefaultExport from 'bar.js'; // Valid
export DefaultExport from 'bar.js'; // Invalid
پس راه درست اکسپورت کردن به صورت زیر است
export { default as DefaultExport } from 'bar.js';
یک نکته این که ماژولی که اکسپورت دارد را وقتی میخواهیم با تگ اسکریپت لود کنیم حتمن تایپ آن را باید module ست کنیم تا درست تفسیر شود
و اینکه یک ماژول رو نمیشود با file:// URL
لود کرد و با خطای CORS مواجه میشویم و باید از HTTP Server استفاده شود.
مرجع:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import