1

我试图了解如何将现有的一组代码移植到 Webpack。这是我的场景：

我将 jQuery 与 Bootstrap、KendoUI、Mockjax、一些 jQuery 插件库（例如 bootbox、jQuery BlockUI）一起使用。以前（使用 requireJS），我能够在我的主应用程序 js 的“require”中的数组中指定这些依赖项，并且所有内容都很好地联系在一起。像这样：

require(['dep1','dep2','...'],function(Dep1,Dep2,...) {do stuff});

使用 Webpack 我遇到了很多问题：

  • 当我打开“分块”功能时，我的模拟端点不再工作

  • 在一种情况下，Webpack 正在创建一个“0.js”文件，我不知道为什么，也不知道如何阻止它这样做。

  • 在各种情况下，似乎有两个（？）jQuery 副本，这样处理程序或对 Kendo 小部件的引用不再起作用

  • 当我尝试从 AMD 样式转换一些包装器代码时（使用“require”数组，后跟带有正式参数的函数），我遇到了很多错误，例如 Bootstrap 找不到 jQuery 或者除了没有 jQuery 事件之外的所有内容似乎都加载了听众正在工作。

我读过很多文章，并尝试过：

  • webpack.ProvidePlugin在我的 Webpack 配置中使用

  • resolve在我的 Webpack 配置对象中为未缩小的 jQuery 放置一个“别名”

  • imports-loader?jQuery=jquery,$=jquery,this=>window在我的module: { loaders: {}}Webpack 配置对象中使用该方法

  • imports-loader在我的主要 js 中使用该方法require

到目前为止，还没有完全奏效。我已经接近了，只是发现（例如）突然一个 Kendo 小部件似乎在它之前工作的 jQuery 选择下不存在。

概括：

我想了解如何进行防弹设置，以便仅存在一个 jQuery 实例，并且将 jQuery 作为依赖/关系的所有内容在我的代码中的任何地方都使用该实例。此外，我想了解如何在使用 Webpack 的“分块”功能时完成这样的事情。如果我将我的 Mockjax 端点（例如）分离到一个单独的文件中，我希望它们能够在任何地方为任何 AJAX 调用运行，无论是通过 Kendo 还是 jQuery。如果我在某处定义了一个 Kendo 小部件（例如下拉菜单），我希望能够使用该$('.some-kendo-widget').data('kendoDropDownList)方法从任何地方获取它的句柄。

如果有人有链接，我很乐意阅读更多文章；我一直在搜索和搜索，但似乎没有合适的词汇来找到我需要的东西。当然，其他人也面临过这种情况。

4

1 回答 1

0

对于像 jQuery UI 这样依赖全局 jQuery 的遗留库，我们必须使用ProvidePlugin：

new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery',
}),

但我只是在这里抓住稻草，祝你好运！

于 2017-02-17T18:25:54.957 回答