Webpack x Symfony 5 - 未定义 JQuery

Question

今晚我决定开始学习使用 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。

Answer 1

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

Answer 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。