Запуск пакетов npm в консоли разработчика на любом сайте

Если вы хотите протестировать пакет npm прямо в браузере, есть способ сделать это!

Как?

Трюк заключается в том, чтобы программно загрузить файл javascript в консоли разработчиков:

const script = document.createElement('script');
script.src = 'localhost:666/bundle.js';
document.body.appendChild(script);
Войти в полноэкранный режим Выйти из полноэкранного режима

Только вот что такое bundle.js?

Это бандл, который мы создадим через минуту с помощью browserify.

А что такое localhost:666/

Это локальный сервер, который вы будете обслуживать (позже в этом учебнике), потому что браузер chrome не позволяет загружать локальные файлы.

Давайте начнем сборку

Вы можете заменить cheerio на любой пакет npm, который вам нравится (но не все они работают в браузере).

  • Откройте новую директорию
  • npm init -y
  • touch main.js
  • в файле main.js отредактируйте следующее:
const cheerio = require("cheerio");
window.cheerio = cheerio; // this makes it available in the console later
Войти в полноэкранный режим Выйти из полноэкранного режима
  • в package.json добавьте следующее:
"scripts": {
    "serve": "browserify main.js -o build/bundle.js && http-server -p 666 build/"
  },
Войти в полноэкранный режим Выйти из полноэкранного режима
  • npm run build
  • открыть браузер
  • проверьте, загружается ли это: localhost:666/bundle.js
  • если да, скопируйте и вставьте это в консоль разработчиков Chrome (на любой странице)
const script = document.createElement('script');
script.src = 'localhost:666/bundle.js';
document.body.appendChild(script);
Войдите в полноэкранный режим Выйдите из полноэкранного режима
  • Теперь поиграйте в консоли разработчика с пакетом npm, как в нашем случае:
const $ = cheerio.load(document.body.innerHTML);
$('a');
Войти в полноэкранный режим Выйти из полноэкранного режима

PS: Не все пакеты npm работают, я пробовал request, но он выдал ошибку в консоли разработчика. Но сейчас я бы рекомендовал использовать для этого новый стандарт fetch.

Github: Вы также можете клонировать это репо!

Оцените статью
Procodings.ru
Добавить комментарий