Есть ли способ заменить требуемый пакет на глобальную переменную в асин c чанках с помощью Webpack? - PullRequest
Новая
       4

Есть ли способ заменить требуемый пакет на глобальную переменную в асин c чанках с помощью Webpack?

1 голос
/ 06 января 2020

Что я хочу:

Все файлы JavaScript / TypeScript, для которых требуется jQuery, но все мои асиновые c куски, для которых jQuery не должны содержать jQuery и используйте вместо него переменную window.jQuery.

Проблема:

Дело в том, что существует плагин jQuery (внешний код), загруженный как чанк, который требует jQuery в своем коде (UMD), поэтому сам чанк содержит свой собственный jQuery после сборки Webpack ...: (

Context:

У меня есть основной файл, который импортирует jQuery и делает его доступным как глобальное в окне из-за устаревшего кода. Затем этот основной файл будет asyn c загружать некоторые чанки.

Один из чанков является внешним пакет (поэтому я не могу изменить код). Это плагин jQuery, написанный с UMD.

Это выглядит примерно так: 

// main.js

import $ from 'jquery';

window.$ = window.jQuery = $; // In reality with expose-loader.

import(/* webpackChunkName: jquery.plugin */ 'jquery-plugin').then(() => {
    $('element').plugin();
});

UMD плагина выглядит вот так: 

// jquery-plugin.js

(function (factory) {
    'use strict';
    if (typeof define === 'function' && define.amd) {
        // Webpack gets here by default.
        define(['jquery'], factory);
    } else if (typeof exports === 'object' && typeof require === 'function') {
        // Webpack gets here if I disable AMD in Webpack config.
        factory(require('jquery'));
    } else {
        // I would like Webpack to get here.
        factory(jQuery); // Browser global
    }
}(function($) { /* plugin code */ })

То, что я пробовал:

Я видел webpack.ProvidePlugin, но, кажется, он применяется ко всем файлам, поэтому мой основной. js не будет содержать jQuery, что было бы большой проблемой.

Игнорирование jQuery в указанной c библиотеке с webpack.IgnorePlugin, но это приводит к тому, что модуль не обнаружена ошибка, поскольку файл больше не содержит jQuery, но код плагина jQuery не изменился и требует jQuery ... 

// webpack.config.js

{
    plugins: [
        new webpack.IgnorePlugin(/^jquery$/, /node_modules\/jquery-plugin/),
    ]
}

jquery .autocomplete. js: 19 Uncaught (в обещании) Ошибка: не удается найти модуль 'jquery'

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

// webpack.config.js

{
    externals: [
        function(context, request, callback) {
            if (/^jquery$/.test(request) && /node_modules\/jquery-plugin/.test(context)){
                return callback(null, 'amd ' + request);
            }
            callback();
        },
    ],
}

external _ "jquery": 1 Uncaught (в обещании) ReferenceError: WEBPACK_EXTERNAL_MODULE__638 is не определено

Может быть, есть несколько вариантов splitChunk, чтобы справиться с чем-то подобным?

IDK: '(

Помощь очень приветствуется ^^ '

Спасибо

Хеймат

...