জাভাস্ক্রিপ্টের পুরানো সংস্করণগুলির কোনও আমদানি, অন্তর্ভুক্ত বা প্রয়োজনীয়তা ছিল না, তাই এই সমস্যাটির জন্য অনেকগুলি ভিন্ন পদ্ধতির বিকাশ করা হয়েছে।
তবে ২০১৫ (ইএস)) এর পরে, জাভাস্ক্রিপ্টের নোড.জেএসে মডিউলগুলি আমদানির জন্য ES6 মডিউলগুলির স্ট্যান্ডার্ড রয়েছে, যা বেশিরভাগ আধুনিক ব্রাউজারগুলি দ্বারা সমর্থিত ।
পুরোনো ব্রাউজারে সাথে সামঞ্জস্যের জন্য, মত বিল্ড সরঞ্জাম Webpack এবং রোলআপ এবং / অথবা মত transpilation সরঞ্জাম হট্টগোল ব্যবহার করা যাবে।
ES6 মডিউল
এর নাম ECMAScript (ES6) মডিউল হয়েছে Node.js সমর্থিত সঙ্গে v8.5 সাল থেকে --experimental-modulesপতাকা, এবং যেহেতু পতাকা ছাড়া অন্তত Node.js v13.8.0। "ESM" সক্ষম করতে (বনাম নোড.জেএস এর পূর্ববর্তী কমনজেএস-স্টাইলের মডিউল সিস্টেম ["সিজেএস"]) আপনি ফাইলগুলিতে ব্যবহার "type": "module"করেন package.jsonবা এক্সটেনশান দেন .mjs। (একইভাবে, নোড.জেএস এর পূর্ববর্তী সিজেএস মডিউলগুলির সাথে লিখিত মডিউলগুলির নাম দেওয়া যেতে পারে .cjsযদি আপনার ডিফল্ট ইএসএম হয়))
ব্যবহার package.json:
{
"type": "module"
}
তারপরে module.js:
export function hello() {
return "Hello";
}
তারপরে main.js:
import { hello } from './module.js';
let val = hello(); // val is "Hello";
ব্যবহার করে .mjs, আপনার থাকতে হবে module.mjs:
export function hello() {
return "Hello";
}
তারপরে main.mjs:
import { hello } from './module.mjs';
let val = hello(); // val is "Hello";
ব্রাউজারগুলিতে ECMAScript মডিউল
ব্রাউজার এর নাম ECMAScript মডিউল সরাসরি লোড করার (Webpack মত আর টুলস প্রয়োজন) জন্য সমর্থন ছিল যেহেতু সাফারি 10.1, ক্রোম 61, ফায়ারফক্স 60 এবং এজ 16. বর্তমান সমর্থন চেক করুন caniuse । নোড.জেএস এর .mjsএক্সটেনশন ব্যবহার করার দরকার নেই ; ব্রাউজারগুলি মডিউল / স্ক্রিপ্টগুলিতে ফাইল এক্সটেনশনগুলি সম্পূর্ণ উপেক্ষা করে।
<script type="module">
import { hello } from './hello.mjs'; // Or it could be simply `hello.js`
hello('world');
</script>
// hello.mjs -- or it could be simply `hello.js`
export function hello(text) {
const div = document.createElement('div');
div.textContent = `Hello ${text}`;
document.body.appendChild(div);
}
Https://jakearchibald.com/2017/es-modules-in-browsers/ এ আরও পড়ুন
ব্রাউজারগুলিতে গতিশীল আমদানি
গতিশীল আমদানি স্ক্রিপ্টটিকে অন্য স্ক্রিপ্টগুলি প্রয়োজনীয় হিসাবে লোড করতে দেয়:
<script type="module">
import('hello.mjs').then(module => {
module.hello('world');
});
</script>
Https://developers.google.com/web/updates/2017/11/dynamic-import এ আরও পড়ুন
নোড.জেএস প্রয়োজন
পুরানো সিজেএস মডিউল শৈলী, যা এখনও নোড.জেজে ব্যাপকভাবে ব্যবহৃত হয়, সেটি হল module.exports/require সিস্টেম।
// mymodule.js
module.exports = {
hello: function() {
return "Hello";
}
}
// server.js
const myModule = require('./mymodule');
let val = myModule.hello(); // val is "Hello"
জাভাস্ক্রিপ্টের ব্রাউজারগুলিতে বাহ্যিক জাভাস্ক্রিপ্ট সামগ্রী অন্তর্ভুক্ত করার জন্য অন্যান্য উপায় রয়েছে যা প্রিপ্রসেসিংয়ের প্রয়োজন হয় না।
এজেএক্স লোড হচ্ছে
আপনি একটি এজেএক্স কল দিয়ে একটি অতিরিক্ত স্ক্রিপ্ট লোড করতে পারেন এবং তারপরে evalএটি চালানোর জন্য ব্যবহার করতে পারেন। এটি সর্বাধিক সোজা উপায়, তবে এটি জাভাস্ক্রিপ্ট স্যান্ডবক্স সুরক্ষা মডেলের কারণে আপনার ডোমেনে সীমাবদ্ধ। ব্যবহার evalএছাড়াও বাগ, হ্যাক এবং সুরক্ষা সমস্যার ক্ষেত্রে দরজা প্রর্দশিত হবে।
আনুন লোড হচ্ছে
ডায়নামিক আমদানির মতো আপনি fetchআনতে ইনজেক্ট লাইব্রেরি ব্যবহার করে স্ক্রিপ্ট নির্ভরতার জন্য সম্পাদনের ক্রম নিয়ন্ত্রণের প্রতিশ্রুতি ব্যবহার করে একটি কল দিয়ে এক বা একাধিক স্ক্রিপ্ট লোড করতে পারেন :
fetchInject([
'https://cdn.jsdelivr.net/momentjs/2.17.1/moment.min.js'
]).then(() => {
console.log(`Finish in less than ${moment().endOf('year').fromNow(true)}`)
})
jQuery লোড হচ্ছে
JQuery এর গ্রন্থাগার লোড কার্যকারিতা উপলব্ধ এক লাইনে :
$.getScript("my_lovely_script.js", function() {
alert("Script loaded but not necessarily executed.");
});
ডায়নামিক স্ক্রিপ্ট লোড হচ্ছে
আপনি HTML এ স্ক্রিপ্ট URL সহ একটি স্ক্রিপ্ট ট্যাগ যুক্ত করতে পারেন। JQuery এর ওভারহেড এড়ানোর জন্য, এটি একটি আদর্শ সমাধান।
স্ক্রিপ্ট এমনকি অন্য একটি সার্ভারে থাকতে পারে। তদ্ব্যতীত, ব্রাউজার কোডটি মূল্যায়ন করে। <script>ট্যাগ পারেন ওয়েবপৃষ্ঠাটি মধ্যে ইনজেকশনের করা যেতে পারে <head>, বা শুধু বন্ধ করার আগে সন্নিবেশিত </body>ট্যাগ।
এটি কীভাবে কাজ করতে পারে তার একটি উদাহরণ এখানে দেওয়া হয়েছে:
function dynamicallyLoadScript(url) {
var script = document.createElement("script"); // create a script DOM node
script.src = url; // set its src to the provided URL
document.head.appendChild(script); // add it to the end of the head section of the page (could change 'head' to 'body' to add it to the end of the body section instead)
}
এই ফাংশনটি <script>পৃষ্ঠার প্রধান বিভাগের শেষে একটি নতুন ট্যাগ যুক্ত করবে , যেখানে srcবৈশিষ্ট্যটি ইউআরএলটিতে সেট করা আছে যা প্রথম পরামিতি হিসাবে ফাংশনটিতে দেওয়া হয়।
এই সমস্যার সমাধান দুটি আলোচিত এবং দেখানো হয় জাভাস্ক্রিপ্ট ম্যাডনেস: ডায়নামিক স্ক্রিপ্ট লোড হচ্ছে ।
স্ক্রিপ্টটি কার্যকর করা হয়েছে তা সনাক্ত করা হচ্ছে
এখন, একটি বড় সমস্যা রয়েছে যা সম্পর্কে আপনার অবশ্যই জানা উচিত। এটি করা বোঝায় যে আপনি দূরবর্তীভাবে কোড লোড করুন । আধুনিক ওয়েব ব্রাউজারগুলি ফাইলটি লোড করবে এবং আপনার বর্তমান স্ক্রিপ্টটি কার্যকর করতে থাকবে কারণ তারা কর্মক্ষমতা উন্নত করতে অবিচ্ছিন্নভাবে সবকিছু লোড করে। (এটি jQuery পদ্ধতি এবং ম্যানুয়াল গতিশীল স্ক্রিপ্ট লোডিং পদ্ধতি উভয়ের ক্ষেত্রেই প্রযোজ্য))
এর অর্থ হ'ল আপনি যদি এই কৌশলগুলি সরাসরি ব্যবহার করেন তবে আপনি আপনার নতুন বোঝা কোডটি পরবর্তী পংক্তিটি বোঝাতে বলার পরে ব্যবহার করতে পারবেন না , কারণ এটি এখনও লোড হবে।
উদাহরণস্বরূপ: my_lovely_script.jsরয়েছে MySuperObject:
var js = document.createElement("script");
js.type = "text/javascript";
js.src = jsFilePath;
document.body.appendChild(js);
var s = new MySuperObject();
Error : MySuperObject is undefined
তারপরে আপনি পৃষ্ঠাটি হিট করে পুনরায় লোড করুন F5। এবং এটি কাজ করে! বিভ্রান্তিকর ...
তাই এটা সম্পর্কে কি করতে হবে ?
ঠিক আছে, আপনি যে লিঙ্কটি দিয়েছেন তাতে লেখকের পরামর্শ মতো হ্যাক আপনি ব্যবহার করতে পারেন। সংক্ষেপে, তাড়াতাড়ি লোকদের জন্য, স্ক্রিপ্টটি লোড হওয়ার পরে কলব্যাক ফাংশনটি চালানোর জন্য তিনি একটি ইভেন্ট ব্যবহার করেন uses সুতরাং আপনি কলব্যাক ফাংশনে রিমোট লাইব্রেরি ব্যবহার করে সমস্ত কোড রাখতে পারেন। উদাহরণ স্বরূপ:
function loadScript(url, callback)
{
// Adding the script tag to the head as suggested before
var head = document.head;
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
// Then bind the event to the callback function.
// There are several events for cross browser compatibility.
script.onreadystatechange = callback;
script.onload = callback;
// Fire the loading
head.appendChild(script);
}
তারপরে আপনি যে কোডটি ব্যবহার করতে চান তার পরে স্ক্রিপ্টটি লম্বা ফাংশনে লোড হওয়ার পরে লিখতে পারেন :
var myPrettyCode = function() {
// Here, do whatever you want
};
তারপরে আপনি এই সমস্ত চালান:
loadScript("my_lovely_script.js", myPrettyCode);
নোট করুন যে স্ক্রিপ্টটি ডিওএম লোড হওয়ার পরে বা তার আগে ব্রাউজারের উপর নির্ভর করে এবং আপনি লাইনটি অন্তর্ভুক্ত করেছেন কিনা তা নির্বাহ করতে পারে script.async = false;। সাধারণভাবে জাভাস্ক্রিপ্ট লোড করার বিষয়ে একটি দুর্দান্ত নিবন্ধ রয়েছে যা এটি নিয়ে আলোচনা করে।
উত্স কোড মার্জ / প্রাকপ্রসেসিং
এই উত্তরের উপরে উল্লিখিত হিসাবে, অনেক বিকাশকারী তাদের প্রকল্পগুলিতে পার্সেল, ওয়েবপ্যাক, বা ব্যাবেলের মতো বিল্ড / ট্রান্সপিলেশন সরঞ্জাম (গুলি) ব্যবহার করে তাদের আসন্ন জাভাস্ক্রিপ্ট সিনট্যাক্স ব্যবহার করতে, পুরানো ব্রাউজারগুলির জন্য পশ্চাদপদ সামঞ্জস্য সরবরাহ করে, ফাইলগুলি একত্রিত করে, মিনিফাইজ করে, কোড বিভাজন ইত্যাদি সম্পাদন করুন