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

Question

我正在使用webpack 4进行js bundling.jquery在webpacked文件中工作，但是在html文件中工作，它显示以下错误

未捕获的ReferenceError：未定义$

webpack.config.js

 plugins: [
        new ExtractTextPlugin({filename:'css/app.bundle.css'}),
        new webpack.ProvidePlugin({
            $: "jquery",  
            jQuery: "jquery" 
        })
    ],

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

<script type="text/javascript">
  $(document).ready(function(){
    alert("here");
  })
</script>

Answer 1

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

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

2 /。 $是指jQuery，但范围不是全局的。

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

通过这种方式，我们定义了两个全局变量，分别使用$和jQuery来引用jquery。 所以，

问： 全球范围在哪里？

答：内部bundle.js文件或在refered任何js文件webpack.config.js文件：

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

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

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

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

答：使用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.$ = $;

它可能会抛出这样的错误消息：

窗口未定义

希望这可以帮助！