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( ...。导致此错误：

未捕获的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'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"
        })
    ]

Answer 2

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

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

Answer 3

我建议您使用expose-loader。然后，您可以像这样轻松地在两个范围内使用jquery：

   const jquery = require("expose-loader?$!jquery");

Answer 4

U应该从Webpack外部化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/

在Webpack中控制依赖项

4 个答案: