Предыдущие проекты были построены с использованием Grunt, а затем использовались requiredjs, чтобы сделать модульные. Официальный официальный инструмент Defsjs предоставляет Grunt Plugin для сжатия и слияния. Нынешний проект достиг Gulp, и он использует SeaJs в модульности, поэтому, естественно, я также думал о проблеме слияния и сжатия модуля.
Затем, когда я впервые решил эту проблему, она была не очень гладкой. Не было особенно популярного плагина Gulp для слияния и сжатия SeaJS на NPM. Хотя я также читаю много проблем на Seajs GitHub, большинство из них могут объединить все файлы модуля в полный файл. Это определенно не проблема для одностраничных приложений. Тем не менее, для многостраничных приложений, это, очевидно, нарушает ядро загрузки по требованию в идее модульности, поэтому я хочу, чтобы это метод, который может объединяться по требованию на основе модулей, от которых зависит каждая страница.
Значение этого слияния по требованию состоит в том, что, с одной стороны, он объединяет только модули, от которых зависит страница, а с другой стороны, она также может отфильтровать некоторые модули, которые не участвуют в слиянии. Причина для рассмотрения этого заключается в том, что некоторые модули, такие как jQuery, являются все сторонними библиотеками и могут иметь большой файл. Самое главное, что вы вряд ли измените его код, поэтому, если эти модули не объединены в JS страницы, это поможет лучше использовать кэш браузера. В этой статье представлен простой и выполняемый метод для слияния SeaJS в малых и средних проектах, построенных на Gulp.
Примечание. Чтобы проиллюстрировать эффект слияния SeaJS, эта статья содержит демонстрационную демонстрацию, которая имеет две страницы: login.html и regist.html, которые используются для имитации двух независимых файлов в многостраничных приложениях. Вы можете просмотреть его по следующей ссылке:
http://liuyunzhuge.github.io/blog/seajs/dist/html/login.html
http://liuyunzhuge.github.io/blog/seajs/dist/html/regist.html
Принимая ogin.html в качестве примера, при просмотре исходного файла этой страницы вы увидите, что в дополнение к ссылке на SEAJS и соответствующие файлы конфигурации Common.js, оно ссылается только на приложение/вход в систему как основной JS страницы. Этот модуль приложения/входа в систему фактически соответствует js/app/login.js:
Но на самом деле, этот вход.
Перед слиянием login.js его код выглядел следующим образом:
Однако в первых двух скриншотах мы не увидели три файла: mod/mod1.js, mod/mod2.js, deps/fastclick.js. В дополнение к Login.js, мы также видели lib/bootstrap.js, lib/jquery.js, lib/jquery.validate.js. Это эффект слияния. С одной стороны, модули в папке JS/LIB не будут участвовать в слиянии. С другой стороны, другая, другие модули, от которых зависят основные JS страницы, объединены в основной файл JS страницы.
Код, связанный с этой демонстрацией, можно просмотреть по следующей ссылке:
https://github.com/liuyunzhuge/blog/tree/master/seajs
1. Слияние идей
На самом деле, метод относительно прост, я представлю его в конце.
1) Позвольте мне сначала поговорить о структуре папок, которую я организую модуль SeaJS, что похоже на это:
Эта структура заимствована из requirejs и пытается выравнивать организацию файла, которая не должна быть слишком неприятной для малых и средних фронтальных проектов. Функции каждой папки:
1) JS/App хранят основные JS каждой страницы, в основном логика одной страницы и одного JS
2) JS/DEPS хранят сторонние модули, которые необходимо объединить в основную JS
3) Сторонние модули JS/LIB, которые не должны участвовать в слиянии
4) JS/MOD хранят некоторые модули JS, написанные самим собой в каждом проекте
5) common.js - файл конфигурации SEAJS.
2) В общем. Псевдоним может помочь нам обновить адреса загрузки этих файлов при изменении или обновлении файлов в соответствии с JS/LIB:
База настроена на папку JS. В разработке модулей, когда я хочу требовать других модулей, моя привычка состоит в том, чтобы писать идентификаторы модулей, такие как MOD/MOD1 непосредственно без относительной идентификации. Даже если модуль, которым определяется модуль, существует в той же папке, что и он, именно поэтому я установил базовый каталог в папку JS, что немного похоже на корневую каталог сайта.
3) Идея Merge: в основном используйте два плагина Gulp: Gulp-Seajs-Transport и Gulp-Seajs-Concat. Хотя они не очень популярны на GitHub, они хорошо решили мою проблему и очень просты в использовании:
(Для получения дополнительного контента вам необходимо проверить ссылку исходного кода, предоставленную в начале этой статьи, чтобы найти соответствующий файл Gulpfile.js)
Gulp-Seajs-Transport может помочь вам превратить файлы модулей SeaJS из анонимных модулей в названные модули. Например, JS/MOD/MOD1.JS выглядит при этом перед строительством:
Но после транспортной обработки станет:
Это более критический момент в работе SeaJS. Это не похоже на requirejs, просто сделайте Concat напрямую; Сначала он должен быть обработан транспортной задачей, превратить анонимный модуль в именованный модуль и использовать второй параметр определения для описания всех зависимостей этого модуля, как и exptjs. Только после завершения транспортной банки можно использовать для слияний. По причинам, пожалуйста, см. Https://github.com/seajs/seajs/issues/426.
Когда Gulp-Seajs-Concat объединяется, это очень просто. Просто скажите это базовым вариантом. Эта базовая опция согласуется с базовой опцией в js/common.js. Поскольку Gulp-Seajs-Concat может найти другие файлы модуля, это зависит от модулей после базы и транспорта.
4) Этот метод следует использовать при использовании основного JS на странице:
Имя использования параметра должно соответствовать основному идентификатору модуля объединенного основного JS. Например, после JS/App/Login.js Merge, похоже, это:
Первый определенный модуль является основным модулем в объединенном файле. Содержание красной коробки является идентификатором основного модуля. Когда SeaJ использует модуль, имя параметра должно быть таким же, как и этот идентификатор. В противном случае, даже если Seajs успешно загружает этот файл, он не выполнит никакого кода в модуле. Поскольку Seajs имеет правило: принцип соответствия идентификатора и пути, который несколько связан с этим, то есть: когда Seajs использует для содержания нескольких модулей в файле, основной модуль в этом файле будет найден в соответствии с именем параметра использования. Только когда они точно совпадают, их можно найти.
5) Сжатие сжатия: Используйте gulp-uglify:
Но чтобы обратить внимание на Mangle, вы должны исключить модуль Export Export, в противном случае это вызовет неожиданные проблемы.
2. Резюме этой статьи
Хотя содержание этой статьи очень простое, потребовалось много времени, чтобы решить проблему этой статьи, когда я впервые врезался в Gulp и Seajs. Хотя прогресс был намного более плавным, чем моя ситуация в то время, когда я готовился к демонстрации ... несмотря ни на что, я надеюсь, что содержание этой статьи может помочь некоторым друзьям более или менее.