javascript - 控制 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

在 polyfill-init.js 中，我这样做:jQuery( document ).ready( ...。这会导致此错误:

Uncaught ReferenceError: jQuery is not defined

如果我尝试使用 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 将所需/导入的脚本保存在单独的 namespace /环境中，因此不会发生冲突。这一切都很好，花花公子，- 但我不知道如何组合两个必需/导入的脚本，所以它们使用相同的命名空间/环境。

...如果我将所有代码复制到 app.js(而不是要求它)，那么它可以工作，但它并不漂亮。一点都不漂亮。

我看了Webpack's documentation查看是否有办法为导入的/所需的脚本定义依赖关系，但要么不存在；或者我不明白。

我还查看了 7 billion ways that this post suggest that I'd do it , - 但我正在尝试弄清楚 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"
        })
    ]