Посмотрите, как легко вы можете обновить до WebPack

Автор оригинала: FreeCodeCamp Community Member.

Yazan Aabed.

Я написал эту статью, чтобы рассказать о приключении, которое произошло со мной при обновлении проекта Angularjs от Grunt к WebPack.

Вы можете следовать за мной на Twitter Или проверьте мои последние статьи на мой сайт yaabed.com Отказ Кроме того, у меня есть моя публикация в средний blog.yaabed.com Отказ

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

Файлы структурированы с использованием архитектуры модуля, но без использования angular.module. Файлы разделены на папку по имени, как домашняя страница. Папка домой содержит его контроллер, стиль и вид.

Первое, что пришло на ум рефакторировала все приложение для использования WebPack, модулей, Babel и ES6. После исследования можно сделать это без какого-либо рефакторирования кодовой базы. Но есть много проблем, чтобы решить, прежде чем я начну добавлять веб-папак к проекту.

Проблемы, чтобы рассмотреть, прежде чем начать работу

Как решить проблему объекта окна, потому что WebPack показывает файлы как дерево файлов, разговаривая друг с другом.
Как сделать меньше изменений в проекте без проблем слияния.
Как разделить между развитием и производством для WebPack.
Как удалить зависимости Bower, потому что WebPack в основном решает модули из NPM.
Как обновления в WebPack решают большой размер файлов JavaScript.

Начать сломать вещи на шаги

Обновите версию узла от 0.10 до последней версии

Прежде чем я начал перейти к использованию WebPack, мне нужно было обновить версию узла, с которой работает WebPack V3. Но ворчание использует устаревшие вещи – поэтому, когда я обновил версию узла, ничего не работал! Поэтому я начал исправлять ошибки по одному, чтобы убедиться, что модернизация было возможно.

Во-первых, ошибка, начисленная на старой Grunt-Sass & Узел-сасс Отказ Это больше не поддерживается для этой версии узла. Чтобы исправить это, я обновлялся Grunt-Sass от «0,18,1» до «2.0,0», затем обновлена Узел-сасс быть «4.7.2».

Во-вторых, пытаясь улучшить груз от «0,4,5» до «1,0,0» не сработал, потому что хрунтные плагины нуждаются в Grunt @ 0.4.5 в качестве ценностей. Так что я застрял с 0,4,5 версией.

Ошибки исправления, показанные на сервере Express Node

Мне пришлось исправить ошибки с Express Node Server, потому что конструктор BodyParser устарел и необходимо изменить. Я изменился с

Удалить устаревшие вещи

Атрибут отладки из Грунт-Экспресс Потому что он устарел на новую версию узла-инспектора.
Удалите задачу Bower-Install из проекта.

Начните добавлять WebPack

Я добавил WebPack к проекту, используя NPM Установите WebPack - Save-dev Отказ Затем я добавил файл `webpack.config.json`.

Когда я начал этот шаг, я застрял, потому что структура проекта не имеет точки входа. Весь проект зависит от одного источника, который является окном. WebPack нуждается в точке записи, чтобы начать и вывести точку для завершения.

Чтобы решить это, я создал точку входа. Я устанавливаю все необходимые файлы на нее и назвал то же имя на Gruntjs Config для объединения его как старая сборка. Но это займет много времени, потому что в Index.html были включены около 550 предметов.

Чтобы решить эту проблему, я использовал Regexp /"(.*?)"/ig и заменил значения по требуется (SRC) Чтобы получить источники от атрибута SRC и преобразовать его в требуется (SRC). Я вставил его на intry.js в том же порядке, что и старый index.html.

После этого результат был значительным файлом JS, содержащий все сценарии. Но ничего не работало! После расследования того, что происходит, казалось, что WebPack работал по умолчанию в качестве модулей. Если в одном файле есть экспорт или экспорт по умолчанию, ничто не будет экспортировано снаружи, даже если вы включите его, требуется, требуется JS.

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

Добавив это к webpack.config.js Все файлы теперь были доступны как старое поведение!

И все сейчас работало.

Следующий шаг

После того, как я сделал проект, работает с ворчанием, мне нужно было убедиться, что оба Webackack и Grunt работали вместе. Поэтому я сделал тесты, чтобы убедиться, что я ничего не пропустил.

Чтобы это произошло, я создаю новый файл под названием Inject-html.files.json. Этот файл содержит все исходные файлы для использования с UsemenPrepare На Grunt и WebPack для создания записей в виде нескольких элементов в качестве массивов, взятых из файлов inject-html json.

Обновите старый файл Crunt Config

Добавить файлы в CONCAT

Проверьте, создан ли WebPack, затем удалите JS из конфигураций

Добавить новый сценарий NPM

WebPack.config.js Файл

WebPack.prod.js Файл

Мотивации

Обслуживание и качество кода

Решите проблему с созданием файлов, так как проект быстро растет.
Решите проблему, что на окне слишком много вещей, прикрепленных к окну.
Сделайте кодовую базу легче понять.

Эффективность развития

Bower теперь устарел.
Не могу использовать какие-либо вещи на пакетах NPM, поскольку процесс сборки не предоставляет этого.

Представление

Размеры файлов растут каждый день каждый день, поэтому нужно ввести решение для разделения кода.
Возможность разделить файлы и отложить нагрузку до тех пор, пока не будет экономит ненужный перевод и анализ.

Расщепление кода

После использования, расщепление кода WebPack будет легче использовать.
Разделите новые функции в модули.

Наконец, использование пакетов NPM – это чейнджер игры. Цель состояла в том, чтобы сделать кодовую базу легкой для других разработчиков. Кроме того, мы доказали, что можно с умами возможным модернизировать вашу систему, даже если ваша кодовая база ужасна.

Переписывание всего приложения – это катастрофа, потому что вы потенциально тратите годы тяжелой работы. Вместо этого попробуйте сделать вашу кодовую базу более читаемой, поддерживаемой и модульной. Когда старый код нуждается в рефакторинге, вы можете сделать это шагом за шагом.

Не застрять со своей старой кодовой базой и сказать, что вы ничего не можете сделать. Попробуйте внести изменения самостоятельно – жить с новыми вещами, новыми обновлениями и новыми технологиями, которые сделают вас счастливыми.

Это мое впервые написание людей! Если вам понравилась эта статья, пожалуйста, поделитесь этим с другими людьми вокруг вас.

Я пишу в blog.yaabed.com Отказ Если вам понравилось эту статью, пожалуйста, обязательно поделитесь этим с другими людьми. И не забудьте ударить кнопку следуйте за дополнительные статьи, которые также Подпишись на меня в Твиттере .

Учебная академия WebPack Учебная академия WebPack существует для предоставления выкупаемого контента высококачественного обучения, посвященного WebPack Open Source … WebPack.academy От ворчания и беседы до WebPack, Babel и пряжи – мигрируют устаревшую систему сборки Front-End Система сборки, которую я унаследовал для международного портала данных генома рака, был довольно современным … Medile.com Как постепенно переключиться на WebPack Это вторая из серии из двух частей, почему и как мы переключили нашу систему объединения JavaScript из специальной системы … Medile.com Почему мы перешли на WebPack Это первая из двух частей серии, почему и как мы переключили нашу систему объединения JavaScript из специальной системы … Medile.com Первые шаги от Grunt к WebPack Начало работы с WebPack после использования Grunt AdvancedWeb.hu Путешествие в WebPack – блог плотности сервера Керри Галлагером, плотности сервера. Опубликовано 6 января 2016 года. За последние пару лет мы построили … blog.serverdense.com.