независимо от шага сборки, вы всегда будете импортировать скрипт в заголовке HTML-документа, этот скрипт - тот, который запущен браузером, и это источник правды, отладка этого скрипта неотличается от отладки любого другого скрипта.
Когда разработчики начали связывать и минимизировать свои js-файлы, стало очень сложно отлаживать эти js-файлы, поэтому браузеры поставили функцию, называемую исходными картами, исходные карты позволяют вамотлаживать сценарий, как если бы он был автономным, даже если его можно было минимизировать, объединить и передать по пути.
Включение или отключение исходных карт для определенного сценария будет зависеть от настройки / сборки.Обычно вы хотите, чтобы они были в разработке, но вы не хотите, чтобы они работали. Например,
, вот конфигурация веб-пакета для исходных карт https://webpack.js.org/configuration/devtool/#devtool
Изменить, чтобы расширитьпредыдущий ответ
Я собираюсь подробно объяснить здесь, как отлаживать пакет glide с использованием source-maps, а также как разрабатывать с использованием локальных пакетов, поскольку из комментариев видно, что вы также хотите знать это,Конечно, здесь Glide - это просто пример, так как вы хотели знать этот пакет специально, но этот подход можно использовать для любого другого пакета.
Разработка с использованием локальных пакетов позволит вам отлаживать код без необходимости переходитьв файл index.js в папке dist в модулях вашего узла.
Использование исходных карт позволит вам просматривать файлы в том виде, в котором они были изначально, от строки к строке.
- Разветвитьпакет glide и клонируйте его на свой компьютер, и установите зависимости
- Здесь вы можете использовать любой пример, который использует glide, но я настроил пример, Fork / клонируйте следующий репозиторий https://github.com/sanehab/parcel-glide, и установите зависимости
- Теперь предположим, что вы хотите внести некоторые изменения в пакет glide и протестировать их перед публикацией / или выполнением запроса на извлечение без разработки локальной версии, это может быть очень трудоемким.
- Теперь для использования локального пакета существует множество способов, а пока мы используем самый простой способ, который заключается вустановить пакет, используя абсолютный путь (я предполагаю, что вы используете новую версию npm, которая совместима с установкой пакетов с использованием абсолютных путей).Перейдите к файлу package.json в parcel-glide и измените
"@glidejs/glide": "sanehab/glide"
To
"@glidejs/glide": "absolute path for glide package on your system"
Затем запустите npm / yarn install
Теперь запустите npm star (в пакете parcel-glide),Вы увидите запущенный пример, любые изменения, которые вы сейчас делаете для пакета glide, должны быть видны здесь напрямую (после того, как вы выполните npm, запустите build в пакете glide или, если хотите, используете watch)
Добавить оператор консоли в индекс.js в пакете glide, чтобы убедиться, что все работает (а затем собрать, используя npm run build).- теперь, если вы перейдете к примеру и увидите источники, вы обнаружите, что у нас есть один огромный файл glide js, и что у нас нет доступа в папке источников для всех файлов в пакете glide, например тех, которыенаходятся в src / components.Чтобы получить такой доступ, нам нужно добавить исходные карты
. Теперь в пакете glide перейдите к build / build.js и измените
import banner from './banner'
import babel from 'rollup-plugin-babel'
export default {
output: {
name: 'Glide',
banner
},
plugins: [
babel({
plugins: [
'external-helpers',
'transform-object-assign'
]
})
]
}
To
import banner from './banner'
import babel from 'rollup-plugin-babel'
export default {
output: {
name: 'Glide',
banner,
sourcemap: "inline"
},
plugins: [
babel({
plugins: [
'external-helpers',
'transform-object-assign'
]
})
]
}
Запустите npm, запустите build, и теперь вы можете получить доступвсе файлы на панели источников в инструментах разработки, включая отдельные файлы пакета glide.
Существуют разные типы исходных карт, встроенные являются наиболее точными, но они самые медленные, разные параметры влияют на сборку / перестройкуСкорость, Вы хотите выбрать то, что подходит вам лучше всего.
Опять же, это сумма того, что я также написал в моем первом редактировании, с точки зрения браузера, он всегда видит js-файлы, если вы хотите увидеть, как минимизируется, комбинируется, транслируется или что-то подобноеКогда файл был до его обработки, вам нужно включить исходные карты, то, как вы их включите, будет зависеть от используемого инструмента для обработки (шаг сборки).Это часто легко, и вам просто нужно добавить свойство, указывающее, какие карты источника вы хотите или вообще хотите.