JavaScript 및 Oclif를 사용한 뛰어난 CLI 구축

최초로 Streaver's blog년에 발표되었다.

CLI 를 먼저 정의해 보겠습니다.

물론 빠른 구글 검색은 CLI 정의가 있는 Wikipedia article을 생성합니다.

A command-line interface or command language interpreter (CLI), also known as command-line user interface, console user interface and character user interface (CUI), is a means of interacting with a computer program where the user (or client) issues commands to the program in the form of successive lines of text (command lines). A program which handles the interface is called a command language interpreter or shell (computing).

따라서 CLI는 사용자가 텍스트로 요청한 내용을 이해하고 요청에 따라 코드를 실행하는 프로그램입니다.
이러한 프로그램은 현재 월의 cal Bash 도구 등 간단한 CLI부터 Kubernetes 클러스터를 관리하는 kubectl 등 매우 복잡한 CLI까지 다양한 용례에 매우 유용하다.
매일 CLI를 직접 사용하지 않아도 간접적으로 영향을 받을 수 있다. 예를 들어 git은 CLI이고 gcc은 GNU 컴파일러이며 create-react-app은 React 응용 프로그램을 만드는 비계 CLI 등이다.

자체 CLI 설정 방법

과학기술계의 많은 일들처럼 답은'상황을 보고 정해야 한다'는 것이다.그것들을 구축하는 방법은 매우 많고, 모든 방법은 서로 다른 환경에서 효과적일 수 있다.이 예에서는 JavaScript와 Oclif: a Node.JS Open CLI Framework (by Heroku)을 사용하여 CLI 구축을 위한 CLI를 포함한 어플리케이션을 구축하는 방법을 모색합니다.🤔.
위태롭다
지금부터 자바스크립트와 NPM 생태계가 전체적으로 만족스럽다고 가정해 보겠습니다. 만약 만족스럽지 않다면 대체적인 생각이 있을 수 있지만, 시작하기 전에 이 방면에 관한 내용을 읽어보시기 바랍니다.😃.

Oclif 시작

내가 보기에 일부 물건을 구축하는 것은 보통 좋은 학습 방식이다. 그래서 본 예에서 나는 두뇌 폭풍을 일으켰고'해방자배'CLI(see Wikipedia)를 구축하기로 결정했다.
해방자배 선수권대회가 이미 진행된 경기와 곧 진행될 경기에 대한 정보를 검색하고 표시할 수 있는 명령을 제공하겠다는 생각이다.
우리 시작합시다!
Oclif CLI에는 CLI 프로젝트를 생성하는 두 가지 방법이 있는데, 하나는 npx oclif single mynewcli이고, 다른 하나는 npx oclif multi mynewcli이며, 이 예에서는 다중 명령 CLI를 생성합니다.
명령이 Oclif의 다중 명령 CLI 생성과 일치하는 libertadores games:all, libertadores games:past으로 표시되기를 원합니다.

프로젝트 초기화

먼저 다음과 같은 작업을 통해 프로젝트를 초기화합니다.

npx oclif multi libertadores-cli

이것은 몇 가지 질문을 할 것이다. 그리고 인코딩을 시작해야 할 모든 것을 설치할 것이다.

$ npx oclif multi libertadores
npx: installed 442 in 32.454s

     _-----_     ╭──────────────────────────╮
    |       |    │      Time to build a     │
    |--(o)--|    │  multi-command CLI with  │
   `---------´   │  oclif! Version: 1.13.1  │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

? npm package name libertadores-cli
? command bin name the CLI will export libertadores
? description A simple CLI to get information about "Copa Libertadores" right in your terminal
? author Federico Kauffman
? version 0.0.0
? license MIT
? Who is the GitHub owner of repository (https://github.com/OWNER/repo) streaver
? What is the GitHub name of repository (https://github.com/owner/REPO) libertadores-cli
? Select a package manager yarn
? TypeScript No
? Use eslint (linter for JavaScript) Yes
? Use mocha (testing framework) Yes
? Add CI service config circleci (continuous integration/delivery service)

나는 내가 좋아하는 기본 설정을 선택했다. 현재 너는 한 무더기의 파일과 폴더가 있는데, 그것들은 우리 프로젝트의 주요 구조가 될 것이다.다음은 디렉토리를 libertadores games:upcoming으로 입력합니다.
Oclif가 제공하는 이점에 대해 간략하게 설명합니다.

.
├── README.md
├── bin
│   ├── run
│   └── run.cmd
├── package.json
├── src
│   ├── commands
│   │   └── hello.js
│   └── index.js
├── test
│   ├── commands
│   │   └── hello.test.js
│   └── mocha.opts
└── yarn.lock

5 directories, 9 files

파일 트리를 보면 각 플랫폼(Unix/Windows)에서 명령을 실행하는 바이너리 파일이 포함된 cd libertadores-cli 디렉토리를 볼 수 있습니다.bin 폴더에 있는 src 파일을 볼 수 있습니다. 이 파일은 내부 Oclif 패키지만 내보냅니다. 이 패키지는 사용 가능한 명령을 불러옵니다. 이 명령은 index.js 폴더에 있는 파일에서 정의됩니다.기본적으로 Oclif는 src/commands 명령을 생성하여 실행하고 다음을 확인합니다.

$ ./bin/run

A simple CLI to get information about "Copa Libertadores" right in your terminal

VERSION
  libertadores-cli/0.0.0 darwin-x64 node-v11.13.0

USAGE
  $ libertadores [COMMAND]

COMMANDS
  hello  Describe the command here
  help   display help for libertadores

hello 하위 명령을 실행하면 다음이 적용됩니다.

$ ./bin/run hello

hello world from ./src/commands/hello.js

마지막으로 가장 중요하지 않은 것은 hello 폴더가 있는데 그 안에 모든 테스트를 설치할 것입니다. 사실 Oclif는 몇 가지 테스트를 만들었습니다. 우리는 tests 또는 npm run test을 사용해서 실행할 수 있습니다.

첫 번째 명령 만들기

우선, 우리는 yarn test 명령을 삭제할 수 있다. 왜냐하면 우리는 그것을 사용할 생각이 없기 때문에, hello과 src/command/hello.js만 삭제할 수 있다.
이제 Oclif CLI 생성기 명령을 사용하여 tests/commands/hello.test.js 명령을 생성할 수 있습니다.

npx oclif command games:all

이것은 명령에 필요한 모든 파일(테스트 포함)을 만들고 games:all 파일을 자동으로 업데이트하여 새로운 명령을 포함합니다.
http://www.conmebol.com/es/copa-libertadores-2019/fixture에서 "Copa Aducturator"에 대한 자세한 내용은 puppeteer을 사용하여 웹 사이트에 접속하여 데이터를 확인할 수 있습니다.

$ yarn add puppeteer --save

const puppeteer = require("puppeteer");
...
class AllCommand extends Command {
  async run() {
    ...
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto(
      "http://www.conmebol.com/es/copa-libertadores-2019/fixture",
      { waitUntil: "load", timeout: 0 }
    );

    // Insert some really crazy code to parse the HTML
    // you can find this at https://github.com/streaver/libertadores-cli

    this.log(results);
  }
}

이제 README.md을 실행하여 최종 결과를 얻을 수 있습니다.

보시다시피 저는 '불러오기' 기능을 추가해서 사용자에게 시각적 피드백을 제공합니다.이를 추가하기 위해 libertadores games:all 패키지를 설치한 다음 코드의 느린 부분을 일부 부팅/정지 호출에 포장합니다.
다음과 같이 설치합니다.

yarn add cli-ux --save

다음과 같은 마이크로스피커를 추가합니다.

const { cli } = require('cli-ux');
...

cli.action.start('Fetching data');
//Do something that takes time
cli.action.stop();
...

이제 CLI가 생겨서 테스트를 작성할 수 있습니다!Oclif는 이러한 CLI를 테스트하는 데 유용한 기본값을 제공합니다.이런 특수한 상황에서 터미널의 출력이 예상에 부합되는지 테스트하기만 하면 됩니다.다행히도 이것은 자동으로 생성된 명령 테스트입니다. 코드를 수정하기만 하면 됩니다.
나는 이 임무를 너에게 남겨 줄 것이다. (독자, 수학책처럼)🙄...또는 official repository에서 해방자배 CLI를 볼 수도 있습니다.
CLI를 설치하여 게임을 놓치지 않도록 최신 상태로 유지❤️⚽!