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将所需/导入的脚本保留在单独的命名空间/环境中，以避免冲突。这很好，但我不知道如何将两个所需/导入的脚本合并，使它们使用相同的命名空间/环境。

如果我将所有代码复制到app.js（而不是要求它），那么它就可以工作，但这并不美观。一点也不美观。

我查看了Webpack的文档，看看是否有一种定义导入/所需脚本依赖关系的方法，但要么它不存在，要么我没有理解。

我还查看了此帖子建议的70亿种方法，但我正在尝试弄清楚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？

- Zeth

Answer 1

您可以使用ProvidePlugin插件：

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

- somsgod

---

这是在webpack配置文件中，我想在webpack.mix.js文件中控制所有内容，以便尽可能拥有默认设置。 - Zeth

Answer 2

尝试使用 window.jQuery = require（'jquery'）;

polyfill-init.js 可能在全局范围内查找jQuery，而 var jQuery 仅在此模块的局部作用域中可用。

- Daniel Baranowski

Answer 3

你应该将 JQuery 从 webpack 中外部化。

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/

- Dinuka De Silva