Как скопировать начальный URL и параметры вашего приложения в буфер обмена при его локальном запуске.

Я не уверен, что кому-нибудь когда-нибудь понадобятся следующие уловки, но у моего клиента есть приложение, доступ к которому можно получить только через URL-адрес, содержащий динамический параметр base64. Излишне говорить, что это делает его локальную разработку немного неудобной.

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

Наконец, я не использую закладки (не судите меня) и часто переключаюсь между технологиями. Следовательно, без конфигурации каждый раз, когда должен использоваться другой порт (:3333 или :4200, :8000 или :8100 и т. Д.).

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

Зависимости

Чтобы скопировать или прочитать значение в буфер обмена из сценария NodeJS, я использовал библиотеку clipboardy, которая реализует такую ​​кроссплатформенную функцию.

Вдобавок я добавил мел и прямоугольник, чтобы стильно распечатать URL-адрес консоли.

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

npm i clipboardy chalk boxen --save-dev

Сценарий

После получения зависимостей я создал сам предварительный сценарий. В этом примере я создаю файл start-url.js в корне проекта.

Первичный скрипт генерирует url, который я хочу скопировать в буфер обмена. Я специально использую строку Hello World 👋, чтобы продемонстрировать возможность кодирования сложных параметров.

Чтобы распечатать красивое сообщение, я использую chalk с цветами, для фона и фона, а также полужирный шрифт. Я использую \n\n для создания новой строки. Стоит отметить, что библиотека предлагает множество опций, таких как комбинирование или вложение стилей.

Использование clipboardy для копирования URL-адреса в буфер обмена на самом деле представляет собой небольшую работу, и ее можно решить, вызвав ее функцию copy со всем URL-адресом в качестве входного параметра.

Наконец, в console.log я распечатываю сообщение внутри поля, созданного с помощью boxen.

const { write: copy } = require('clipboardy');
const chalk = require('chalk');
const boxen = require('boxen');

const params = encodeURIComponent('Hello World 👋');

const url = `http://localhost:3333/profile/${params}`;

(async () => {
    let message = chalk.yellow.inverse('Your URL');

    message += `\n\n${chalk.bold(`${url}`)}`;

    try {
        await copy(url);
        message += `\n\n${chalk.grey('Copied local address to clipboard!')}`;
    } catch (err) {
        message = chalk.red.bold(`Cannot copy ${url} to clipboard 🥺\n\n${err.message}`);
    }

    console.log(
        boxen(message, {
            borderStyle: 'round',
            padding: 1,
            borderColor: 'yellow',
            margin: 1
        })
    );
})();

Жизненный цикл

Благодаря npm можно выполнять скрипты на разных жизненных циклах. Поскольку я хотел скопировать URL-адрес при запуске приложения локально, я добавил его как prestart скрипт в свой package.json.

"scripts": {
  "prestart": "node start-url.js"
}

Вы можете спросить: «Но, Дэвид, а почему предварительный запуск, а не последующий запуск?» на что я бы ответил, что prestart исполняется точно. Напротив, poststart действительно также выполняется, но только тогда, когда жизненный цикл start будет освобожден. Если ваш локальный сервер, как часто, будет оставаться активным, чтобы следить за изменениями, poststart разрешится только тогда, когда вы отмените свой локальный сервер.

Демо

Все на месте, когда я нажимаю npm run start в консоли, создается URL-адрес, копируется в буфер обмена, и я замечаю следующий результат.

Если я открою один из своих браузеров, я могу вставить результат в панель навигации.

Наконец, нажмите enter и получите доступ к моему URL-адресу с сгенерированными параметрами.

Резюме

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

Бесконечность не предел!

Дэйвид

Вы можете связаться со мной в Твиттере и, почему бы и нет, попробовать DeckDeckGo для следующих презентаций.