$未定义，即使脚本在 Webpack 捆绑包之后

我已经将Django配置为在前端使用Webpack。我的应用程序的每个页面扩展的基本布局如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {% load static %}
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Invoice App</title>
</head>
<body>
    <div id="app">
    {% block content %}
    {% endblock %}
    </div>
    <script src="{% static 'dist/app.bundle.js' %}"></script>
    {% block scripts %}    
    {% endblock  %}
</body>
</html>

我的 Webpack 条目文件索引.js文件如下所示：

import $ from "jquery"
$(document).ready(function () {
    console.log('hello')
});

然后，在我的一个 django 模板中，我用 jquery 函数填充脚本块，但它说 $ 没有定义，即使它位于 webpack 捆绑包之后，因此在 Jquery 已经导入之后：

{% extends "../index.html" %}

{% block content %}
<p>Hi this is a template <p>
{% endblock %}
{% block scripts %}
<script>
    $(document).ready(function () {
        console.log('Hello Template')
    });
</script>
{% endblock  %}

找到了解决方案：我必须将 $ 作为全局变量，并将此规则添加到我的webpack.config.js中：

{
  test: require.resolve("jquery"),
  use: [
    {
      loader: "expose-loader",
      options: "jQuery"
    },
    {
      loader: "expose-loader",
      options: "$"
    }
  ]
}

相关内容

最新更新

热门标签：