今年お世話になったCLIコマンド集
ヒストリ履歴からよく使ってるものをお焚き上げする。
注意点: npm 周り、グローバルコマンドは npm i -g
で入れてて、ローカルで扱うものは yarn で使うという癖がある
追記: シェルじゃなくてCLIだろと言われるのが多かったので訂正した
vscode
$ code . -r
-r
が肝で、新しいウィンドウを生成せず、既存のウィンドウを開き直す。
yarn
$ yarn install --prefer-offline
yarn install 時にローカルキャッシュを優先する。テザリング環境下でリポジトリを作成するのに便利。
フリーランスになってから出先で作業することが多く、ギガ足りない問題が多々発生した。
git
$ git clone <github-url> --depth 1
HEAD だけ clone する。テザリング環境下で便利
typescript
$ yarn tsc -p . --noEmit $ yarn tsc -p . --noEmit -w # watch mode
TypeScript でビルドせずに型チェックだけを行う。
これが便利というか、これで型チェック + CI でのテストを行っていて、webpack の ts-loader では transpileOnly: true としている。基本は VSCode 上で型エラーを見ている。
prettier
$ npm i -g prettier $ prettier 'src/**' --write
指定ディレクトリ以下を prettier で整形する
firebase
$ npm i -g firebase-tools $ firebase init
firebase プロジェクトの雛形を作成するコマンド。対話型で、質問に答えるとそれに沿ったボイラープレートが作成される。
$ firebase deploy --only firestore:rules
firestore.rules が動いているか検証をするのに、これを叩きまくっていた。 firebase はデプロイに時間がかかるやつが多いので、デバッグ時は --only 必須。
gibo
https://github.com/simonwhitaker/gibo
$ gibo dump Node OSX > .gitignore
.gitginore
を自動生成
netlify
$ npm i -g netlify-cli $ netlify deploy -d dist --prod $ netlify open:site
dist 以下を netlify にデプロイする。今年は netlify に本当にお世話になった。代わりに github pages を使わなくなった
hub
$ hub create mizchi/myprj
GitHub にリポジトリを作成する。前からよく使っていたが、今年は本当によく使った。
しかし、未だに hub で pr を作成するコマンドの引数が覚えられない…
parcel
$ yarn add parcel-bundler -D $ yarn parcel src/index.html --open
本番環境では相変わらず webpack を使っているが、実験プロジェクトは全部 parcel でやるようになった。
フロントエンドのまどろっこしい諸々をすっ飛ばして SPA を作り始めることができる。
$ parcel build src/index.html && netlify deploy -d dist --prod
netlify と組み合わせて、今年はこのコマンドを叩きまくった。今年の MVP コマンド。
ghq
https://github.com/motemen/ghq
$ ghq get -u <github-url>
GitHub リポジトリはすべて ghq で管理するようにした。
面白半分で作って、途中から GitHub に移したものをどう扱うかはまだ悩んでいる。
pwmetics
$ npm i -g pwmetrics $ pwmetrics http://localhost:1234
指定 URL をヘッドレス Chrome で開いて、そのパフォーマンスメトリクスを取得する。
lighthouse を起動するのが面倒なときに、パフォーマンス取得するのに使っている。lighthouse はパラメータが多いが、こっちは小さくまとまってる。
lighthouse-cli
$ npm install -g lighthouse $ lighthouse https://google.com
lighthouse を cli から起動する
webpack-bundle-size-analyzer
$ npm i -g webpack-bundle-size-analyzer $ yarn webpack --json | webpack-bundle-size-analyzer
webpack-bundle-analyzer が HTML でレポートを作成してブラウザを開かないといけないのに対し、これはターミナルで完結してビルド後の JS のサイズを調査することができる。
実行例
$ webpack-bundle-size-analyzer build/client/stats.json favalid: 330.87 KB (11.5%) ramda: 309.32 KB (93.5%) <self>: 21.54 KB (6.51%) react-virtualized: 326.87 KB (11.3%) core-js: 243.11 KB (8.42%) lodash: 237.18 KB (8.21%) redux-form: 199.7 KB (6.92%) hoist-non-react-statics: 2.02 KB (1.01%) <self>: 197.68 KB (99.0%) date-fns: 170.93 KB (5.92%) react-router: 137.13 KB (4.75%) hoist-non-react-statics: 1.35 KB (0.988%) <self>: 135.77 KB (99.0%) react-dom: 98.98 KB (3.43%) styled-components: 76.72 KB (2.66%) ...
mdbuf
https://markdown-buffer.netlify.com
シェルじゃないが、自作の高速な markdown preview 環境。この記事もここで書いている。
最近執筆が多いので、本当に作ってよかった。
ただ今ちょっとバグっているパターンを色々見つけていて、直したい。
書いた動機
フロントエンドのパフォーマンスチューニングの調査と、検証用の小さなプロトタイプを作ってデプロイすることが多い。それぞれは大したことないが、知ってるかどうかで生産性が大きく変わる実感がある。
他の人の手癖を知りたい。