时间戳

首页 > 解决方案 > Symfony + Webpack 在模板中使用节点包

javascript - Symfony + Webpack 在模板中使用节点包

问题描述

我正在尝试在我的 Symfony 项目中实现 Webpack Encore。我刚刚添加了带有节点 ( ) 的SweetAlert2 。npm i sweetalert2 --dev

我的“问题”是我不知道安装后如何正确使用这个包。我一直在阅读其他问题，但我不明白我需要在哪里导入它。

到目前为止，我已经尝试过：

  1. 在/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
    });
}
  1. 将其添加webpack.config.js为入口点：
.addEntry('app', './assets/js/app.js')
.addEntry('swal', '/assets/js/swal.js')

  1. 使用 .将其作为资产添加到模板中<script src="{{ asset('js/swal.js') }}"></script>。也许值得一提的是，我确实尝试了所有路径，但 PHPStorm 无法识别其中任何一个。

  2. 打印 Twig 模板中的函数或类：

<!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未定义导入它。

我应该怎么做才能实现这个功能并在 Twig 模板中渲染它？

标签： javascriptphpnode.jssymfonywebpack

解决方案

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

假设您在 twig 模板的脚本中有一个函数：

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

您应该做的是将 javascript 标记内的所有内容导出到 /assets 文件夹内的新 .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
  });

}

这将触发页面加载的第二个。如果需要，您也可以制作按钮触发器。

推荐阅读