Запутанная настройка загруженного шаблона сайта с проектом webpack ES6 - PullRequest
Новая
       166

Запутанная настройка загруженного шаблона сайта с проектом webpack ES6

2 голосов
/ 06 августа 2020

Мой коллега-начальник настоял на покупке красивой HTML/CSS/JS external template, чтобы использовать ее в качестве базового дизайна для веб-сайта. Этот веб-сайт представляет собой большой проект, который мы разрабатываем с использованием Laravel, SASS и ES6 - Webpack.

Купленный нами шаблон предоставляет полный набор функций, разработанных в SASS и * 1009. * JS. У меня нет проблем с использованием предоставленного SASS и его редактированием, потому что я тоже его использую, но я застрял с частью Javascript.

В первой части я использую файлы из загруженного шаблона :

  • core.min. js
  • скрипт. js

скрипт. js содержит около 1k не минифицированных строк с такими вещами: 

plugins = {
    bootstrapTooltip: $("[data-toggle='tooltip']"),
    bootstrapModalDialog: $('.modal'),
    captcha: $('.recaptcha'),
    rdNavbar: $(".rd-navbar"),
    wow: $(".wow"),
    owl: $(".owl-carousel"),
    swiper: $(".swiper-slider"),
    counter: $(".counter"),
    twitterfeed: $(".twitter"),
    isotope: $(".isotope"),
    viewAnimate: $('.view-animate'),
    selectFilter: $(".select2"),
    rdInputLabel: $(".form-label"),
    bootstrapDateTimePicker: $("[data-time-picker]"),
    customWaypoints: $('[data-custom-scroll-to]'),
    stepper: $("input[type='number']"),
    radio: $("input[type='radio']"),
    checkbox: $("input[type='checkbox']"),
    customToggle: $("[data-custom-toggle]"),
    regula: $("[data-constraints]"),
    search: $(".rd-search"),
    searchResults: $('.rd-search-results'),
    copyrightYear: $(".copyright-year"),
    materialParallax: $(".parallax-container"),
    dateCountdown: $('.DateCountdown'),
    flickrfeed: $(".flickr"),
    responsiveTabs: $(".responsive-tabs")
};

// [...]

if (plugins.copyrightYear.length) {
    plugins.copyrightYear.text(initialDate.getFullYear());
}
// [...]

core.min. js содержит тонны JS зависимостей, это выглядит так: 

/**
 * @module       jQuery Migrate
 * @author       jQuery Foundation and other contributors
 * @see          https://code.jquery.com/jquery/
 * @license      MIT
 * @version      3.0.0
 */
"undefined"==typeof jQuery.migrateMute&&(jQu[...]

/**
 * @module       jQuery Cookie Plugin
 * @see          https://github.com/carhartl/jquery-cookie
 * @license      MIT
 */
!function(e){"function"==typeof define&&de

И так далее, возможно, еще 30 библиотек!

И во второй части я использую свои собственные файлы, в основном ES6 modules.

Проблема в том, что некоторые библиотеки используемые шаблоном, также используются в моем ES6 modules, поэтому в итоге одни и те же библиотеки импортированы несколько раз (один раз в core.min.js, один раз в пакете веб-пакетов ES6). Например, jQuery используется в script.js (через window) и в модулях ES6 (через imports). И иногда у меня есть разные версии одной и той же библиотеки!

Итак, я начал создавать файл vendor.js, импортировал все общие библиотеки и устанавливал их на window: 

import $ from 'jquery';
import moment from 'moment';
import 'bootstrap';

window.$ = window.jQuery = $;
window.moment = moment;

Но, я считаю, что это довольно плохая практика, да и этого недостаточно, и это приводит к ошибкам с некоторыми библиотеками. Например, DataTables, который сложно инициализировать для объекта с глобальной областью действия jQuery и т. Д. Более того, я не могу сделать это со всеми библиотеками, а некоторые из них отсутствуют в npm/yarn ..

Я не знаю, как с этим справиться. Есть ли способ справиться со всеми правильно ли унаследованные вещи, сохраняя при этом рабочую структуру ES6? Или мне полностью отказаться от скачанного шаблона?

1 Ответ

0 голосов
/ 06 августа 2020

Вариант 1:

Как насчет того, чтобы позволить webpack выполнять этот импорт за вас? И вы просто используете глобальные переменные, не импортируя их куда-либо.

Реализовано ProvidePlugin

Например: 

plugins: [
   new webpack.ProvidePlugin({
      $: 'jquery',
      moment: 'moment',
      moduleNotInNpm: '/path/to/module/location.js/'
   });
]

Таким образом, webpack будет обрабатывать объединение этих модулей другим способом.

Вариант 2:

Поместите все эти модули в один (или два, три, не слишком много) root папку, например, в настраиваемых модулях:

node_modules /

custom_modules /

src /

и используйте cacheGroups для создания чанк специально для них. Любой, кто захочет их использовать, должен будет загрузить этот кусок. Это дает преимущество для производительности, поскольку байты этого фрагмента не будут отличаться от сборки к сборке, поэтому, вероятно, почти всегда будут обслуживаться из пользовательского кеша. 

optimization: {
    splitChunks: {
        cacheGroups: {
            thirdpartylibraries: {
                test: /custom_modules|node_modules/,
                name: 'custom_modules',
            },
        }
    }
}
...