Как правильно добавить jquery-плагины в объект jquery в webpack?

TL; DR Каков надлежащий способ расширения jQuery-объекта с помощью плагинов, выставления его в глобальном масштабе и использования внешних модулей AMD с модулями ES6 в webpack? Является ли webpack правильным инструментом для этой задачи или SystemJs лучше подходит для рефакторинга устаревшего приложения для модулей ES6?

Я пытаюсь оборачивать голову, работая с модулями webpack и ES6. У меня есть основное приложение jquery, которое я сейчас конвертирую. Я столкнулся со следующими проблемами:

  • поиск лучших практик в рабочем процессе webpack/babel-loader
  • выяснить, какой загрузчик/плагин использовать для этой цели
  • получение ресурсов AMD, таких как jquery и jquery plugins, для приятного воспроизведения с остальными модулями.
  • отображение jQuery globals, расширенное всеми плагинами и jquery-ui

Я полагался на следующие ресурсы: Этот отличный ответ объясняет многое, хотя в нем не упоминается экспортный загрузчик, на который я в основном полагаюсь: qaru.site/info/24949/...

http://webpack.github.io/docs/shimming-modules.html - в документации перечислены многие возможности, но мне не хватает опыта, чтобы решить, какой из них правильный. Кажется предпочтительным использовать ProvidePlugin вместо экспонента-загрузчика. К сожалению, мне не удалось работать с расширенным объектом jQuery. Он также не работал для использования функций модуля, заключенных в теги <script>.

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

В моем webpack.config.js у меня есть следующие загрузчики, чтобы выставить jquery и перевести с помощью babel:

module: {
    loaders: [
        { 
            test: /\.js$/, 
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {modules: 'common'}
        },
        {
            test: /jquery\.js$/,
            exclude: /node_modules/,
            loader: 'expose?jQuery',
        },
        {
            test: /jquery\.js$/,
            exclude: /node_modules/,
            loader: 'expose?$',
        },
        {
            test: /[\/\\]vendor[\/\\]jquery.sparkline\.js$/,
            loader: "imports?define=>false"
        }
    ]
},
amd: { jQuery: true },
// plugins: [
//     new webpack.ProvidePlugin({
//        $: 'jquery',
//        jQuery: 'jquery',
//        'window.jQuery': 'jquery',
//        'root.jQuery': 'jquery'
//    })
// ], ...

В моем файле entry.js я включаю jquery следующим образом:

import 'expose?jQuery!expose?$!./vendor/jquery';
import './jquery/jquery-ui';
import './vendor/jquery.sparkline';

Мне пришлось прокомментировать ProvidePlugin, когда я его использую, jQuery больше не распространяется с пользовательскими плагинами, любая идея, почему это так? Это связано с плагинами с использованием синтаксиса модуля ES6?

Мне нужно было добавить loader: "imports?define=>false" для jquery.sparkline.js, чтобы он был распознан. Это действительно необходимо, или есть лучший способ сделать это?

Относительно jquery-ui мне пришлось найти старую версию, которая не использовала AMD define, чтобы добавить ее в объект jquery. Каким будет правильный способ сделать это?

Любая помощь и советы очень приветствуются, причина для переключения на SystemJs и Jspm также может быть решением.

Ответы

Ответ 1

У меня были проблемы с этим, и похоже, что это было из-за того, что некоторые плагины предполагают $, а другие предполагают jQuery, но следующее в конечном итоге сработало для меня, даже если оно довольно уродливо:

Изменить, обратите внимание, что я тестирую плагины с именем jquery.xyz.js, вам нужно будет соответствующим образом настроить регулярное выражение. Кроме того, я не уверен, что два разных экспонатных загрузчика для jQuery вызывают проблемы, но до сих пор это работает.

// webpack.config.js
...
"module": {
    "loaders": [
        {
            test: require.resolve("jquery"),
            loader: "expose?$!expose?jQuery"
        },
        {
            test:   /jquery\..*\.js/,
            loader: "imports?$=jquery,jQuery=jquery,this=>window"
        }
...