webpack ProvidePlugin 不适用于微风答案

【问题标题】：webpack ProvidePlugin doesn't work for breezewebpack ProvidePlugin 不适用于微风
【发布时间】：2018-10-09 20:25:49
【问题描述】：

我正在尝试将微风与使用 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" 
            })
        ]

我得到了

错误：Q 未定义。你想念 Q.js 吗？看 https://github.com/kriskowal/q

所以我在我的代码中添加了一个 polyfill 以使用 ES6 Promises for Q，并在我的启动代码中执行此操作：

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

现在我明白了：

无法找到 jQuery

我很确定 boostrap 会寻找一个全局 jQuery，所以我认为问题很简单。

为什么微风看不到全局jQuery？我该如何解决这个问题？

【问题讨论】：

标签： webpack breeze webpack-4 webpack-provide-plugin

【解决方案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}' 
    },
   ]
}

这将它放在微风脚本的顶部。

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;

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

【讨论】：