webpack ProvidePlugin 不适用于 breeze

Question

我正在尝试将 breeze 与使用 webpack (4.20.2) 的 TypeScript Web 应用程序一起使用。这些条目在我的 npm package.json 文件中：

"dependencies": {
    "bootstrap": "3.3.6",
    "breeze-client": "1.7.1",
    "es6-promise-promise": "1.0.0",
    "jquery": "2.2.1"
  }

我有一个供应商 webpack 配置，其中包含以下内容：

  entry: {
            vendor: [
                'bootstrap',
                'bootstrap/dist/css/bootstrap.css',
                'breeze-client',
                'es6-promise-promise',
                'jquery'
            ]
        },
   plugins: [
            new webpack.ProvidePlugin({ 
                  $: 'jquery', 
                  jQuery: 'jquery', 
                  Promise: 'es6-promise-promise', 
                  Q: "q" 
            })
        ]

我正在

Error: Q is undefined. Are you missing Q.js? See https://github.com/kriskowal/q

所以我在我的代码中添加了一个 polyfill 来为 Q 使用 ES6 Promises，并在我的启动代码中这样做：

import { config } from 'breeze-client'
import { Q } from './lib/my-q-implementation';
config.setQ(Q)

现在我明白了：

Unable to locate jQuery

我很确定 boostrap 寻找全局 jQuery，所以我认为问题是 breeze。

为什么 breeze 没有看到全局 jQuery？我该如何解决这个问题？

Answer 1

非常 hacky，但我使用 imports-loader 让它工作。

module: {
 rules: [
    { 
     test: require.resolve('breeze-client/breeze.debug'), 
     use: 'imports-loader?this=>window,window.jQuery=jquery,window.ko=knockout,global=>{window: this}' 
    },
   ]
}

将其置于 breeze 脚本的顶部。

var window = (window || {});
window.jQuery = __webpack_require__(/*! jquery */ "./node_modules/jquery/dist/jquery.js");
var window = (window || {});
window.ko = __webpack_require__(/*! knockout */ "./node_modules/knockout/build/output/knockout-latest.debug.js");
var global = {window: this};

我不喜欢它，因为它将 jquery 和 ko 放在了全局范围内。

我试过这个，除其他外，（jquery）但它没有用：

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

有了这个，我仍然需要在另一个引用“$”的脚本中执行此操作：

import * as $ from 'jquery';

在我的启动脚本中试过这个也没有成功：

import jQuery as $ from 'jquery';
window.jQuery = window.$ = jQuery;

希望这对某人有所帮助，并希望有人能提出更好的解决方案。

webpack ProvidePlugin 不适用于 breeze

webpack ProvidePlugin doesn't work for breeze

breeze

webpack

webpack-4

webpack-provide-plugin