AlpineJS 和 Webpack Encore (Symfony 5.2.x)

Question

我启动了一个新的 Symfony 5.2.x 应用程序，它只有一些最小的 javascript。为此，我决定使用 AlpineJS。对于静态文件，我使用的是 Webpack Encore。

我阅读了 AlpineJS 文档，我什至有一个示例来说明如何实例化一个新的 AlpineJS 实例。当我包含 JS 时，我没有使用 defer 属性。

这是我的部分代码：

HTML: <nav x-data="navbar()">...</nav>

app.js:

import 'alpinejs';

function navbar() {
    return {
       ...
    }
}

但是，当我刷新页面时，访问控制台日志时出现错误。 “TypeError：navbar() 不是一个函数”。在这种情况下我该怎么办？有人试过将这个框架与 Webpack Encore 一起使用吗？

Answer 1

您可以使用 window.navbar = navbar; 解决此问题，如下所示：

import 'alpinejs';

function navbar() {
    return {
       ...
    }
}

window.navbar = navbar;

对此的解释：捆绑器（如 Webpack）试图将函数限制在其模块范围内，即。不要污染全局 window 范围。但是，当 Alpine.js 读取 x-data="navbar()" 时，它会尝试在全局/window 范围内查找 navbar（即 window.navbar），因此修复。

AlpineJS 和 Webpack Encore (Symfony 5.2.x)

AlpineJS and Webpack Encore (Symfony 5.2.x)

javascript

symfony

webpack

alpine.js