Посмотрите, как легко обновить Webpack

posmotrite kak legko obnovit webpack?v=1656639019

Иоанн Аобед

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

0*H9-QqXnBR8Rr6MhF
Фото Тайлера Фронты на Unsplash

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

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

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

Первое, что пришло в голову, это рефакторинг всей программы для использования webpack, modules, babel и es6. После исследования можно сделать это без всякого рефакторинга кодовой базы. Но перед тем как я начну добавлять webpack к проекту, нужно решить много проблем.

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

  • Как решить проблему оконного объекта, поскольку webpack показывает файлы как дерево файлов, общающихся друг с другом.
  • Как внести меньше изменений в проект без проблем со слиянием
  • разделить разработку и производство для webpack — Мир компьютерных инноваций
  • Как удалить зависимости от bower, поскольку webpack в основном решает модули из npm.
  • В качестве обновления webpack решает проблему большого размера JavaScript.
1*8cR1c4pTuS145b7ХVrB-Q
https://www.pexels.com/photo/technology-computer-desktop-source-code-113850/

Начните разбивать вещи на шаги

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

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

Во-первых, ошибка накопилась на старом grunt-sass & node-sass. Эта версия Node больше не поддерживается. Чтобы исправить это, я обновил grunt-sass с «0.18.1» до «2.0.0», а затем обновлено node-sass будет «4.7.2».

Во-вторых, попытка обновить grunt из «0.4.5» до «1.0.0» не сработала, потому что плагинам grunt нужен grunt@0.4.5 как одноранговая зависимость. Потому я остался на версии 0.4.5.

Устранение ошибок, отображаемых на сервере Express Node

Мне пришлось исправлять ошибки с экспресс-сервером Node, поскольку конструктор bodyParser устарел и нуждается в изменениях. Я изменился с

1*zYHhQhSD4VfTrv8HWp7l4A

к

1*Ty4Il11Y6pwJodIZcBfdYg

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

  • Атрибут отладки с grunt-express потому что он устарел в новой версии инспектора узлов.
  • Удалите задачу bower-install из проекта.

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

Я добавил webpack к проекту с помощью npm install webpack--save-dev. Затем я добавил файл `webpack.config.json`.

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

Чтобы устранить эту проблему, я создал точку входа. Я установил все необходимые файлы и назвал его тем же именем в конфигурации GruntJS, чтобы объединить его, как это делала старая сборка. Однако это займет много времени, поскольку в index.html было включено около 550 элементов.

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

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

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

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

1*a1w_YDNzXTDVWfIzl5CN1g

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

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

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

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

1*4CHmK7YvGR-5KdKkDb0shQ
Мне нравится это изображение, пишу код и пью кофе 🙂 https://www.pexels.com/photo/high-angle-view-of-coffee-cup-on-table-317385/

Обновите старый файл конфигурации Grunt

1*_ACtb1LBsXQulfYWnZP17g

Добавьте файлы в concat

1*2AX4IhZxSTV2sFxd2dn8qg

Убедитесь, что Webpack создан, а затем удалите JS из конфигураций

1*YaLaQJvEGZf1-U09ii3t0g

Добавить новый скрипт npm

1*h72Fb0X9U7Fdt1d3NQ0z-Q

Файл Webpack.config.js

1*o7QEQxqK3HhR4_lMu0zvhA

Файл Webpack.prod.js

1*sZWLlMeMiXaXPdqmOYvXog

Мотивации

Ремонтопригодность и качество кода

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

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

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

Производительность

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

Разбиение кода

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

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

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

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

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

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

1*MSPCzn3l6S8PfjbPj0m7jw

Привет, меня зовут Язан Аабед. Вырос в Палестине. Моей специальностью была информатика. Я инженер фронтенда и любитель JavaScript ??‍?. В основном работает с фреймворками Frontend, такими как (AngularJs, ReactJS). Вы можете называть меня #Geek? Кроме того, я люблю делиться своими знаниями с другими людьми и учиться у них??? Вы можете найти меня на GitHub, Medium, Twitter.

учебная академия webpack
учебная академия webpack существует, чтобы предоставлять подобранный высококачественный обучающий контент, посвященный webpack с открытым кодом…webpack.academyОт Grunt и Bower к Webpack, Babel и Yarn – перенос устаревшей интерфейсной системы сборки.
Система сборки, которую я унаследовал для портала данных Международного консорциума генома рака, была достаточно современной…medium.comКак постепенно перейти на webpack
Это вторая серия из двух частей о том, почему и как мы изменили нашу систему группировки JavaScript из системы ad hoc…medium.comПочему мы перешли на webpack
Это первая из двух частей серии о том, почему и как мы изменили нашу систему группирования JavaScript из системы ad hoc…medium.comПервые шаги от Grunt к Webpack
Начало работы с Webpack после использования Gruntadvancedweb.huПутешествие к Webpack – блог о плотности серверов
Керри Галлахер с сервером Density. Опубликовано 6 января 2016 г. За последние несколько лет мы построили…blog.serverdensity.com

[discussion] Как мы перешли от Grunt к Gulp к Webpack? с javascript

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *