Question

我正在尝试将微风用于使用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用于Q，并在启动代码中执行此操作：

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

现在我明白了：

无法找到jQuery

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

为什么微风看不到全局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}' 
    },
   ]
}

将其放在微风脚本的顶部。

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不适用于微风

1 个答案: