🧚‍♀️ 5분만에 Cli 만들어보기

React 또는 Vue 같은 친구들을 접해보셨다면 아래와 같은 명령어를 입력하여 프로젝트를 생성해봤을 것이다.

$ create-react-app my-app
$ vue create my-app

이렇게 command 상에서 작업을 처리하는 방식을 cli 라고한다.
cli 란 command line interface 의 약자이다.

Npm Finder

npm finder 라는 cli 를 만들어 아래의 명령어를 입력하면 npm 사이트의 해당 모듈 페이지를 찾아 띄워주려한다.

$ n-finder react

Commander

모든 작업은 node.js 기반으로 이뤄지기 때문에 node 가 설치되어 있어야 한다.

$ npm init -y

command 에서 명령어를 실행하고 다양한 option 과 값들을 가져오기 위해선 commander 라는 모듈이 필요하다.

$ npm install --save commander

commander 를 이용하여 index.js 를 구성해보겠습니다.

!/usr/bin/env node 는 꼭 추가해야한다.
배포 후 global 로 설치하여 사용 할 때 없으면 cli 가 동작하지 않는다.

#!/usr/bin/env node
const program = require("commander")
const pkg = require("./package.json")
program
  .version(pkg.version)
  .arguments("<module-name>")
  .action(module => console.log(`module: ${module}`))
  .parse(process.argv)

아래와 같이 index.js 를 실행하며 react 라는 값을 넘겨주면 module: react 라는 값이 찍히는 것을 볼 수 있다.

node index.js react

commander 의 함수를 역할을 간단하게 살펴보겠다.

• version: node index.js -V 와 같이 해당 모듈의 version 을 출력할 수 있도록 한다.
• arguments: option 없이 호출될 값
• action: arguments 값을 입력받은 후의 동작을 정의
• parse: 어디에서 값을 입력받는지 나타낸다.

open

commander 를 이용하여 값을 받았으니 이 값을 이용하여 npm 사이트에서 해당 모듈 페이지를 open 하기만 하면된다 .
브라우저를 열기 위해 open 모듈을 사용한다.

$ npm i --save open

NPM 페이지에서 모듈을 찾아가기 위한 BASE 주소는 https://www.npmjs.com/package 이다.
모듈을 찾기 위해서는 다음과 같은 주소로 접근해야한다. https://www.npmjs.com/package/모듈이름

open 은 실행시 두가지의 인자를 받는다.
첫번째는 open 할 주소, 두번째 인자는 브라우저 정보를 받는다. (크롬, 파이어폭스 등…)

$ open(url, browser)

크롬을 사용하게 될텐데 chrome 이 아닌 Google chrome 으로 적어주어야 한다.

const program = require("commander")
const pkg = require("./package.json")
const open = require("open")
const BASE_NPM_URL = "https://www.npmjs.com/package"
program
  .version(pkg.version)
  .arguments("<module-name>")
  .action(module => open(`${BASE_NPM_URL}/${module}`, "Google chrome"))
  .parse(process.argv)

이제 실행해보시면 검색한 모듈의 페이지가 뜨는것을 볼 수 있습니다.

$ node index.js react

Deploy

먼저 우리가 만든 프로젝트를 git 에 올려야한다.
github 에 프로젝트가 올라가 있다는 가정하에 설명하겠습니다.

.npmignore 를 추가하여 배포에 제외될 파일을 작성해야한다.
만약 .npmignore 가 없고 .gitignore 가 있다면 gitignore 의 규칙을 따른다.

.DS_Store
.git*
.idea
.vscode

npm 에 배포하기 위해서는 npm user 를 등록해야한다.

$ npm adduser

마지막으로 package.json 에 정보를 채우면 된다.

{
  "name": "npm-finder",
  "version": "1.0.0",
  "description": "This is CLI to find the module page in npm",
  "main": "index.js",
  "scripts": {},
  "bin": {
    "nfinder": "index.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/appear/npm-finder.git"
  },
  "author": {
    "name": "olaf",
    "email": "appear.ko@gmail.com",
    "url": "https://appear.github.io/"
  },
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/appear/npm-finder/issues"
  },
  "homepage": "https://github.com/appear/npm-finder#readme",
  "dependencies": {
    "commander": "^2.19.0",
    "open": "0.0.5"
  },
  "keywords": ["npm", "finder", "cli"]
}

npm publish 라는 명령어로 배포 할 수 있다.

$ npm publish

https://www.npmjs.com/package/npm-finder