jquery-plugins - jQuery Plugin 方法不是函数 - Webpack、VS2017、ASP.NET Core 2.0

Question

下面的代码在 VsCode + webpack 中运行良好

索引.ts:

require("./jQueryPlugin-No-Module");
debugger;
$.fn.test();  // fails here

我正在使用 ProvidePlugin 将 jQuery 注入(inject)到此脚本文件中。

jQueryPlugin-No-Module.js:

(function ($) {
    $.fn.test = function () {
        console.log("jQuery-Plugin called with options");
    };
})(jQuery);

我已将所有代码从 VsCode 复制到 VS2017-ASP.NET Core 项目，并调整了路径。除了上面的插件之外，一切都运行完美， 我收到此错误:

在index.ts中，我放置了一个debugger语句。当我运行应用程序时，它停在那里，插件 $.fn.test 已成功附加到 jQuery。我切换到 Chrome 控制台并在那里执行 $.fn.test(); ，按预期工作。 我返回到源代码 View 并按 F11 执行下一步，然后收到上面的错误。

也许有人之前使用 ASP.NET Core 2 和 VS2017 遇到过这个问题...？

tsc && webpack -d --env.dev --display-modules --progress --display-error-details --config webpack.config.dev.js

Answer 1

Credits go to > spacek33z

问题如下:

在我的 webpack.config.js 中，我有以下 jQuery 别名指向 jquery dist 文件夹:

resolve: {
        alias: {
            'jquery': require.resolve('jquery'), // --> node_modules\jquery\dist\jquery.js

在我的插件部分，我将 ProvidePlugin 配置为使用 jQuery 的 src 版本(注释掉代码):

plugins: [

           new webpack.ProvidePlugin({
            $: "jquery",   // <-- right!
            jQuery: "jquery",  // <-- right!
            //$: "jquery/src/jquery",  // <-- wrong!
            //jQuery: "jquery/src/jquery"  // <-- wrong!          
        }),

这就是为什么我在 jQueryPlugin-No-Module.js 的插件代码中获得另一个 jQuery 副本。

将此 jQuery alias 添加到我的 webpack.config.js 以指向 jQuery dist 文件夹:

resolve: {
        alias: {
            'jquery': require.resolve('jquery'), // resolve to dist folder

现在我没有收到任何错误。