main.jsRequireJS-way의 모든 페이지에 사용자 정의 파일 을로드하려면 다음과 같이하십시오.
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.jsMagento에 정의 된 다른 것과 병합 될 것 입니다.
RequireJS는 main.js각 페이지에 파일을로드하여 종속성을 해결하고 비동기 방식으로 파일을로드합니다.
선택 사항 : 타사 라이브러리 포함
타사 라이브러리를 포함시키는 방법입니다.
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($) {
// ...
});