Webpack Encore 导入的 JavaScript 文件不起作用

问题描述

刚刚使用 Symfony 4.4 和 Webpack Encore 开始一个新项目: 刺激来了!我从来没有用过这个,看起来它对我不起作用。我的代码有问题吗? 我只是有一个渲染 base.html.twig 的 Symfony 控制器,这个文件包含这个:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block stylesheets %}{% endblock %}
        <link rel="stylesheet" href="{{ asset('build/app.css') }}">
        <script src="{{ asset('build/app.js') }}"></script>
        {% block javascripts %}{% endblock %}
    </head>
    <body>
        {% block body %}{% endblock %}
        <button data-action="click->hello#greet">Greet</button>
    </body>
</html>

并且 hello_controller.js 包含以下内容:

import { Controller } from 'stimulus'
export default class extends Controller {
  greet () {
    console.log('Hello,Stimulus!',this.element)
  }
  connect () {
    this.element.textContent = 'Hello Stimulus! Edit me in assets/controllers/hello_controller.js'
  }
}

在浏览器中,当我检查代码时,捆绑的 javascript 代码很好地“呈现”,但当我单击“问候”按钮时什么也没有发生。

解决方法

经过一些调查,必须使用 Twig 中的特殊函数插入 Encore 链接。

其实我们应该这样做:

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

代替

<link rel="stylesheet" href="{{ asset('build/app.css') }}">
<script src="{{ asset('build/app.js') }}"></script>

相关问答

依赖报错 idea导入项目后依赖报错,解决方案:https://blog....
错误1:代码生成器依赖和mybatis依赖冲突 启动项目时报错如下...
错误1:gradle项目控制台输出为乱码 # 解决方案:https://bl...
错误还原:在查询的过程中,传入的workType为0时,该条件不起...
报错如下,gcc版本太低 ^ server.c:5346:31: 错误:‘struct...