Работаем над вопросом
Теперь, когда мы нашли проблему, и мы можем приступить к настоящей работе!
Вот ссылка на проблему и снимок экрана с проблемой ниже для справки:
Я создаю форк исходного репозитория, с которого начну разработку, и проверяю новую ветку под названием 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». Я смотрю на логику кода каждой задачи и делаю следующие выводы:
- Задача «bundle» объединяет все файлы в папке src / в файлы math.js и math.min.js внутри папки dist /. Так был сгенерирован dist / math.js, который мы видели ранее. Один из промежуточных шагов в задаче, называемый createBanner, - это редактирование файла header.js и замена значений заполнителей.
- Задача «компиляции» компилирует все файлы javascript в папке src / из ES6 в ванильный Javascript (все основные браузеры поддерживают только ванильный JS) и помещает их в папку lib /. Эта задача не проходит через шаг createBanner по замене значений заполнителей.
Вот шаг createBanner для справки:
Теперь решение проблемы кажется очевидным. Мне просто нужно добавить шаг createBanner для компиляции задачи, чем я и занимаюсь практически. Вместо этого, из-за того, как написана задача компиляции, я решил написать и добавить еще одну задачу, «writeBanner», которая применяет createBanner к файлу lib / header.js.
Теперь, когда я добавил исправление, я протестирую его, снова выполнив команду npm run build и проверив, правильно ли перезаписаны заполнители:
Сладкий! Заполнители заменяются соответствующими сгенерированными значениями. Поскольку мое исправление сработало, я отправлю PR в Части 3, доступной здесь!