импортировать или требовать любую библиотеку в консоли браузера

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

Теперь в современном javascript/es6/es6/typescript мире есть что-нибудь короткое и быстрое, чтобы мгновенно импортировать скрипт в браузер, чтобы его можно было использовать напрямую

Пример

Во время отладки, если я хочу Observable, я должен сделать что-то вроде этого

import {Observable} from 'rxjs/Observable';  //typescript way
const Observable= require('rxjs/Observable'); // require way

Но они не работают.

уже изучен динамический тег <script>

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

var jq = document.createElement('script');
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
// ... give time for script to load, then type (or see below for non wait option)
jQuery.noConflict();

person Aniruddha Das    schedule 29.09.2017    source источник
comment
есть что-то! Я постоянно сталкиваюсь с одной и той же ситуацией! надеюсь есть простой способ   -  person Reese Davis    schedule 29.09.2017


Ответы (1)


Некоторые браузеры (включая Chrome) могут использовать фрагменты кода в консоли как встроенные -in функции или расширения.

Однострочный скрипт для этого

document.head.appendChild(Object.assign(
    document.createElement('script'),
    { src: '...' }
));

Учитывая, что на большинстве веб-сайтов уже загружен jQuery (даже если это не так, с этим можно справиться с помощью расширений браузера, таких как Chrome jQuery Injector), его можно сократить до:

$.getScript('...');

Любой фрагмент кода, который всегда должен быть доступен в консоли, также может быть представлен как глобальная функция с помощью пользовательских скриптов (Tampermonkey в Chrome и т. д.) с некоторыми ограничениями, налагаемыми безопасностью пользовательских скриптов.

Это вероятно будет возможно с динамическим import(), который в настоящее время предложение этапа 3 и не реализовано в браузерах.


Подходящим решением, которое работает для большинства крупных библиотек, с которыми может быть интересно быстро поэкспериментировать, является переход на официальный веб-сайт библиотеки и открытие консоли. Из-за того, что веб-сайты часто предоставляют живые примеры, соответствующие переменные доступны для глобального масштаба. Известные примеры: $ для jQuery, angular для AngularJS, ng для Angular, Rx для RxJS, moment для Moment.js...

person Estus Flask    schedule 29.09.2017
comment
это похоже на создание тега скрипта и добавление к нему внешнего скрипта. Я ищу что-то одно вкладочное, чтобы прочитать скрипт по ссылке, выполнить его и экспортировать мне модуль, такой как узел или файл машинописного текста. - person Aniruddha Das; 29.09.2017
comment
Вы просите не одну строчку. Перечислены пути решения проблемы. $.getScript прибивает это. - person Estus Flask; 29.09.2017