javascript - expose-loader 不会公开对公开对象的修改

Question

我正在使用 Webpack 2、Bootstrap 3 和 TypeScript，并尝试将 npm 和打包包集成到现有应用程序中。我正在使用 ProvidePlugin使 jQuery 可用，以及 expose-loader将 jQuery 暴露给外部依赖项。

((<any> global).$ = global.jQuery = $; 或 webpack module: { rules [{}] } 配置的任何组合都不起作用，但最终我得到了以下工作:

plugins: ([
    // make sure we allow any jquery usages outside of our webpack modules
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        jquery: "jquery",
        "window.jQuery": "jquery",
        "window.$": "jquery"
    }),
]),

条目.ts:

import "expose-loader?$!jquery"
import "expose-loader?jQuery!jquery"

但是，当我尝试调用 import "bootstrap" 时我可以打电话$(...).popover()在我的模块中，我可以调用 $(...)或 jQuery(...)在模块外，但我不能调用 $(...).popover在模块之外，我得到了这个错误:

Uncaught TypeError: $(...).popover is not a function

如何使添加到 jQuery 的方法(如 Bootstrap popover 方法)在我的模块之外的全局范围内可用？

Answer 1

我发现了我的问题:PluginProvider 向应用程序公开的 jQuery 版本与 expose-loader 公开的不同。 Bootstrap 正在 PluginProvider jQuery 上初始化，但是 jQuery 的另一个实例被暴露给 window。

为了让它工作，删除 PluginProvider 并只使用 expose-loader。并在需要的地方手动导入 jQuery 作为丢失 PluginProvider 的副作用。