代码之家  ›  专栏  ›  技术社区  ›  Zeth

控制WebPack中的依赖项

  •  3
  • Zeth  · 技术社区  · 6 年前

    我使用LaravelMix和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( ... . 导致此错误:

    未捕获引用错误:未定义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 查看是否有方法为导入的/a必需脚本定义依赖项,但它不在那里;或者我没有得到它。

    我也看了一下 7 billion ways that this post suggest that I'd do it ,-但我想知道Webpack/Laravel混合版是如何让我做到这一点的。


    所以我的问题是…有什么方法可以做到这一点吗?

    var jquery=需要(“jquery”);
    要求(“/vendor/polyfill library.min.js”);
    需要('/vendor/polyfill init.js');//使用jquery
    

    …让Webpack知道 polyfill-init 可以使用 jQuery ?

    4 回复  |  直到 6 年前
        1
  •  2
  •   Daniel Baranowski    6 年前

    try window.jquery=需要(“jquery”);

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

        2
  •  4
  •   AndrewShmig    6 年前

    您可以使用ProvidePlugin:

     plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery"
            })
        ]
    
        3
  •  0
  •   Anatsu    6 年前

    我建议你用 expose-loader . 然后您可以在两个作用域上轻松地使用jquery,如下所示:

       const jquery = require("expose-loader?$!jquery");
    
        4
  •  0
  •   Dinuka De Silva    6 年前

    您应该从Webpack外部化jquery。

    索引文件

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

    web包.config.js

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

    polyfill-init.js公司

    import $ from 'jquery';
    

    请参阅此处的详细信息 https://webpack.js.org/configuration/externals/