はのフロントエンド入門 #1 npm編

なにこれ

仕事でフロントエンドエンジニアっぽいことをやっている私ですが、 基礎知識があんまりきっちり身についていないまま React, Redux でアプリを書き始めてしまっています。

師匠の書くコードを見ながらなんとなく理解しつつ、なんとか仕事をこなせてはいますが、 流石にこのままじゃマズい！ということで少しずつ基礎を固めようと思い、「はのフロントエンド入門」でシリーズ化して記事を書くことにしました。

記念すべき第一回は npm です。 package.json を入れようかと思ってましたが想像以上にボリュームが増えたので次に回しました。

あ、継続性を重視するために一回一回はユルく軽く行きたいと思っていますのでよろしくお願いします。

npm とは

www.npmjs.com

npm makes it easy for JavaScript developers to share and reuse code, and makes it easy to update the code that you’re sharing, so you can build amazing things.

node.js 用のパッケージ管理ツール。だと理解している。 node をインストールすると一緒についてくるので、特に意識しなくても使えるようになってるはず。

基本的な使い方

パッケージ管理ツールなので、当然色々な node のパッケージを入れるために使います。

docs.npmjs.com

とはいえこのインストールにも幾つか種類があるので、一通り確認しておきます。

docs.npmjs.com

よく使いそうなのは以下の

$ npm install
$ npm install <package-name>
$ npm install --save-dev <package-name>
$ npm install -g <package-name>

あたりでしょうか。

引数なしで npm install すると、

Install the dependencies in the local node_modules folder.

...

By default, npm install will install all modules listed as dependencies in package.json.

とある通り、 package.json にあるインストール対象パッケージを node_modules 以下にインストールします。

引数として何らかのパッケージ名を与えた場合、指定されたパッケージを node_modules 以下にインストールします。 バージョン指定なども出来ますが、特に指定しなければ最新版が入ります。普通のパッケージ管理システムの挙動です。

--save-dev オプション付きにすると、 devDependencies として指定パッケージがインストールされます。 詳細は多分次回の package.json になりますが、開発環境だけで必要なパッケージであればこのオプションが適しています。

フロントエンド開発だと割とこの系統が多くなる印象。 babel とか、 webpack とか。

最後の -g 付きはグローバルにパッケージをインストールします。

docs.npmjs.com

そんなに使用頻度は多くないですが、たまに使います。

If you want to use it as a command line tool, something like the grunt CLI, then you want to install it globally.

On the other hand, if you want to depend on the package from your own module using something like Node's require, then you want to install locally.

CLIツールのパッケージを入れたい場合はグローバルに、 require などでプログラム中から呼び出して使いたい場合はローカルに、と書いてます。

…書いてるんですが、上述の devDependences で入れたいパッケージもこの前者のケースであることが多い…ような気がします。あんまり自信ないですが。 プロジェクトを横断して使えるような、特定プロジェクトに依存しないCLIツールぐらいしか -g で入れないのが正しそうではあります。

ただ、その場合多分パスが通らないので、 devDependences としてインストールしたツールをどうやって使うのか問題が生じる気がしています。 この辺はちょっと次回の package.json とも関わるので次回に回します。

…インストールしか解説してないけど、あとはだいたい package.json の話になるはずなのでこれでいいことにします。