Пользовательские jQuery расширений / плагинов не найдены при использовании webpack - PullRequest
Новая
       3

Пользовательские jQuery расширений / плагинов не найдены при использовании webpack

2 голосов
/ 25 мая 2020

Я пытаюсь перенести старый проект на webpack. Я написал несколько пользовательских плагинов, которые больше не работают. Хотя я думаю, что эта проблема возникла у кого-то другого, я не смог найти ни одной публикации об этом.

Вот мой base.js, содержащий: 

(function ($) {
    $.fn.my_extension = function () {
       alert("I am found!");
    };
}(jQuery));

Вот как я его использую в моем шаблоне: 

<script type="text/javascript">
    $(document).ready(function() {
        $('#my-id').my_extension();
    });
</script>

Вот мой include в моем index.js: 

// JS Dependencies
import 'jquery';
...

// Custom JS
import '../js/base.js';

А вот мой webpack.config.js: 

var path = require('path');
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');

module.exports = {
    context: __dirname,
    mode: 'development',
    entry: './static/js/index.js',
    output: {
        path: path.resolve('./static/webpack_bundles/'),
        filename: "[name]-[hash].js"
    },
    module: {
        rules: [            
            {
                test: require.resolve('jquery'),
                use: [{
                    loader: 'expose-loader',
                    options: 'jQuery'
                }, {
                    loader: 'expose-loader',
                    options: '$'
                }]
            },
            ...
        ],
    },
    plugins: [
        new BundleTracker({filename: 'webpack-stats.json'}),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            'window.jQuery': 'jquery'
        })]
}

А вот ошибка, которую я получаю при вызове шаблона:

TypeError: $ (...). my_extension не является функцией

Есть идеи, что я делаю неправильно?

Спасибо!

1 Ответ

0 голосов
/ 27 мая 2020

Испытав разные подходы на протяжении многих лет, я понял, что регистрация работает, но jQuery - это не тот же экземпляр, когда я использую его в своем шаблоне.

Моя проблема была решена, наконец, добавлением этой строки на мой base.js. 

require('jquery');

Я не уверен на 100%, но думаю, что expose-loader распознает этот импорт и создает для него глобальную область видимости.

Возможно, это поможет кто-то другой.

...