Управление зависимостями в Webpack

Question

Я использую Laravel-mix и Webpack для объединения и управления сценариями для сайта.

Я мой главный app.js У меня есть следующие строки:

var jQuery = require( 'jquery' );
require( './vendor/polyfill-library.min.js' );
require( './vendor/polyfill-init.js' ); // which is using jQuery

Inpolyfill-init.js Я делаю это: jQuery( document ).ready( ....Это приводит к этой ошибке:

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

Я также получаю эту ошибку, если я пытаюсь смешать ее вместе, используя Laravel-mix, добавивэто к моему webpack.mix.js:

mix.js( [
    'resources/js/app.js',
    'resources/js/vendor/polyfill-library.min.js',
    'resources/js/vendor/polyfill-init.js',
  ], 'assets/js/app.js')

Я предполагаю, что ошибка в том, что Webpack хранит необходимые / импортированные скрипты в отдельных пространствах имен / средах, поэтому никаких конфликтов не возникает.И все это прекрасно, но я не знаю, как объединить два необходимых / импортированных сценария, поэтому они используют одно и то же пространство имен / среду.

... Если я скопирую весь код вapp.js (вместо того, чтобы требовать), тогда это работает, но это не красиво.Совсем не очень.

Я посмотрел документацию Webpack , чтобы посмотреть, есть ли способ определить зависимость для импортированного / обязательного скрипта, но либо его там нет;или я не понимаю

Я также рассмотрел 7 миллиардов способов, которые этот пост предлагает мне сделать , - но я пытаюсь выяснить, как Webpack / Laravel-mix хочет, чтобы я это делалЭто.

---

Итак, мой вопрос ... Есть ли способ, которым я могу сделать что-то вроде этого:

var jQuery = require( 'jquery' );
require( './vendor/polyfill-library.min.js' );
require( './vendor/polyfill-init.js' ); // which is using jQuery

... и дать Webpack знать, что polyfill-init можетиспользовать jQuery?

Answer 1

Вы можете использовать provideplugin:

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

Answer 2

U должен вывести JQuery из веб-пакета.

index.html

<script
  src="https://code.jquery.com/jquery-3.1.0.js"
  integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
  crossorigin="anonymous">
</script>

webpack.config.js

module.exports = {
  //...
  externals: {
    jquery: 'jQuery'
  }
};

polyfill-init.js

import $ from 'jquery';

Подробнее см. Здесьhttps://webpack.js.org/configuration/externals/

Answer 3

Попробуйте window.jQuery = require ('jquery');

polyfill-init.js, вероятно, ищет jQuery в глобальной области видимости, тогда как var jQuery доступен только в локальной области видимости этого модуля.