Комментарии 17
Как-то мне кажется в наше время слишком громко называть объединение файлов оптимизацией, особенно оптимизацией кода, оптимизацией загрузки еще может быть. Вообще мне хватает browserify + gulp, всякие поделки не нужны.
+5
Спасибо за статью. У меня вопрос — есть веб-приложение в 15000 строк кода на JS. Есть много файлов, написанных на коленке и по-старинке, не модульно. Я уже несколько месяцев пытаюсь всё это причесать и вот что пока получилось — содержимое каждого файла обернуто в closure, из него экспортируются конкретные функции, то есть глобальный неймспейс чистый (в него кладется всего один объект с именем файла).
Это позволяет точно знать, откуда вызывается та или иная, бывшая ранее глобальной, функция. Также это мне позволило сделать всему коду JSHint и скомпилировать всё через Google Closure Compiler (simple, не advanced).
Я несколько раз пытался перевести все эти файлы в формат AMD, но сталкивался с круговыми зависимостями — каждый «модуль» использует функции из 2-6 других модулей, всего модулей около 25. Насколько я понимаю, RequireJS не умеет нормально работать с круговыми зависимостями и предлагает от них отказаться. Это здорово, но в моем случае пока невозможно.
Вы не можете посоветовать чего-нибудь в такой ситуации? У меня совсем нет опыта в RequireJS и я хотел изучить его на этом проекте, но вот, видимо, не судьба.
Заранее спасибо.
Это позволяет точно знать, откуда вызывается та или иная, бывшая ранее глобальной, функция. Также это мне позволило сделать всему коду JSHint и скомпилировать всё через Google Closure Compiler (simple, не advanced).
Я несколько раз пытался перевести все эти файлы в формат AMD, но сталкивался с круговыми зависимостями — каждый «модуль» использует функции из 2-6 других модулей, всего модулей около 25. Насколько я понимаю, RequireJS не умеет нормально работать с круговыми зависимостями и предлагает от них отказаться. Это здорово, но в моем случае пока невозможно.
Вы не можете посоветовать чего-нибудь в такой ситуации? У меня совсем нет опыта в RequireJS и я хотел изучить его на этом проекте, но вот, видимо, не судьба.
Заранее спасибо.
0
Вы не можете посоветовать чего-нибудь в такой ситуации?
я уже выше написал… но повторюсь…
ES6 + babel + System.js
0
В смысле, всё переписать? Ну, это понятно. Вопрос, что сделать с этим кодом, не переписывая.
0
Почему же? Оставьте как есть, просто переведите все на ES6 (или правильнее ES2015). Код для этого менять не нужно. Зато можно заюзать модули и постепенно причесывать проект. Собирать в прод рекомендую при помощи es6-module-transpiler и потом уже прогонять все через babel (и то если у вас кроме модулей еще чего юзается, например классы или стрелочные функции). Грубо говоря:
// было
window.someModule = (function () {
var somePrivateVar;
return {
someMethod: someMethod
}
function someMethod() {}
}());
// с приходом ES2015
// собственно не особо чего поменялось
// просто можно смело убрать IIFE
var somePrivateVar;
export default {
someMethod: someMethod
}
function someMethod() {}
// много позже может стать:
export default class SomeModule {
constructor() {
}
someMethod () {
}
}
+1
Requirejs… Используйте CommonJS модули в комплекте с browserify или webpack. У них runtime меньше, в мир npm интегрироваться проще.
Статья уже устарела на несколько лет.
Статья уже устарела на несколько лет.
+3
Можно вообще без рантайма собрать при желании. Именно по этой причине я использую es6-module-transpiler — там один из форматтеров — bundler — просто оборачивает все модули в IIFE и в нужном порядке все разруливает. Собирается все на ура, даже с учетом циклических зависимостей. А оверхэд по названиям функций и переменных устраняется аглификаторами.
0
Я не знаю почему, но почему-то все адепты AMD-модулей так же судорожно любят Backbone, bower и grunt. Какое-то иррациональное комбо мазохиста. Вот и тут.
-5
А какая альтернатива? Я так понимаю: requirejs/amd -> browserify/commonjs, bower -> npm, grunt -> gulp, backbone -> react или angular?
0
Ну в этом есть определенная логика. Если человек осознал всю прелесть модульного подхода и загрузчиков модулей (AMD, CommonJS, ES6 модули) то значит радость от использования grunt/gulp и bower он уже получил. А поскольку можно выполнить одну команду и подключить какую-нибудь библиотечку или фреймворк — можно таскать быстреньки и backbone/angular/react/ember… и не писать велосипеды.
+1
AMD проще дружится с bower, чем с npm (потому что авторы npm ниасилили настройку «npm_modules» в конфиге).
browserify тоже не сахар — AMD хотя бы в одном месте конфигурится, и 99% проблем решается добавлением строчки в секцию shim. Еще одно мощное преимущество AMD: несклеенные файлы в dev-окружении — что критично на проекте с поддержкой старых браузеров.
Ну и потом, если человек пришел к необходимости модульной загрузки и MV* на клиенте задолго до появленияхипстеров angular и browserify — то ему ничего не оставалось, кроме как использовать Backbone и AMD, а если стэк у тебя отработан, то не всегда охота его менять.
browserify тоже не сахар — AMD хотя бы в одном месте конфигурится, и 99% проблем решается добавлением строчки в секцию shim. Еще одно мощное преимущество AMD: несклеенные файлы в dev-окружении — что критично на проекте с поддержкой старых браузеров.
Ну и потом, если человек пришел к необходимости модульной загрузки и MV* на клиенте задолго до появления
+2
Вы видимо не внимательно прочитали заголовок статьи. Там не написано «RequireJS и Backbone — панацея от всего на свете». Цель, с которой была написана эта статья — это рассказать о возможности оптимизации проектов на Require, а совсем не популяризация этой библиотеки.
0
Зарегистрируйтесь на Хабре , чтобы оставить комментарий
Оптимизация кода с помощью RequireJS: как это делается и для чего это нужно