Uncaught ReferenceError: $ не определено в веб-пакете 4

Question

я использую webpack 4 для js bundling.jquery работает внутри упакованных файлов. Но не работает внутри html-файла. Ниже показана ошибка

Uncaught ReferenceError: $ не определено

webpack.config.js

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

, и я попытался вызвать jquery внутри файла index.html, но я получаю ошибку undefind

<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" 
})

Используя этот способ, мы определяем 2 глобальные переменные с именами $ и jQuery, которые относятся к jquery,Итак,

Q: Где находится область действия global ?

A: Внутри bundle.js файла или любого js-файла, на который ссылается файл webpack.config.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.Но я все еще хочу использовать jquery в любом файле .html/.php/.cshtml..., как я могу это сделать?

A: Сделать jquery глобальным, используя объект window.Например:

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 мы также можем использовать этот способ.Или используя 'require':

test.js:

var $ = require('jQuery');

Примечание: Во многих случаях window может НЕ являться объектом в веб-пакете, поэтому мынужна строка:

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

Если вы просто напишите:

window.$ = $;

Может появиться сообщение об ошибке, подобное этому:

окно не определено

Надеюсь, это поможет!