クリップをクリップボードにコピーする

写真でGia Oris on Unsplash
私は誰もが以下のトリックを必要とすると確信しません、しかし、私のクライアントの場所で、我々はダイナミックなBase 64パラメタを含むURLを通してのみアクセスできるアプリケーションを持っています.言うまでもなく、それは地元の開発を少し不便にします.
また、私は、私は自動的にブラウザを開くことができるCLIのオプションの大ファンではないことを認めなければならない.私が開発目的のためにほとんどChrome Intagtoモードを使うけれども、私はしばしば私が開発したものを試みるためにブラウザーの間で変わるのが好きです.
最後に、私はブックマークを使用しないでください.したがって、設定なしで、別のポートを使用する必要があるたびに:3333 or :4200 or :8000 or :8100 など)
そういうわけで、私は私のクリップボードにアプリケーションのスタートURLをコピーするべきであるアプリケーションにプレスタートスクリプトを加える考えを持っていました.そうすることで、私はちょうどブラウザを選択することができます、URIをペーストし、私は行くのが良いです.

依存

nodejsスクリプトからクリップボードに値をコピーしたり読んだりするには、ライブラリを使用しましたclipboardy このようなクロスプラットフォーム機能を実装します.
加えて、私もchalk アンboxen スタイリッシュな方法でコンソールにURLを印刷するには.
すべてのこれらの依存関係がオープンソースであり、同じ人によって開発されていることに気づくかもしれません👍.

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をコピーするのを見ていたので、私はAとしてそれを加えましたprestart 私のスクリプトpackage.json .

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

あなたは“しかし、デビッド、なぜprestartではなく、ポストスタート?”私が答えるのはprestart を実行します.反対にpoststart , も実際に実行されるが、start ライフサイクルがリリースされる.あなたのローカルサーバーが頻繁に、変更を監視するためにアクティブに滞在する場合.poststart ローカルサーバーをキャンセルする場合のみ解決します.

デモ

私がヒットしたときすべての場所にあるnpm run start コンソールでは、URLが生成され、クリップボードにコピーされ、次の出力に気付きます.

私がブラウザの1つを開くならば、ナビゲーションバーで結果をペーストすることができます.

最後にヒットenter そして、生成されたパラメータで私のURLにアクセスしてください.

概要

このポストの導入で下線として、私は本当に誰でもこれまでにこの解決を必要とするかどうかわからないです😅. とにかく、私はそれが楽しい読んでいたし、何かを改善する場合は私に知らせてください.
無限に、そして、向こうに!
ダビデ
あなたは私に手を伸ばすことができます、そして、なぜ、試してみるDeckDeckGo あなたの次のプレゼンテーションのために.