先週、Nagoya.php#17でLTをしていた方がnpxを使った電子名刺で自己紹介をしていて、
めちゃくちゃカッコよくて真似して作ってみました！
npxで名刺作れるのか！作りたい！#nagoyaphp
— しがががが (@kin29ma_n) August 28, 2019
ターミナルで
$ npx kin29
を打つと以下スクショのように情報がでるようにしました！
追記(2022/09/10)：使う機会がないので非公開&削除しました😅
仕組み
npx <user-name>を実行すると、
該当のnpmパッケージを落としてきて、package.jsonにある"main": "/bin/card.js"を実行する(テキストファイルをconsole.logする)とのこと。
package.json
{
...
"main": "/bin/card.js",
"bin": {
"kin29": "./bin/card.js"
},
...
"scripts": {
"prepublish": "npm run build",
"build": "node build.js",
"dev": "npm run build && node ./bin/card.js",
"lint": "standard",
"test": "echo \"Error: no test specified\" && exit 1"
},
...
"scripts"にあるように、build.jsを自分用に修正をして、
npm run buildすると、出力ファイルである./bin/outputができます。
npm run dev で、 npx * のシュミレーションができます。
bin/card.js
#!/usr/bin/env node
// 👆 Used to tell Node.js that this is a CLI tool
'use strict'
const fs = require('fs')
const path = require('path')
const output = fs.readFileSync(path.join(__dirname, 'output'), 'utf8')
console.log(output) // bin/output に出力テキストがある
そもそも、npxとは？
公式サイト：https://www.npmjs.com/package/npx
npm5.2.0以上が導入されていれば、npxコマンドも使えるそうです。
指定されたnpmパッケージがローカルに存在しない場合には、インストールをしてコマンド実行するものだそうです。
npmと違うのは、たとえローカルにインストールされていなくてインストールすることになっても、一時的にしかインストールせず実行後は削除されるらしいです。
ローカルを汚さずにすみますね😄
npmとnpxを比較してみた💡
● npm
:~/test-npm$ ls //まだローカルには何もない :~/test-npm$ npm install eslint ... + eslint@6.3.0 added 119 packages from 75 contributors and audited 176 packages in 5.246s found 0 vulnerabilities :~/test-npm$ ls //ローカルにインストールされた！ node_modules package-lock.json :~/test-npm$ node_modules/.bin/eslint --version v6.3.0
●npx
:~/test-npx$ ls :~/test-npx$ npx eslint --version npx: 119個のパッケージを4.678秒でインストールしました。 v6.3.0 :~/test-npx$ ls //ローカルにインストールされてないよ^^
npmに公開する
npxを使った電子名刺を公開するためには、npmで公開する必要があります。
やりかた
- https://www.npmjs.com/ にアカウントを登録する。
$ npm adduserでログイン(1の登録情報を使う)する。- GitHubリポジトリを作成し、masterにpushする。
$ npm publishでnpmに公開をする。// タグをつけてpushする。 $ git tag -a v1.0.0 $ git push origin tags/v1.0.0 // npmに公開する。 $ npm publish ./
- npx <user-name> を試して、確認する。
さいごに
composerにもnpxみたいな機能ないんかな？って思って、
「composer npx」でググったら、https://github.com/composer/composer/issues/7272
↑でなんか、あるよー的な雰囲気なことを書いてると私の英訳力では感じたのですが、本当にできるのかよくわからんです 😅
参考：
[Qiita]npm 5.2.0の新機能！「npx」でローカルパッケージを手軽に実行しよう