Метод плагина jQuery не является функцией - Webpack, VS2017, ASP.NET Core 2.0

Приведенный ниже код отлично работает в VsCode + webpack

Index.ts:

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

Я использую ProvidePlugin для внедрения jQuery в этот файл сценария.

jQueryPlugin-No-Module.js:

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

Я скопировал весь код из VsCode в основной проект VS2017-ASP.NET и просто адаптировал пути. Все работает отлично, кроме плагина выше, я получаю эту ошибку:

введите здесь описание изображения

В index.ts я поместил оператор debugger. Когда я запускаю приложение, оно останавливается, плагин $.fn.test успешно подключен к jQuery. Я переключаюсь на консоль Chrome и выполняю там $.fn.test();, работает как положено. Я возвращаюсь к просмотру исходного кода и нажимаю F11, чтобы выполнить следующий шаг, и получаю указанную выше ошибку.

Возможно, кто-то уже сталкивался с этой проблемой при использовании ASP.NET Core 2 и VS2017...?

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


person Legends    schedule 20.02.2018    source источник


Ответы (1)


Кредиты идут > spacek33z

Проблема заключалась в следующем:

В моем webpack.config.js у меня был следующий псевдоним jQuery, указывающий на папку jquery dist:

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

и в моем разделе плагинов я настроил ProvidePlugin для использования версии src jQuery (код закомментирован):

plugins: [

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

Вот почему я получаю еще одну копию jQuery внутри кода плагина в jQueryPlugin-No-Module.js.

Добавление этого jQuery alias в мой webpack.config.js, чтобы указать на папку дистрибутива jQuery:

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

Теперь я не получаю ошибки.

person Legends    schedule 21.02.2018