Symfony + Webpack 在模板中使用節點包

Question

我正在嘗試在我的 Symfony 項目中實現 Webpack Encore。 我剛剛添加了SweetAlert2和節點（ npm i sweetalert2 --dev ）。

我的“問題”是我沒有意識到如何在安裝后正確使用這個 package。 我一直在閱讀其他問題，但我不明白我需要在哪里導入它。

到目前為止，我已經嘗試過：

在/assets/js/swal.js中創建一個文件。 另外，我也嘗試過使用 ES5：

import Swal from 'sweetalert2';

export const swal = (message, type) => {
    Swal.fire({
        position: 'top-end',
        icon: type,
        title: message,
        showConfirmButton: false,
        timer: 1500
    });
}

將其添加到webpack.config.js作為入口點：

.addEntry('app', './assets/js/app.js')
.addEntry('swal', '/assets/js/swal.js')

使用<script src="{{ asset('js/swal.js') }}"></script>將其作為資產添加到模板中。 也許值得一提的是，我確實嘗試了所有路徑，但 PHPStorm 無法識別其中任何一個。
在 Twig 模板中打印 function 或 class ：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block stylesheets %}{% endblock %}

        {{ encore_entry_link_tags('app') }}
    </head>
    <body>
        {% block body %}{% endblock %}

        {{ encore_entry_script_tags('app') }}
        {% block javascripts %}{% endblock %}

        {% if app.flashes is not empty %}
            <script>
                console.log(swal);
            </script>
        {% endif %}
    </body>
</html>

我也嘗試使用require()導入它，但require沒有定義。

我應該怎么做才能實現這個 function 並在 Twig 模板中呈現它？

Answer 1

您只能在 javascript（或 typescript 等）文件中導入模塊。

假設您在 twig 模板的腳本中有一個 function ：

<script>
  function doSomethingBasic() {
     // do your thing here, then alert the user using Swal
  }
</script>

您應該做的是將 javascript 標記內的所有內容導出到 /assets 文件夾內的 new.js 文件中。

在 /assets 文件夾中創建具有所需名稱的新文件后，應將該條目添加到 webpack.config.js。

例如：您在 /assets 中創建了 newJavascript.js。

在 webpack.config.js 內部：

.addEntry(`literallyAnyName`, `/assets/newJavascript.js`)

然后，在您的 twig 模板中，替換您的腳本標簽（必須是您在 webpack.config.js 中輸入的名稱，在本例中為字面意思是 AnyName）：

{{ encore_entry_script_tags('literallyAnyName') }}

有了這個，你可以在你的 newJavascript.js 中導入 Swal

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block stylesheets %}
          {{ encore_entry_link_tags('literallyAnyName') }}
        {% endblock %}
    </head>
    <body>
        {% block body %}{% endblock %}

        {% set flashes = [] %}
        {% if app.flashes is not empty %}
          {% for label,message in app.flashes %}
             {% set flashes = flashes|merge([{
               'type': label,
               'message': message
             }]) %}
          {% endfor %}
        {% endif %}
            <div id="flashes" data-flashes="{{ flashes|json_encode|e('html_attr') }}"></div>
        {% block javascripts %}
          {{ encore_entry_script_tags('literallyAnyName') }}
        {% endblock %}
    </body>
</html>

newJavascript.js：

const flashes = JSON.parse(document.querySelector(`#flashes`).dataset.flashes);

// Maybe reduce the flash object into one message using flashes.reduce;
if(flashes.length > 0) {

  const msg = flashes.reduce(/* your logic here */);

  Swal.fire({
    position: 'top-end',
    icon: type,
    title: msg,
    showConfirmButton: false,
    timer: 1500
  });

}

這將觸發頁面加載的第二個。 如果需要，您也可以制作按鈕觸發器。

Symfony + Webpack 在模板中使用節點包

問題描述

1 個解決方案

解決方案1
0 2020-07-08 17:48:35

Symfony + Webpack 在模板中使用節點包

問題描述

1 個解決方案

解決方案1 0 2020-07-08 17:48:35

解決方案1
0 2020-07-08 17:48:35