あーる

まえおき

スクラップ内ではnpxについて言及はしないため、以前投稿した以下の記事を参考のこと。

あーる

npm-check-updates

npm（yarn）用の依存関係アップデート確認ツール。アップデートも可能。

実行方法

Package.jsonがあるディレクトリ内で以下を実行する。

$ npx npm-check-updates

更新があるパッケージを確認して列挙してくれる。

$ npx npm-check-updates -u

とすることでPackage.jsonのパッケージが最新に更新される。

上書きされたPackage.jsonを確認した上で、npm install・yarn installでパッケージのアップグレードを実行する。

All dependencies match the latest package versions :)と出力されればすべての依存関係は最新であることがわかる。

あーる

Serve

静的サイト、SPAの表示確認用サーバー。Next.jsなどで有名なVercel社が提供している。

https://www.npmjs.com/package/serve

実行方法

$ npx serve

   ┌──────────────────────────────────────────────────┐
   │                                                  │
   │   Serving!                                       │
   │                                                  │
   │   - Local:            http://localhost:3000      │
   │   - On Your Network:  http://192.168.11.4:3000   │
   │                                                  │
   │   Copied local address to clipboard!             │
   │                                                  │
   └──────────────────────────────────────────────────┘

デフォルトだとlocalhost:3000でサーバーが立ち上がる。-pオプションでポート番号の変更も可能。

# 8000で開く場合
npx serve -p 8000

実行した配下にあるディレクトリをブラウズし、ブラウザから開くこともできる。
tailwindcssなどで手軽くモックを作成するときなどにあると重宝する。

あーる

fast-cli

回線速度の計測ツール。

https://www.npmjs.com/package/fast-cli

実行方法

$ npx fast-cli

何もオプションをつけずに実行した場合は、ダウンロード速度のみ計測開始される。ターミナルからさくっと回線速度を測れるのはあると便利。

利用できるオプションはnpx fast-cli --helpで確認できる。

詳しくはこちらの過去記事(ターミナルから爆速で回線速度を計測する【fast-cli】)を参考。

あーる

sort-package-json

Package.json用のソートツール。

実行方法

Package.jsonが存在するディレクトリ内で実行する。

$ npx sort-package-json

npx create-reacr-app my-appで作成したReactプロジェクトのPackage.jsonを整形した例。

.package.json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.2.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

npx sort-package-jsonを実行後。

.package.json

{
  "name": "my-te",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build": "react-scripts build",
    "eject": "react-scripts eject",
    "start": "react-scripts start",
    "test": "react-scripts test"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.2.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  }
}

このスクラップは2022/07/01にクローズされました