Để tải một main.jstệp tùy chỉnh trên tất cả các trang (theo cách RequireJS), đây là một cách hay:
1) Tạo main.js
Tạo main.jstrong thư mục chủ đề
<theme_dir>/web/js/main.js
với nội dung này:
define([
"jquery"
],
function($) {
"use strict";
// Here your custom code...
console.log('Hola');
});
Tóm lại : chúng tôi tuyên bố phụ thuộc khi bắt đầu, ví dụ "jquery". Chúng tôi định nghĩa là tham số của hàm, tên biến để sử dụng phụ thuộc trong hàm, vd "jquery" --> $. Chúng tôi đặt tất cả các mã tùy chỉnh của chúng tôi trong function($) { ... }.
2) Khai báo main.jsvới một requirejs-config.jstập tin
Tạo một requirejs-config.jstệp trong thư mục chủ đề:
<theme_dir>/requirejs-config.js
với nội dung này:
var config = {
// When load 'requirejs' always load the following files also
deps: [
"js/main"
]
};
"js/main"là đường dẫn đến tùy chỉnh của chúng tôi main.js. Phần mở rộng ".js" là không bắt buộc.
Chúng tôi requirejs-config.jssẽ được hợp nhất với requirejs-config.jsđịnh nghĩa khác trong Magento.
RequireJS sẽ tải main.jstệp của chúng tôi , trên mỗi trang, giải quyết các phụ thuộc và tải tệp theo cách không đồng bộ.
Tùy chọn: Bao gồm thư viện của bên thứ ba
Đây là cách để bao gồm các thư viện của bên thứ ba.
1) Thêm thư viện vào web/js:
<theme_dir>/web/js/vendor/jquery/slick.min.js
2) Mở requirejs-config.jsvà thêm nội dung này:
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',
}
}
};
Nó trông phức tạp hơn những gì nó thực sự là.
3) Thêm phụ thuộc trong main.js:
define([
'jquery',
'slick'
],
function($) {
// ...
});