Работаем над вопросом

Теперь, когда мы нашли проблему, и мы можем приступить к настоящей работе!

Вот ссылка на проблему и снимок экрана с проблемой ниже для справки:

Я создаю форк исходного репозитория, с которого начну разработку, и проверяю новую ветку под названием add-banner-for-custom-bundle.

Чтение документации

Чтение документации - это первое, что я делаю, когда работаю над проектом. У проектов обычно есть документация на README.md или на их собственном веб-сайте. Я просматриваю документацию по mathjs, чтобы лучше понять, о чем идет речь, и, возможно, понять проблему, над которой я работаю.

В конечном итоге я нашел часть о настраиваемой комплектации, которая упоминалась в исходном выпуске:

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

Теперь, когда у меня достаточно общих знаний о webpack и проекте, я могу начать воспроизводить проблему, о которой говорил автор, zhy0. josedejong также помогает мне лучше понять проблему / решение своим комментарием:

Строим проект

Я заметил, что в проекте есть файл package-lock.json, а это значит, что мне нужно выполнить npm install, а не yarn.

После установки узловых модулей я просматриваю папку package.json в поисках доступных команд:

Похоже, что нет команды «start», которая имеет смысл для пакета npm. Команды «build» и «build-and-test» похожи на те, которые мне нужны для воспроизведения проблемы. Обычно файл CONTRIBUTING.md также должен содержать такую ​​информацию.

Понимание ошибки

После описанных выше шагов и небольшого просмотра кодовой базы я понял, что такое ошибка:

Если я выполняю сборку npm run, она объединяет проект и помещает скомпилированные файлы в папку lib. Однако в lib / header.js заполнители «@@ version» и «@@ date» не заменяются их фактическими значениями:

Вот как должны выглядеть значения внутри dist / math.js, которые josedejong были правильными:

Похоже, что какой бы метод ни использовался в проекте для замены значений заполнителей в dist / math.js, он также должен быть применен к lib / header.js.

Поиск решения

Команда «gulp» фактически запускается, когда я выполняю «npm run build». Я не слишком хорошо знаю, что такое gulp, но похоже, что он создает папки dist и lib.

Я читаю документацию по gulp ..

В документации Gulp упоминалось, что в проектах должен быть файл gulpfile.js, который определенно существует. Читая его, я нахожу строку кода, которая напрямую связана с командой «gulp»:

Из того, что я узнал из документации по gulp, каждая из задач здесь, например, Bundle, Compile, Minify…, запускается по одной, когда я запускаю команду «gulp». Я смотрю на логику кода каждой задачи и делаю следующие выводы:

  1. Задача «bundle» объединяет все файлы в папке src / в файлы math.js и math.min.js внутри папки dist /. Так был сгенерирован dist / math.js, который мы видели ранее. Один из промежуточных шагов в задаче, называемый createBanner, - это редактирование файла header.js и замена значений заполнителей.
  2. Задача «компиляции» компилирует все файлы javascript в папке src / из ES6 в ванильный Javascript (все основные браузеры поддерживают только ванильный JS) и помещает их в папку lib /. Эта задача не проходит через шаг createBanner по замене значений заполнителей.

Вот шаг createBanner для справки:

Теперь решение проблемы кажется очевидным. Мне просто нужно добавить шаг createBanner для компиляции задачи, чем я и занимаюсь практически. Вместо этого, из-за того, как написана задача компиляции, я решил написать и добавить еще одну задачу, «writeBanner», которая применяет createBanner к файлу lib / header.js.

Теперь, когда я добавил исправление, я протестирую его, снова выполнив команду npm run build и проверив, правильно ли перезаписаны заполнители:

Сладкий! Заполнители заменяются соответствующими сгенерированными значениями. Поскольку мое исправление сработало, я отправлю PR в Части 3, доступной здесь!