正在设置 `npx 用户名` 卡片！
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
我最近在推特上看到了民宿发布的这条很棒的帖子：
社区反响非常棒，我很快就决定自己也做一个：
今天，我想向大家展示一下制作过程。
首先，我们来克隆这个仓库：
git clone https://github.com/bnb/bitandbang
现在，我们需要修改一些东西。首先，我们打开文件package.json并更新一些细节。首先，更改包名称：
name: <your username>
这样你就可以发布到 npm 并获取你的卡片了npx <your_username>。
您还可以更新描述和作者字段，以反映您的信息。
如果我们运行命令npm run dev，就会看到蒂尔尼的信息显示出来。让我们把它设为你的卡片。
打开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)))
您可以尝试修改dataconst 参数并添加您的信息。对我来说，它看起来会是这样：
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:')
}
您可以尽情尝试各种颜色——查看粉笔套装，了解更多选择。
完成后，npm run dev再次运行。如果一切正常，我们就可以发布到 NPM 了。
如果你还没有 NPM 账号，赶紧去创建一个！账号创建完成后，运行命令npm login并按照提示登录你的账号。登录完成后，运行命令npm publish。确保你已经更改了包名。
如果一切设置正确，您应该会看到成功消息！尝试运行npx <your_username>。
完成后，截个图发给我（这里或推特都可以）——我很想看看！
文章来源：https://dev.to/wuz/setting-up-a-npx-username-card-1pip