main.jsসমস্ত পৃষ্ঠায় একটি কাস্টম ফাইল লোড করতে (প্রয়োজনীয় জেএস-উপায়ে) এটি একটি ভাল উপায়:
1) তৈরি করুন main.js
main.jsথিম ফোল্ডারের মধ্যে তৈরি করুন
<theme_dir>/web/js/main.js
এই বিষয়বস্তু সহ:
define([
"jquery"
],
function($) {
"use strict";
// Here your custom code...
console.log('Hola');
});
সংক্ষেপে : আমরা শুরুতে নির্ভরতা ঘোষণা করি, যেমন "jquery"। আমরা ফাংশনের প্যারামিটার হিসাবে যেমন ফাংশন মধ্যে নির্ভরতা ব্যবহার করে, এর জন্য পরিবর্তনশীল নাম সংজ্ঞায়িত "jquery" --> $। আমরা আমাদের কাস্টম কোডটি ভিতরে রেখেছি function($) { ... }।
2) main.jsএকটি requirejs-config.jsফাইল দিয়ে ঘোষণা করুন
requirejs-config.jsথিম ফোল্ডারের মধ্যে একটি ফাইল তৈরি করুন :
<theme_dir>/requirejs-config.js
এই বিষয়বস্তু সহ:
var config = {
// When load 'requirejs' always load the following files also
deps: [
"js/main"
]
};
"js/main"আমাদের কাস্টম পথ main.js। ".Js" এক্সটেনশানটির প্রয়োজন হয় না।
আমাদের ম্যাজেন্টোতে সংজ্ঞায়িত requirejs-config.jsঅন্যান্য সাথে মিশে যাবে requirejs-config.js।
প্রয়োজনীয় জেএস main.jsপ্রতিটি পৃষ্ঠায় আমাদের ফাইল লোড করবে , নির্ভরতাগুলি সমাধান করবে এবং অ্যাসিঙ্ক উপায়ে ফাইলগুলি লোড করবে।
Alচ্ছিক: তৃতীয় পক্ষের লাইব্রেরি সহ
এটি তৃতীয় পক্ষের লাইব্রেরি অন্তর্ভুক্ত করার উপায়।
1) লাইব্রেরি এতে যুক্ত করুন web/js:
<theme_dir>/web/js/vendor/jquery/slick.min.js
2)requirejs-config.js এই সামগ্রীটি খুলুন এবং যুক্ত করুন:
var config = {
deps: [
"js/main"
],
// Paths defines associations from library name (used to include the library,
// for example when using "define") and the library file path.
paths: {
'slick': 'js/vendor/jquery/slick.min',
},
// Shim: when you're loading your dependencies, requirejs loads them all
// concurrently. You need to set up a shim to tell requirejs that the library
// (e.g. a jQuery plugin) depends on another already being loaded (e.g. depends
// on jQuery).
// Exports: if the library is not AMD aware, you need to tell requirejs what
// to look for so it knows the script has loaded correctly. You can do this with an
// "exports" entry in your shim. The value must be a variable defined within
// the library.
shim: {
'slick': {
deps: ['jquery'],
exports: 'jQuery.fn.slick',
}
}
};
এটি আসলে যা জটিল তা দেখতে আরও জটিল দেখাচ্ছে।
3) এর মধ্যে নির্ভরতা যুক্ত করুন main.js:
define([
'jquery',
'slick'
],
function($) {
// ...
});