`npx 사용자 이름` 카드 설정 중!

최근에 Twitter에서 다음과 같은 멋진 게시물을 보았습니다.









티어니 사이렌


@bitandbang






내 명함을 업데이트했습니다 😎


오후 19:28 - 2018년 12월 19일









커뮤니티의 반응은 대단했고 저는 저만의 것을 만들고 싶다는 것을 금방 알았습니다.









🧙‍♂️콘린 더빈


@callmewuz






의 환상적인 아이디어!


오후 16:27 - 2018년 12월 20일









오늘은 하나 만드는 과정을 모두에게 보여드리고 싶었습니다.

먼저 저장소를 복제해 보겠습니다.

git clone https://github.com/bnb/bitandbang

이제 몇 가지 항목을 편집해야 합니다. 먼저 package.json를 열고 일부 세부 정보를 업데이트하겠습니다. 먼저 패키지 이름을 변경합니다.

name: <your username>

이렇게 하면 npm에 게시하고 npx <your_username>로 카드를 받을 수 있습니다.

정보를 반영하도록 설명 및 작성자 필드를 업데이트할 수도 있습니다.
npm run dev 를 실행하면 Tierney의 정보가 표시되는 것을 볼 수 있습니다. 당신의 카드로 만들어 봅시다.

열기build.js:

'use strict'

// Pull in our modules
const chalk = require('chalk')
const boxen = require('boxen')
const fs = require('fs')
const path = require('path')

// Define options for Boxen
const options = {
  padding: 1,
  margin: 1,
  borderStyle: 'round'
}

// Text + chalk definitions
const data = {
  name: chalk.white('               Tierney Cyren'),
  handle: chalk.white('bitandbang'),
  work: chalk.white('Senior Cloud Developer Advocate at Microsoft'),
  opensource: chalk.white('Node.js Community Committee ') + chalk.green('⬢'),
  twitter: chalk.gray('https://twitter.com/') + chalk.cyan('bitandbang'),
  npm: chalk.gray('https://npmjs.com/') + chalk.red('~bnb'),
  github: chalk.gray('https://github.com/') + chalk.green('bnb'),
  linkedin: chalk.gray('https://linkedin.com/in/') + chalk.blue('bitandbang'),
  web: chalk.cyan('https://bnb.im'),
  npx: chalk.red('npx') + ' ' + chalk.white('bitandbang'),
  labelWork: chalk.white.bold('       Work:'),
  labelOpenSource: chalk.white.bold('Open Source:'),
  labelTwitter: chalk.white.bold('    Twitter:'),
  labelnpm: chalk.white.bold('        npm:'),
  labelGitHub: chalk.white.bold('     GitHub:'),
  labelLinkedIn: chalk.white.bold('   LinkedIn:'),
  labelWeb: chalk.white.bold('        Web:'),
  labelCard: chalk.white.bold('       Card:')
}

// Actual strings we're going to output
const newline = '\n'
const heading = `${data.name} / ${data.handle}`
const working = `${data.labelWork}  ${data.work}`
const opensourcing = `${data.labelOpenSource}  ${data.opensource}`
const twittering = `${data.labelTwitter}  ${data.twitter}`
const npming = `${data.labelnpm}  ${data.npm}`
const githubing = `${data.labelGitHub}  ${data.github}`
const linkedining = `${data.labelLinkedIn}  ${data.linkedin}`
const webing = `${data.labelWeb}  ${data.web}`
const carding = `${data.labelCard}  ${data.npx}`

// Put all our output together into a single variable so we can use boxen effectively
const output = heading + // data.name + data.handle
               newline + newline + // Add one whole blank line
               working + newline + // data.labelWork + data.work
               opensourcing + newline + newline + // data.labelOpenSource + data.opensource
               twittering + newline + // data.labelTwitter + data.twitter
               npming + newline + // data.labelnpm + data.npm
               githubing + newline + // data.labelGitHub + data.github
               linkedining + newline + // data.labelLinkedIn + data.linkedin
               webing + newline + newline + // data.labelWeb + data.web
               carding // data.labelCard + data.npx

fs.writeFileSync(path.join(__dirname, 'bin/output'), chalk.green(boxen(output, options)))

data const를 가지고 놀면서 정보를 추가하세요. 저에게는 다음과 같이 보일 것입니다.

const data = {
  name: chalk.white('Conlin Durbin'),
  handle: chalk.greenBright.bold('wuz'),
  work: chalk.white('Frontend software engineer at Lessonly'),
  twitter: chalk.redBright('https://twitter.com/CallMeWuz'),
  github: chalk.redBright('https://github.com/wuz'),
  linkedin: chalk.redBright('https://linkedin.com/in/wuz'),
  web: chalk.redBright('https://wuz.fyi'),
  npx: chalk.white('npx wuz'),
  labelWork: chalk.white.bold('      Work:'),
  labelTwitter: chalk.white.bold('   Twitter:'),
  labelGitHub: chalk.white.bold('    GitHub:'),
  labelLinkedIn: chalk.white.bold('  LinkedIn:'),
  labelWeb: chalk.white.bold('       Web:'),
  labelCard: chalk.white.bold('      Card:')
}

원하는 만큼 색상을 사용할 수 있습니다. 더 많은 옵션을 보려면 chalk 패키지를 확인하십시오.

완료되면 npm run dev를 다시 실행하십시오. 모든 것이 좋아 보인다면 NPM에 게시할 준비가 된 것입니다.

NPM 계정이 없는 경우go make one! 계정을 설정했으면 npm login를 실행하고 프롬프트에 따라 계정에 로그인합니다. 완료되면 npm publish 를 실행하십시오. 패키지 이름을 변경했는지 확인하십시오.

모든 것이 올바르게 설정되면 성공 메시지가 표시됩니다! npx <your_username>를 실행해 보십시오.

작업이 완료되면 스크린샷을 찍어 여기로 보내주세요. 또는 보고 싶습니다!