如何解决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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。