Как отладить источник модального плагина, написанного на ES6?

Ответ 1

независимо от шага сборки, вы всегда будете импортировать скрипт в заголовке HTML-документа, этот скрипт - тот, который запускает браузер, и это источник правды, отладка этого скрипта ничем не отличается от отладки любой другой скрипт.

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

Включение или отключение исходных карт для определенного скрипта будет зависеть от настройки/сборки. Обычно вы хотите их в разработке, но вы не хотите их в производстве.

например, вот конфигурация webpack для исходных карт https://webpack.js.org/configuration/devtool/#devtool

Изменить, чтобы развернуть предыдущий ответ

Я собираюсь подробно объяснить здесь, как отлаживать пакет glide, используя исходные карты, а также как разрабатывать, используя локальные пакеты, потому что, как видно из комментариев, вы также хотите это знать. Конечно, здесь glide - только пример, так как вы хотели знать этот пакет специально, но этот подход можно использовать для любого другого пакета.

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

Использование исходных карт позволит вам видеть файлы такими, какие они есть, построчно.

• Создайте пакет glide, скопируйте его на свой компьютер и установите зависимости
• Здесь вы можете использовать любой пример, который использует glide, но я настроил пример. Разместите/клонируйте следующий репозиторий https://github.com/sanehab/parcel-glide и установите зависимости
• Теперь допустим, что вы хотите внести некоторые изменения в пакет glide, и вы хотите протестировать их перед публикацией/или выполнением запроса на извлечение, не разрабатывая для локальной версии, это может быть очень трудоемким.
• Теперь для использования локального пакета существует множество способов, на данный момент мы используем самый простой способ - установить пакет, используя абсолютный путь (здесь я предполагаю, что вы используете новую версию npm, совместимую с установка пакетов с использованием абсолютных путей). Перейдите к файлу package.json в пакете и измените

"@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)

Добавьте консольный оператор в index.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 файлы, если вы хотите увидеть, как минимизированный, комбинированный, сгруппированный или что-то подобное перед обработкой необходимо включить исходные карты, то, как вы их включите, будет зависеть от используемого инструмента для выполнения обработки (этап сборки). Это часто легко, и вам просто нужно добавить свойство, указывающее, какие исходные карты вы хотите или вообще хотите.

Ответ 2

Как и в случае с любым другим фрагментом размещенного на github кода, в который вы хотите внести свой вклад:

1. Клонируйте репозиторий по адресу https://github.com/ghosh/micromodal.
2. Изучите package.json или документацию для инструкций по сборке.

Идите вперед и исследуйте и внесите свой вклад!

Это даже подробно описано в readme:

Настройка разработки

• Клон Github репо $ git clone https://github.com/ghosh/micromodal.git
• Установите менеджер пакетов пряжи (Прочтите руководство по установке)
• Запустите yarn install в корневой папке, чтобы установить все зависимости
• Запустите yarn dev чтобы запустить сервер dev. Это служит примером каталога и живой перезагрузки, когда любые файлы изменены
• [Необязательно] Запустите yarn build чтобы собрать файлы для распространения. Это также запускается автоматически как ловушка для предварительной фиксации.
• Отправьте нам запрос на подачу и расслабьтесь

https://github.com/ghosh/micromodal#development-setup