dev.easy
🎮 Модули - amd, cjs, esm и umd
И еще немного про модули. Какие они были, к чему все пришло, и как это связано с предыдущим постом.
И так, начнём мы с AMD (Asynchronous module definition), это первые трушные модули на фронте с которыми мне пришлось поработать. Наверняка среди вас есть такие же динозавры как и я, которые помнят всю боль и кучу костылей RequireJS. RequireJS (https://requirejs.org/docs/whyamd.html) - это такая древняя JS либа, реализующая AMD спеку. Она появилась за долго до бандлеров(webpack, rollup, etc) и позвала менеджить модули и их зависимости, а также загружать все это дело в рантайме по требованию, да-да код сплитинг в 2012 годах. Но как я и сказал ранее с RequireJS было много боли, в основном с зависимостями. Т.к. способ их определения - тупо массив строк с названиями модулей:
define('myModuleName', ['dep1', 'dep2'], function (dep1, dep2) {
return function () {
// my module code is here
};
});
На небольших проектах это вполне работало и не доставляло больших проблем. Но с ростом проекта массивы зависимостей становились ОГРОМНЫЕ, и это еще хорошо если в компании были прописаны код-стайл гайды и их соблюдали. Т.к. в 2014 году про линтеры никто ничего особо не знал, ну либо меня это обошло стороной 😂 . И как вы уже поняли, у нас стандартов не было, была только большая боль, и если над файлом работало параллельно несколько человек, появлялись конфликты в определении зависимостей, которые было достаточно сложно резолвать(поиск в 2ух массивах по 30+ зависимостей дифов, и это только для одного файла, доходило до того, что мержили по несколько дней, когда сливали два больших фича-бранча). Код выглядел как-то так:
define('myModuleName', [ "require", "jquery", "blade/object", "blade/fn", "rdapi",
"oauth", "blade/jig", "blade/url", "dispatch", "accounts",
"storage", "services", "widgets/AccountPanel", "widgets/TabButton",
"widgets/AddAccount", "less", "osTheme", "jquery-ui-1.8.7.min",
"jquery.textOverflow"],
function (require, $, object, fn, rdapi,
oauth, jig, url, dispatch, accounts,
storage, services, AccountPanel, TabButton,
AddAccount, less, osTheme) {
});
Да, у RequireJS был сахар-синтаксис который позволял подрубать зависимости через require метод, но он медленнее работал, был забагованный и мы его не юзали. В общем на больших проектах мы, скорее всего и не только мы, очень страдали с RequireJS. Страдали до тех пор пока не появились бандлеры, которые могли нормально работать с CJS модулями.
Продолжение в первом коменте...
Читать в ноушен: bit.ly/3smF0pW
#node #frontend #dependencies #longread
157 ·