※スマホ対応はしてません。

カテゴリー: JavaScript

`npm install` の代わりに `npm ci` が使えるかも(NPMおれおれAdvent Calendar 2019 – 04日目)

カテゴリー: JavaScript

HERSHY'SのAdvent Calendar(本物)の4日目を開けたところ。
NPMおれおれAdvent Calendar 2019 – 04日目

先にまとめ

  • npm ci は npm install と同じように、全依存パッケージをインストールする
  • npm install は package-lock.json を更新することがある
  • npm ci は package-lock.json を更新しない
  • npm ci は node_modules を削除してからインストールする

npm ci ってなんだ

npm install に似ているが、CI のような自動化された環境での利用が想定されているもの。あるいは開発環境でクリーンインストールするのにも使える。処理はいくつかの機能を省略するので、npm install より圧倒的に高速な場合がある。

ドキュメントを読むとそんな感じらしい。

基本的には CI で回す場合はこちらを使いましょう、という理解で良さそう。CI ってなに?くらいの段階の方は別に npm install だけでも大きな問題はないはず。

npm install との違い

  • package-lock.json or npm-shrinkwrap.json が必須。ないとコケる
  • それらが package.json の記述と矛盾する場合、コケる
  • 依存追加には使えない。(npm install xxx でやる)
  • node_modules はいったん全消しされる
  • package-lock.json を更新しない

npm install の問題点

npm install は package-lock.json を更新することがしばしばあります。

理由は package.json に記述する semver が幅のあるバージョンを許すためで、また package-lock.json は(”lock” という名前に反して)node_modules の実際を反映するものだからです。本当にロックしちゃうとそれはそれで問題があったため変更されたようで。マジかよ。

逆に npm ci は package-lock.json を元に node_modules を構築します。

npm ci の使いどころ

  • CI で回す場合
  • git clone 直後
  • 何かがおかしいので node_modules を空にしてやり直すとき
  • 過去の状態を復元するとき

インストールスクリプト

ちょっと仕組みがよくわかんないんだけど、npm ci したら以下のスクリプトは自動で実行されました。npm install 扱いなんですね。

  • preinstall
  • install
  • postinstall

ソース ちらっと見てみたけどなんもわからん。

おしまい

というわけで、CI では npm ci を使うと良さそうです。

package-lock.json については後日また改めて。

参考

NPMスクリプトに `npx` や `node_modules/.bin` は書かなくて良い(NPMおれおれAdvent Calendar 2019 – 03日目)

カテゴリー: JavaScript

HERSHY'SのAdvent Calendar(本物)の3日目を開けたところ。
NPMおれおれAdvent Calendar 2019 – 03日目

パスは自動で追加されるので、気にせずそのまま実行ファイル名を指定してしまって大丈夫。

例えばこれ↓だけで node_modules/.bin/tsc が(あれば)実行されます。

{
  "scripts": {
    "build": "tsc"
  }
}

同様に npx も書く必要なし。プロジェクトの外、グローバルにインストールされたものを呼び出すってなら必要だけど、ローカルにインストールするべきですよ。

ドキュメントの記載

In addition to the shell’s pre-existing PATH, npm run adds node_modules/.bin to the PATH provided to scripts. Any binaries provided by locally-installed dependencies can be used without the node_modules/.bin prefix.

シェル既存の PATH に加えて、npm run は node_modules/.bin を PATH へ追加してスクリプトへ提供します。ローカルインストールされた依存のバイナリーは、node_modules/.bin 接頭辞なしで利用可能です。

だそうです。

`npm run …` のスクリプトに引数を与えるには `–`(NPMおれおれAdvent Calendar 2019 – 02日目)

カテゴリー: JavaScript

HERSHY'SのAdvent Calendar(本物)の2日目を開けたところ。
NPMおれおれAdvent Calendar 2019 – 02日目

先にまとめ

  • 間に -- を挟む
    • e.g. npm run lint -- --fix

ESLint の例

例えばESLint は --fix で(可能な内容なら)自動で修正してくれます。

$ eslint src --fix

が、例えば npm run lint で ESLint が動くとして、これだと自動修正は動かないです。

$ npm run lint --fix

これは --fix が ESLint じゃなくて NPM の方の引数として認識されてしまうためです。

スクリプトの方に与える場合は -- を挟みます。

$ npm run lint -- --fix

これで OK 。

スクリプトの内容が複雑な場合

ls はディレクトリーの内容(ファイルとか)を一覧表示するコマンドです。

sl はジョークコマンドで、汽車が走るやつです。

&& で複数繋がっている場合

例えばこんなスクリプトだとどうなると思いますか。

[json] “scripts”: { “sl-ls”: “sl && ls” }, [/json]
$ npm run sl-ls -- -l

さあどれだ。

  1. 最初のコマンド sl に -l がかかる
  2. 最後のコマンド ls に -l がかかる
  3. 両方のコマンド sl, ls に -l がかかる

ドキュメントにも特段乗っていないみたいなんだけど、試してみると最後のにのみかかります。

というかたぶん連結してるだけだよね。ターミナルの出力もそんな感じだし。

$ npm run slls -- -l

> @ slls /path/to/project
> sl && ls "-l"

total 308
drwxrwxrwx 1 ginpei ginpei   4096 Nov  2 00:29 node_modules
-rwxrwxrwx 1 ginpei ginpei    210 Nov  2 02:22 package.json
-rwxrwxrwx 1 ginpei ginpei 314804 Nov  2 00:26 yarn.lock
…

pre, post がある場合

さてこれはどうでしょう。

[json] “scripts”: { “prels”: “sl”, “ls”: “ls”, “postls”: “sl” }, [/json]
$ npm run ls -- -l
  • prels に -l がかかる or かからない
  • ls に -l がかかる or かからない
  • postls に -l がかかる or かからない

これはドキュメントに掲載されています。

The arguments will only be passed to the script specified after npm run and not to any pre or post script.

引数は npm run の後ろに指定されたスクリプトにのみ渡され、pre や post のスクリプトには渡されません。

参考

`npm run` は正式なコマンドじゃなかった件(NPMおれおれAdvent Calendar 2019 – 01日目)

カテゴリー: JavaScript

HERSHY'SのAdvent Calendar(本物)の1日目を開けたところ。
NPMおれおれAdvent Calendar 2019 – 01日目

npm run build なんてのをターミナルに入力した経験があると思うんですが、実はこのサブコマンド run は run-script のショートカットです。

というわけでこれ↓が「正式」な入力ということになります。

$ npm run-script build

いやこんなの使ってるひと見たことないけど!

他の

あとまた他にも別名が用意されていて、rum というのも使えます。N と M 。タイポする人が多かったんだろか。

さらに urn というのも。慌ててるとやっちゃうのかな。

参考

--help で出てきます。

$ npm run --help
npm run-script <command> [-- <args>...]

aliases: run, rum, urn

NPM おれおれAdvent Calendar 2019やります。ひとりで。

カテゴリー: JavaScript

毎年恒例のおれおれアドベントカレンダーです。

ちなみに去年は配列の話でした。

本物の「アドベントカレンダー」の写真。かわいらしいイエティやサンタのイラスト。
今年は HERSHEY’S のアドベントカレンダーです。おいしい。

今年は NPM について調べながら記事にしていきます。あんまり詳しくないので頑張ります。

  1. npm run は正式なコマンドじゃなかった件
  2. npm run … のスクリプトに引数を与えるには --