Npm 실행 시작 시 클립보드에 URL 복사

사진 제공: Gia Oris on Unsplash


누구에게나 다음과 같은 트릭이 필요한지 확신할 수 없지만 내 고객의 위치에는 동적 base64 매개변수가 포함된 URL을 통해서만 액세스할 수 있는 애플리케이션이 있습니다. 말할 필요도 없이, 그것은 그것의 지역 개발을 약간 불편하게 만듭니다.

또한 브라우저를 자동으로 열 수 있는 CLI 옵션을 좋아하지 않는다는 점을 인정해야 합니다. 저는 주로 개발 목적으로 Chrome 시크릿 모드를 사용하지만 제가 개발한 것을 시도하기 위해 브라우저를 자주 전환하는 것을 좋아합니다.

마지막으로 저는 북마크를 사용하지 않으며(저를 판단하지 마세요) 종종 기술을 전환합니다. 따라서 설정 없이 매번 다른 포트를 사용해야 합니다.

그래서 응용 프로그램의 시작 URL을 내 클립보드에 복사해야 하는 사전 시작 스크립트를 응용 프로그램에 추가할 생각이 있었습니다. 이렇게 하면 브라우저를 선택하고 URI를 붙여넣기만 하면 됩니다.

종속성

NodeJS 스크립트에서 클립보드로 값을 복사하거나 읽기 위해 이러한 크로스 플랫폼 기능을 구현한 라이브러리clipboardy를 사용했습니다.

또한 chalk ann boxen도 추가하여 콘솔에 URL을 스타일리쉬하게 출력해보았습니다.

이러한 모든 종속성이 오픈 소스이며 같은 사람이 개발했음을 알 수 있습니다.

npm i clipboardy chalk boxen --save-dev

스크립트

종속성을 가져오면 사전 시작 스크립트 자체를 만들었습니다. 이 예에서는 프로젝트의 루트에 파일:3333을 생성합니다.

기본 스크립트는 내 클립보드에 복사하려는 :4200를 생성합니다. 일부러 복잡한 매개변수를 인코딩할 수 있음을 보여주기 위해 :8000 문자열을 사용하고 있습니다.

멋진 메시지를 인쇄하기 위해 색상, for- 및 배경, 굵은 옵션과 함께 :8100를 사용합니다. 줄 바꿈을 만들기 위해 start-url.js를 사용합니다. 라이브러리가 스타일 결합 또는 중첩과 같은 다양한 옵션을 제공한다는 점은 주목할 가치가 있습니다.

URL을 클립보드에 복사하기 위해 url를 사용하는 것은 실제로 작업이 거의 없으며 모든 URL을 입력 매개변수로 사용하여 함수Hello World 👋를 호출하여 해결할 수 있습니다.

마지막으로 chalk 에서 \n\n 로 생성된 상자 안에 메시지를 인쇄합니다.

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을 복사하려고 했기 때문에 clipboardy 스크립트로 내 copy 에 추가했습니다.

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

"하지만 David, 왜 사후 시작이 아닌 사전 시작입니까?"라고 물을 수 있습니다. console.log가 확실히 실행된다고 대답하겠습니다. 반대로 boxen 도 실제로 실행되지만 prestart 수명 주기가 해제될 때만 실행됩니다. 자주 로컬 서버가 활성 상태를 유지하여 변경 사항을 감시하는 경우 package.json는 로컬 서버를 취소할 때만 해결됩니다.

데모

모든 것이 제자리에 있고 내 콘솔에서 prestart를 누르면 URL이 생성되고 클립보드에 복사되며 다음 출력이 표시됩니다.



내 브라우저 중 하나를 열면 내비게이션 바에 결과를 붙여넣을 수 있습니다.



마지막으로 poststart를 누르고 생성된 매개변수로 내 URL에 액세스합니다.

요약

이 게시물의 소개에 밑줄이 그어져 있는 것처럼 누군가에게 이 솔루션이 필요한지 정말 모르겠습니다 😅. 어쨌든 재미있게 읽으셨기를 바라며 개선할 점이 있으면 알려주세요.

무한과 그 너머로!

다윗


다음 프레젠테이션을 위해 DeckDeckGo에서 저에게 연락할 수 있습니다.