magento 2で外部jsに変数を渡す方法

マゼント1

たとえば、このプロトタイプ関数をphtmlで呼び出すことができます

function ABC(){
     var a = '<?php echo $a;?>'
    alert(a);
 }

しかし、magento 2では、このタイプの関数をphtmlに追加できません。 requirejs-config.js

var config = {
map: {
    '*': {
        'exam': 'js/example',
    }
}
};

このように、example.js

 function ABC(){

    alert(a);
 }

phtml

require(['jquery','exam'], function($){
    var a= <?php echo $a; ?>;
});

私はこのように変数を渡そうとしていますが、機能していません、magento 2でphtmlから外部jsに変数を渡す方法

Magento 2のテンプレートからJavaScriptを含めるには、2つの方法があります。<script type="text/x-magento-init">およびdata-mage-init属性です。どちらの方法でも、json定義内のスクリプトにデータを渡すことができます。たとえば、x-magento-initスクリプトタグを使用すると、次のようなテンプレートになります。

<script type="text/x-magento-init">
    {
        "*": {
            "js/example": {
                "a": "<?php echo 'Hello from template' ?>"
            }
        }
    }
</script>

そしてJSファイルには、次のものがあります：

define([
    'jquery'
], function ($) {
    'use strict';

    return function (config) {
        console.log(config); // will output {a: "Hello from template"}
        alert(config.a); // would be equal to alert("Hello from template");
    }
});