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

控制WebPack中的依赖项

webpack javascript

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 年前

Daniel Baranowski 6 年前

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

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

AndrewShmig 6 年前

您可以使用ProvidePlugin:

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

Anatsu 6 年前

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

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

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/

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

3 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

3 月前

Alex · 在轻量级中同时解构和不解构变量

3 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

3 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

3 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

4 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

4 月前

user3472810 · Angular@Output/EventEmitter返回undefined

4 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

4 月前