마 젠토 2 : 테마에 requirejs-config.js?

requirejs-config.jsMagento 테마를 통해 파일 을 포함 (또는 RequireJS 구성) 할 수 있습니까? 아니면 Magento 모듈 전용 기능입니까? 테마 구조에 대한 개발자 문서 정보 는 현재까지 모호합니다.

개발자 문서에는 RequireJS에 대한 언급이 없지만 테마에는 web자바 스크립트가 번들로 제공 될 수 있음을 의미합니다. 자바 스크립트를 테마와 함께 번들 할 수있는 경우, RequireJS 모듈을 테마와 번들 할 수 있고 RequireJS 모듈을 테마와 번들 할 수 있으면 해당 모듈에 특정 RequireJS 구성이 필요할 수 있습니다.

내 순진한 가정은 테마가 될 것입니다 이 기능이 있지만이 방법은 하나 또는 다른에있는 모든 문서를 찾을 수 없어, 그리고 젠토의에 필요한 코드 동굴 탐험을하고 지출이없는 오후하지 않은 requirejs-config.js파일을 포함합니다.

실제로 테마 모듈 디렉토리에 require-config.js를 포함시킬 수 있습니다.

문제는 (실제로 프론트 엔드 팀의 경우) 구성을 재정의하는 것이 아니라 구성을 확장하는 가능성이없는 것 같습니다.

따라서 여기에서 Magento_Theme 모듈을 예로 들어, <theme_base_dir>/Magento_Themedir 아래에 require-config.js를 추가하면 생성 된 require-config.js 파일에 구성이 추가되고 Magento_Theme 모듈의 구성도 추가됩니다.

귀하의 질문에 대답하기 위해 테마 테마 <theme_base_dir>/web와 테마 루트 디렉토리 아래에 require-config.js를 추가하려고했습니다 . 둘 다 작동하지 않았다. 업데이트 : 실제로 아래 답변에 따라 테마베이스 디렉토리에 배치하면 가능합니다

따라서 모든 모듈에서 js 요구 사항을 추가 할 수 있기 때문에 대답은 기본적으로 그렇습니다 (테마 관련 js 파일은 <theme_base_dir>/Magento_Themedir 아래에 배치하는 것이 가장 좋습니다 )

비록 말할 것이지만, 모듈 밖에서 테마 관련 require-config.js를 추가 할 가능성이 있어야하며 (어쩌면 주어진 모듈을 비활성화 할 수도 있습니다) 또한 모듈 require-config.js를 재정의 할 수 있어야합니다.

둘 다 가능하지 않은 것 같습니다.

=== 업데이트 ===

실제로 테마별로 require-config.js를 갖는 것이 가능해 보입니다. 아래 @Gareth Daine의 답변 참조

좋아, 나는 그것을 해결했다고 생각하고 문서가 모호하고 프로세스를 명확히하기 위해 업데이트해야한다고 생각합니다.

내 테마의 루트와 루트에 대해 각각 및 디렉토리 내 requirejs-config.js에서 각각을 이동 했으며 이제 RequireJS 구성이 다른 모든 포함과 함께 기본 으로 병합되었습니다 .web/jswebMagento_Theme<Vendor>/<theme>requirejs-config.js

따라서 requirejs-config.js테마 / 모듈 요구 사항에 따라 다음 위치에 파일 을 포함해야 합니다.

테마 레벨

app/design/frontend/<Vendor>/<theme>/requirejs-config.js

모듈 레벨

app/design/frontend/<Vendor>/<theme>/<Module_Name>/requirejs-config.js

따라서 requirejs-config.js테마 에서 구성 요소를 경로에 매핑 한 다음 shim종속성을 선언하는 데 사용해야 합니다.

var config = {
    map: {
        'component': 'js/component'
    },
    shim: {
        'component': {
            deps: ['jquery']
        }
    }
};

그런 다음 <script>내려갈 경로 인 경우 태그 를 통해 구성 요소의 초기화를 유지하기위한 템플릿을 만들어야합니다 (.phtml 파일의 요소에 직접 첨부하지 않은 경우).

<script type="text/x-magento-init">
    {
        "*": {
            "js/component": {} // Not entirely sure what {} is and what I'm passing here
        }
    }
</script>

또는 요소에 바인딩하십시오.

<script type="text/x-magento-init">
    {
        "#element": {
            "js/component": {} // Not entirely sure what {} is and what I'm passing here
        }
    }
</script>

그런 다음 레이아웃 지침에 .phtml 템플릿을 포함시키기 만하면됩니다. 예를 들어, body 노드 아래에있는 default.xml곳에 배치 app/design/frontend/<Vendor>/<theme>/Magento_Theme/layout하고 참조했습니다.

<block class="Magento\Framework\View\Element\Template" name="theme.js" template="Magento_Theme::html/js.phtml" />

이것을 논평 할 충분한 담당자가 없었지만 Gareth의 대답은 나에게 효과적이지 않았다는 점에 주목하십시오.

var config = {
    map: {
        '*': {
            'component': 'js/component'
        }
    },
    shim: {
        'component': {
            deps: ['jquery']
        }
    }
};

'component': 'js / component'를 감싸는 것은 '*':{}속임수입니다.

또한 템플릿 파일을 만드는 대신 아래 코드를 맨 위에 추가했습니다. app/design/frontend/<Vendor>/<theme>/Magento_Theme/layout/default.xml

    <referenceContainer name="after.body.start">
        <block class="Magento\Framework\View\Element\Text" name="jquery.bootstrap">
            <arguments>
                <argument translate="true" name="text" xsi:type="string"><![CDATA[<script type="text/x-magento-init">{"*":{"jquery.bootstrap":{}}}</script>]]></argument>
            </arguments>
        </block>
    </referenceContainer>

requirejs-config.js다음과 같이 테마에 예 를 추가 할 수 있습니다. 이것이 내 magento2 사용자 정의 테마에 dotdotdot 라이브러리를 추가하는 방법입니다.

1. 경로에 따라 테마에서 Js 라이브러리를 다운로드하여 추가하십시오.

// app/design/frontend/Namespace/themename/web/js/jquery.dotdotdot.min.js

2. 다음과 같이 테마의 requirejs 파일을 작성하고 requirejs에 새로 추가 된 라이브러리를 알리십시오.

// app/design/frontend/Namespace/themename/requirejs-config.js
var config = {
   map: {
       '*': {
           dotdotdot: 'js/jquery.dotdotdot.min',
       }
   }
};

3. 테마의 기본 js 파일에 추가 된 라이브러리를 다음과 같이 사용하십시오.

// app/design/frontend/Namespace/themename/web/js/main.js
require([ 'jquery' , 'dotdotdot' , 'domReady!'],function($){
    $(window).load(function() {
        //custom js code
        /* $(".product-item-name").each(function(){
            $(this).dotdotdot(); 
        }); */
    });
});

4. 다음과 같이 테마의 js 파일을 사이트 헤드에 포함시킵니다.

// app/design/frontend/Namespace/themename/Magento_Theme/layout/default_head_blocks.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <link src="js/main.js"/> 
    </head>
</page>

magento2의 모든 페이지에서 외부 JS 라이브러리 및 사용자 정의 파일을 추가 할 수 있습니다.