Question

我正在使用webpack 4进行js bundling.jquery可以在webpacked文件中工作，但是不能在html文件中工作。它在错误

下显示

未捕获的ReferenceError：未定义$

webpack.config.js

 $(document).ready(function () {
        $(".table_attendance").on('click','input[name=exampleRadio]:checked', function () {
            var attendance = {
              name: $(this).closest("tr").find("td:nth-child(1)").text()
            }
                    alert(attendance)
        });

    });

我试图在index.html文件中调用jquery，但是我遇到了未定义的错误

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="col-md-12 text-center">
    <tr>
        <th class="text-center">Name</th>
        <th class="text-center">Attendance</th>

    </tr>
    <tr class="" data-id='1'>
        <td>Md. Khairul Basar</td>
        <td class="form-inline table_attendance">
            <div class="form-check form-check-radio">
                <label class="form-check-label">
                    <input class="form-check-input" type="radio" name="exampleRadio"
                           id="exampleRadios1" value="option1">
                    <span class="form-check-sign"></span>
                    Present
                </label>
            </div>
            <div class="form-check form-check-radio">
                <label class="form-check-label">
                    <input class="form-check-input" type="radio" name="exampleRadio"
                           id="exampleRadios2" value="option2" checked>
                    <span class="form-check-sign"></span>
                    Absent
                </label>
            </div>
        </td>
    </tr>
</table>

Answer 1

在很多情况下都会出现此错误信息。这些是一些

1 /。 jQuery未安装。修正：npm i jquery

2 /。 $指的是jQuery，但作用域不是全局的。

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

通过这种方式，我们定义了两个名为$和jQuery的 global 变量，它们引用了jquery。因此，

问： global 的范围在哪里？

A：内部bundle.js文件或webpack.config.js文件中引用的任何js文件：

entry: {
    'bundle.js': ['./assets/js/site', './assets/sdk/js/app']
}

在文件site.js和app.js中，$和jQuery是2个全局变量。

由于$，每个其他js文件都不能使用jQuery和not defined。

问：我只想将2个文件site.js和app.js编译为文件bundle.js。但是我仍然想在任何.html/.php/.cshtml...文件中使用jquery，该怎么做？

A：使用window对象使jquery是全局的。像这样：

site.js：

(function (global) {
    // $ and jQuery are function here...
    global.$ = $;
    global.jQuery = jQuery;
}(typeof window !== 'undefined' ? window : this));

然后

<!-- bundle.js contains the code which makes $ refers to jquery, so we need to import it first -->
<script src="bundle.js"></script>
<script>
  // it should work
  $(document).ready(function(){
    alert("here");
  });
</script>

在其他js文件中，我们也可以使用这种方式。或使用“要求”：

test.js：

var $ = require('jQuery');

通知：在许多情况下，window可能不是webpack中的对象，这就是我们需要以下行的原因：

typeof window !== 'undefined' ? window : this

如果您只写：

window.$ = $;

它可能会引发如下错误消息：

未定义窗口

希望这会有所帮助！

未捕获的ReferenceError：$在Webpack 4中未定义

1 个答案: