はじめに
先日、仕事でご一緒した方が、npxを使ったBusiness Cardで自己紹介をされていて、素敵だな〜と思ったので、真似させていただき作ってみました！！
デモ
まず、早速デモをご紹介します。
ターミナルで
npx misa335
と入力してみてください。
このように表示されるはずです！
`♥･*:.｡ ｡.:*･ﾟ♡･*:.｡ ｡.:*･ﾟ♡･*:.｡ ｡.:*･ﾟ♡･*:.｡ ｡.:*･ﾟ♡･*:.｡ ｡.:*･ﾟ♥
Misako Kondoh
GitHub: https://github.com/misa335
Twitter JP: https://twitter.com/misas2pink
Twitter EN: https://twitter.com/__misakd
Qiita: https://qiita.com/__misakd
LinkedIn: https://www.linkedin.com/in/misa-k-engineer/
Please contact me with one of channels above ;D
♥･*:.｡ ｡.:*･ﾟ♡･*:.｡ ｡.:*･ﾟ♡･*:.｡ ｡.:*･ﾟ♡･*:.｡ ｡.:*･ﾟ♡･*:.｡ ｡.:*･ﾟ♥`
npmパッケージのリンク
https://www.npmjs.com/package/misa335
作り方
① プロジェクトの作成
npm initで新規プロジェクトを作成します。
② package.jsonの編集
package.jsonを編集して、npx<your-project-name>を実行すると、npmパッケージを落として、package.jsonに記載された"main": "index.js"が実行されるように設定します。
package.json
{
...
"main": "index.js",
"bin": {
"misa335": "index.js"
},
...
③ Business Cardの作成
Business Cardとして表示させたい項目を、index.jsのconsole.log内に記載します。
また、1行目に#!/usr/bin/env nodeと、nodeのインタプリタを実行する記述をします。
index.js
#!/usr/bin/env node
console.log('
Business Cardとして表示する項目
');
ローカルでBusiness Cardが表示されるかどうか、
node index.jsで確認することができます。
④ Githubにpushする
任意のGithubレポジトリにpushします。
npmに公開する方法
① npmアカウントの作成
https://www.npmjs.com/ で、npmアカウントを作成します。
② npmへのログイン
ターミナルでnpm loginと打ち、Username, Password, Email Addressを順に入力してnpmにログインします。
③ プロジェクトの公開
npm publish --access publicと入力すると、npm上でプロジェクトが公開されます。
最後に、<npx your-project-name>を試して、Business Cardが表示されるか確認します。
おわりに
簡単にnpxを使ったBusiness Cardが作成できました！
よかったらぜひ試してみてください♪
また、SNSでつながっていただけると嬉しいです😆
↧