Webpack x Symfony 5 - 未定义 JQuery

Posted 2023-02-16

【中文标题】Webpack x Symfony 5 - 未定义 JQuery

【英文标题】：Webpack x Symfony 5 - JQuery is not defined

【发布时间】：2021-03-01 06:07:42

【问题描述】：

今晚我决定开始学习使用 Webpack 和 Encore。

刚开始，我已经遇到了一个问题：我的模板中不存在 Jquery，但我的控制台中存在。

我是怎么到这里的：

首先我下载了​​依赖：composer require symfony/webpack-encore-bundle; yarn install; yarn add jquery --dev 然后，我构建了我的资产：yarn encore dev --watch 我更新了 assets/app.js 文件，所以它（应该？） 导入 Jquery：... import $ from 'jquery'; ... 最后，我在我的 templates/base.html.twig 文件中编写了代码：

         encore_entry_script_tags('app') 
        <script type="text/javascript">

            $(document).ready(function()
                console.log('ok');
            )
        </script>
       % block javascripts %% endblock %

我在Symfony documentation之后做了所有这些。

我尝试了什么：

我尝试使用import $ from 'jquery' 行，使用const、require 等等... 我尝试使用<script src="asset('build/app.js')"></script>而不是 encore_entry_script_tags('app') 。 我尝试将资产构建为 prod env 而不是 dev。

【问题讨论】：

***.com/questions/2194992/jquery-is-not-defined***.com/questions/8373357/jquery-is-not-defined-error***.com/questions/8886614/…

不，这不起作用。

【参考方案1】：

我通过在 assets/app.js 文件中添加 const $ = require('jquery'); global.$ = global.jQuery = $; 来修复它。

【讨论】：

请不要通过编辑/更新问题来回答 - 在答案空间中发布完整的答案，因为我已经编辑了你的。

【参考方案2】：

当您使用 Webpack Encore 时，您不需要通过 Js 文件手动定义 jQuery。您只需将以下内容添加到您的 webpack.config.js 文件中，即可将其包含在您的 WebpackConfig 中：

Encore
  // your Encore config (outputPath, publicPath, ...)
  .autoProvidejQuery()

相当于：

WebpackConfig.autoProvideVariables(
    $: 'jquery',
    jQuery: 'jquery'
);

或者当使用没有 Encore 的 Webpack 时：

var webpack = require('webpack')

module.exports = 
  plugins: [
    new webpack.ProvidePlugin(
      $: 'jquery',
      jQuery: 'jquery'
    )
  ],

在更改 webpack.config.js 文件时，请确保停止并重新启动 Webpack / Encore。