Help us understand the problem. What is going on with this article?

npxでGitHubにあるコードを実行する

More than 1 year has passed since last update.

Node.jsやフロントエンドではnpmを使ってライブラリやCLIツールを使うことは多いと思います。
npmでCLIツールを使うときにnpxを使う方も多いかと思います。
しかしnpmjs.comに上がっているバージョンが古かったり、開発中のパッケージを使いたいなどの理由でGitHubにあるコードをそのまま使いたい場面があります。今回はそんなときの方法を紹介します。

npx

npmで一度だけCLIを実行し、CLI実行後は使ったパッケージはローカルに残らないnpxといものがあります。
非常に便利で筆者もcreate-react-appexpress-generatorで雛形を作成するときとかに使っています。
npxに関しては『npxが結構良さそうな件について』や『npm 5.2.0の新機能! 「npx」でローカルパッケージを手軽に実行しよう』にて紹介されているのでそちらをお読みください。

GitHubにあるコードをnpxで実行する

このnpx、npmjs.comにpublishされているコードだけでなくGitHub上にあるコードを実行することも可能です。
以下はnpxでexpress-generatorをGitHub上からコードをダウンロードして実行する例です。
実行されるコードはmasterブランチのコードです。

npx github:expressjs/generator my-express-app

上記のようにnpx github:${ユーザー名}/${リポジトリ名}で実行可能です。普通にnpxを実行するときのパッケージ名の部分をgithub:${ユーザー名}/${リポジトリ名}に変更するだけです。
あとは普通にnpxを使うときのようにコマンドライン引数を指定することも可能です。

注意点

  • プロジェクトルートにあるpackage.jsonに記載されているbinのコードがGitHub上に存在していなければいけません。
  • npmjs.comにpublishされるコードがサブディレクトリに置いてあったりしてプロジェクトルートにない場合もGitHub上のコードをnpxで実行することはできません。create-react-appなんかは実行できません。

所感

この記事を書くきっかけになったのがapi-designerというパッケージでnpmjs.comにpublishされているのにはバグがあるけどGitHubのmasterにあるコードは修正されていました。『RAML: api-designer実行時にrequestが見つからずにエラーになる件について

同じようにバグ修正されいているけどpublishされていないパッケージは他にもあると思います。
あとnpmにpublishすることはできないようなprivateなリポジトリのコードを実行する場合も便利かと思います。
そういったときに本記事で紹介した方法が役立てば幸いです。

最後までお読み頂きありがとうございました。質問等があればコメント欄またはTwitter(@shisama_)までお願いいたします。

shisama
Node.js Core Collaborator. 関西Node学園Organizer.
https://shisama.dev
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away