如何解决 Smarty 中的 jQuery 加载错误

Question

我有一些页面脚本会产生常量 ReferenceError: $ is not defined 错误。

jQuery 加载在 html 页面底部，就在标记之前。我添加了一个 DOM 侦听器，因此代码可以等待 JQuery 加载。你能看出什么问题吗，代码如下。

Webpack 配置：

new webpack.ProvidePlugin({
          $: "jquery",
          jQuery: "jquery"
      })

console.log 1 个有效，console.log 2 个无效

{literal}
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function(event) {

    console.log('DOM loaded and parsed 1'); // Works!

        if ($('.add-user').length) {
            const addUser = (callbackFunction) => {
                const data = {
                    signup_name: $('#signup-name').val(),
                    user_name: $('#user-name').val(),
                };

                console.log(data);
                callbackFunction();
                return data;
            }
        }
        console.log('DOM fully loaded and parsed 2'); // Doesn't Work?
});
</script>
{/literal}

Answer 1

确保您已添加 jQuery <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 这可能在页面的 HEAD 或页脚中，只需确保在尝试调用任何其他 jQuery 东西之前加载它。

如果还是报错，尝试添加var $ = jQuery。它应该可以正常工作。

Answer 2

这不是解决方案，但可以帮助您确定问题是否来自 jQuery 尚未加载，如果第二个控制台日志仍未显示，则问题出在与其他事情有关。我将代码的执行延迟了 5 秒，这足以让 jquery 在您的代码执行之前加载

{literal}
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function(event) {

    console.log('DOM loaded and parsed 1'); // Works!
    setTimeout(function(){
        if (jQuery('.add-user').length>0) {
            const addUser = (callbackFunction) => {
                const data = {
                    signup_name: jQuery('#signup-name').val(),
                    user_name: jQuery('#user-name').val(),
                };

                console.log(data);
                callbackFunction();
                return data;
            }
        }
        console.log('DOM fully loaded and parsed 2'); // Doesn't Work?
    },5000)
});
</script>
{/literal}

Answer 3

因此，由于 Webpack 设置，jQuery 似乎不可用。

经过一番研究，我找到了有助于解决错误的答案：

安装暴露加载器：npm install expose-loader --save-dev

并将其添加到 webpack.config.js

module: {
        rules: [            
             {
              // Exposes jQuery for use outside Webpack build
              test: require.resolve('jquery'),
              use: [{
                loader: 'expose-loader',
                options: 'jQuery'
              },{
                loader: 'expose-loader',
                options: '$'
              }]
            }
        ]
}

并确保您还添加了插件

plugins: [
    // Provides jQuery for other JS bundled with Webpack
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ]

如何解决 Smarty 中的 jQuery 加载错误

How do I solve this jQuery loading error in Smarty

javascript

jquery

webpack

smarty