Symfony 4/Webpack Encore : jQuery doesn't work-6ren

Symfony 4/Webpack Encore : jQuery doesn't work

转载作者：行者123 更新时间：2023-12-04 18:00:52

25

4

jQuery 不工作，我不能使用我的引导下拉菜单，自定义 javascript ......

经过 npm run dev (或 npm run build)、app.js文件创建良好并在浏览器中加载。

编译完成，没有任何错误。

我试图启用 .autoProvidejQuery()然后 npm run dev/npm run build ，但没有任何变化。

我正在使用 Symfony 4.1.6

找到解决方案

将 .enableSingleRuntimeChunk() 更改为 .disableSingleRuntimeChunk() 在 webpack.config.js

如果您只是对该行进行评论，它可以工作，但是当您运行 npm run dev 时，您会收到一条警告消息。或 npm run build .

package.json

"devDependencies": {
    "@symfony/webpack-encore": "^0.22.0",
    "bootstrap": "^4.2.1",
    "jquery": "^3.3.1",
    "popper.js": "^1.14.6",
    "webpack-notifier": "^1.6.0"
},
"license": "UNLICENSED",
"private": true,
"scripts": {
    "dev-server": "encore dev-server",
    "dev": "encore dev",
    "watch": "encore dev --watch",
    "build": "encore production --progress"
},
"dependencies": {
    "node-sass": "^4.11.0",
    "sass-loader": "^7.1.0"
}

webpack.config.js

var Encore = require('@symfony/webpack-encore');

Encore
    // directory where compiled assets will be stored
    .setOutputPath('public/build/')
    // public path used by the web server to access the output path
    .setPublicPath('/build')
    // only needed for CDN's or sub-directory deploy
    //.setManifestKeyPrefix('build/')

    /*
     * ENTRY CONFIG
     *
     * Add 1 entry for each "page" of your app
     * (including one that's included on every page - e.g. "app")
     *
     * Each entry will result in one JavaScript file (e.g. app.js)
     * and one CSS file (e.g. app.css) if you JavaScript imports CSS.
     */
    .addEntry('js/app', './assets/js/app.js')
    .addEntry('js/ad', './assets/js/ad.js')
    .addStyleEntry('css/app', './assets/css/app.scss')
    //.addStyleEntry('css/bootstrap', './assets/css/bootstrap.min.css')

    // will require an extra script tag for runtime.js
    // but, you probably want this, unless you're building a single-page app
    .enableSingleRuntimeChunk()

    /*
     * FEATURE CONFIG
     *
     * Enable & configure other features below. For a full
     * list of features, see:
     * https://symfony.com/doc/current/frontend.html#adding-more-features
     */
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    // enables hashed filenames (e.g. app.abc123.css)
    .enableVersioning(Encore.isProduction())

    // enables Sass/SCSS support
    .enableSassLoader()

    // uncomment if you use TypeScript
    //.enableTypeScriptLoader()

    // uncomment if you're having problems with a jQuery plugin
    //.autoProvidejQuery()

    // uncomment if you use API Platform Admin (composer req api-admin)
    //.enableReactPreset()
    //.addEntry('admin', './assets/js/admin.js')
;

module.exports = Encore.getWebpackConfig();

app.js

const $ = require('jquery');

global.$ = global.jQuery = $;

require('bootstrap');

base.html.twig

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

        <meta name="viewport" content="width=device-width, user-scalable=no">

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

        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.0/css/all.css" integrity="sha384-aOkxzJ5uQz7WBObEZcHvV5JvRW3TUc2rNPA7pe3AwnsUohiw1Vj2Rgx2KSOkF5+h" crossorigin="anonymous">

        {# <link rel="stylesheet" href="/css/app.css"> #}
        {% block stylesheets %}{% endblock %}
    </head>
    <body>
        {% include 'partials/header.html.twig' %}

        {% block body %}{% endblock %}

        {% include 'partials/footer.html.twig' %}

        {#<script src="/js/jquery.min.js"></script>
        <script src="/js/popper.min.js"></script>
        <script src="/js/bootstrap.min.js"></script>#}
        <script src="{{ asset('build/js/app.js') }}"></script>
        {% block javascripts %}{% endblock %}
    </body>
</html>

类似话题:

webpack symfony encore jquery third party plugins

Webpack Encore - $ is not defined

最佳答案

如果您有 enableSingleRuntimeChunk()在您的 webpack.config.js您需要添加 <script src="{{ asset('build/runtime.js') }}"></script>在您的基本模板中。

有一个 Twig 助手 encore_entry_script_tags()自动处理这个。

关于Symfony 4/Webpack Encore : jQuery doesn't work，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54080229/

25

4

0

文章推荐： r - 使用 purrr 取消嵌套列表并收集项目

文章推荐： json - 如何将整个 JSON 字符串传递给 Helm 图表值？

文章推荐： amazon-web-services - AWS cloudwatch 正在截断日志

文章推荐： scala - AWS Lambda处理程序抛出带有Scala泛型的ClassCastException

Symfony Webpack/Encore 处理未引用的源图像
我试图让 Webpack 处理和复制 src 中的所有图像文件文件夹并将它们输出到 build使用“image-webpack-loader”的文件夹。据我了解，Webpack 只会对 CSS/SA
symfony - Webpack Encore - $ 未定义
我按照文档使 Webpack Encore 在我的项目中工作。在 webpack.config.js 中导入的 js 文件工作正常，但我在特定页面的 js 中遇到问题:$ is not define
javascript - webpack-encore 项目的版本控制策略
我正在学习使用 webpack-encore并注意到它仅作为 dev 依赖项安装。这是否意味着我应该在开发时编译我的 js 和 css 文件并将它们推送到存储库，然后再推送到生产环境？在我看来，文档
sass - 使用 Encore 将变量传递给 SASS
我正在开发 Symfony 4 应用程序并使用 Symfony 的 Webpack 包装器 Encore。该应用程序将用于在一个数据库上运行多个站点，每个站点都有不同的主题。主题将是 bootstr
Symfony webpack encore twig 函数不起作用
我在 Symfony 4 项目中使用 twig 生成静态 html 页面。我试图用一个简单的循环和 Twig 渲染函数同时生成多个页面。代码如下所示: foreach ($pages as $page
image - 如何获取使用 webpack encore 生成的图像的路径
我想用 phpmailer 将图像包含在我的电子邮件中时遇到一个问题。我曾尝试将 swift mailer 与我的 symfony 应用程序一起使用，但没有用我已经尝试了所有配置(所有主机所有端口所有
Symfony Webpack Encore，将多个JS/CSS文件转换为一个文件
我想从多个css/js文件创建一个css/js文件。多个addEntry无法正常工作，请检查我的代码并提供解决方案。 var Encore = require('@symfony/webpack-en
symfony4 - Dropzone 和 webpack encore
我正在尝试将 dropzone 集成到我的 Symfony 4.1 项目中，但我遇到了麻烦。我通过 npm 将 dropzone 添加到我的项目中:npm install dropzone。在 a
symfony - 找不到错误命令 "encore"。 (单独的后端 webpack)
目录结构 admin/ -> backend webpack js/ .yarnrc webpack.config.js package.json assets/ -> frond w
Symfony 4 webpack + encore 处理模板中的图像
使用 Symfony 4 和 Webpack + Encore + Yarn，我想在我的模板中处理图像，但我不知道如何实现这一点。我将图像放在 /assets/img/logo.png 文件夹中，并
javascript - 类中的箭头函数使用 webpack-encore 抛出错误
配置我正在使用 webpack-encore和我的 symfony编译我的项目 reactjs项目。到目前为止，我已经使用了基本的 webpack.config.js 设置，它应该可以与 react
reactjs - 还不能调用 Encore.setOutputPath() 因为运行时环境似乎没有配置
我正在设置 webpack.config.js，但我错过了 setOutputPath() 的警告 PhpStorm 消息功能我有 PhpStorm 的 2018.3.2 版本，我在 Linux D
Symfony Encore 多 Assets list
我有一个关于 Symfony 3.4 中的 Encore 和 Assets 版本控制的问题。在我的 webpack.config.js我有两种配置。第一个用于 JS 文件，另一个用于编译 .les
javascript - Webpack + Symfony encore - 如何添加库
我在使用 webback 和 encore 方面还很陌生，所以我不知道究竟是哪种方法来处理这个问题。我有一个包含一些 js 文件的网站，它使用 jQuery 和 Bootstrap。我想使用 web
javascript - Webpack Encore 未在基本模板中加载 JavaScript
我在 Symfony 4 项目中使用 Webpack Encore，并且在我的 base.html.twig 中包含 JavaScript 的 Twig 帮助器时: {% block javascri
javascript - Webpack Encore Jquery 最大调用堆栈大小
我在升级到 Symfony 4.1 并切换到 Encore 后遇到问题。 Uncaught RangeError: Maximum call stack size exceeded at _typeo
Symfony 4/Webpack Encore : jQuery doesn't work
jQuery 不工作，我不能使用我的引导下拉菜单，自定义 javascript ...... 经过 npm run dev (或 npm run build)、app.js文件创建良好并在浏览器中加载
webpack - Webpack Encore 中的 enableSingleRuntimeChunk 是什么意思？
如果我的 webpack 配置中有 enableSingleRuntimeChunk 选项，vuejs 将无法工作。你能告诉我为什么吗？最佳答案您必须添加在你的应用程序中。这可能是问题所在。关
symfony - yarn 安装 symfony/webpack-encore
我想在 Symfony 4 项目中使用 Webpack Encore，当我遵循 Yarn 安装指南时 https://yarnpkg.com/lang/en/docs/install/ ，我收到此错误
javascript - Symfony 5/Encore - Javascript 问题
我是 Symfony 的初学者，刚刚完成了我的第一个网站。我构建的网站基于 Bootstrap，我使用一些 jquery 来制作我制作的附加 js 文件。我在使用 Webpack 和 Encore

首页

博学

6Ren·AI

商城

Symfony 4/Webpack Encore : jQuery doesn't work