tamakipedia

フロントエンドエンジニア。Typescriptもう特訓中です。一日の振り返りや学んだことをちょっとずつ吐いています。

【 javascript 】npx と npm の違い

javascript

おはようございます！ 大学最後の卒論発表に向けて着々と準備が進んでまいりました。
やはりいつになっても人前で話すことは慣れないですね....

ということで今日もいってまいりましょう

42tokyo.jp

シリコンバレーにある学費無料、エンジニア養成機関"42"が今年東京でもスタートするとか。
youtubeでプロモーション動画見たけどめちゃーめちゃかっこいい笑

P2Pラーニングという、いわば教員を立てず生徒同士が
先生になって教えあうという仕組みを取っていることで有名ですよね。

まいいや、今回はnpmとnpxについて

最近からnpmの代わりにnpxを使うことが多くなりました。
その違いを説明できたらなと思います。

npm とは？

  • node package manager の略
  • node.jsというサーバーで動くjavascriptで書かれた、パッケージ管理ツール

npm ~ でパッケージ（工具）をインストールして
開発を有利に進めていくのだが
npx でも同じことができる....

君は一体なんなんだ...

npx とは

  • npmを操作するコマンド
  • node_modules/.bin にインストールされていないパッケージを実行することができる。
  • コマンド入力後には、ローカルに残らず消去されるので肥大がか防げる

万能すぎますね。

試しにnpx @angular/cli --versionを打ってみます。
anguler cli は、angularアプリを生成するときに
簡単なコマンドだけで骨組みを生成できちゃうライブラリです。 (angular使ったことない笑)

~/d/t/react ❯❯❯ npx @angular/cli --version



     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 9.0.3
Node: 12.6.0
OS: darwin x64

Angular: 
... 
Ivy Workspace: 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.900.3
@angular-devkit/core         9.0.3
@angular-devkit/schematics   9.0.3
@schematics/angular          9.0.3
@schematics/update           0.900.3
rxjs                         6.5.3

実行したパッケージのコマンドがうまく実行できてないことがわかります。

~/d/t/react ❯❯❯ ng

zsh: correct ng to bg [nyae]?

www.npmjs.com