先にまとめ

• 間に -- を挟む
  • 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 はジョークコマンドで、汽車が走るやつです。

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

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

$ 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 がある場合

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

$ 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-script | npm Documentation
• shell – What does “–” (double-dash) mean? (also known as “bare double dash”) – Unix & Linux Stack Exchange

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 について調べながら記事にしていきます。あんまり詳しくないので頑張ります。

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

こんなのにハマってしまった。

$ npx babel xxx.js -o xxx.compat.js 
ReferenceError: [BABEL] /path/to/xxx.js: Unknown option: .targets. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.
…

間違った設定 in package.json ：

{
…
  "babel": {
    "presets": [
      "@babel/env",
      {
        "targets": {
          "ie": "11"
        }
      }
    ]
  }
}

修正後：

{
…
  "babel": {
    "presets": [
      ["@babel/env",
      {
        "targets": {
          "ie": "11"
        }
      }]
    ]
  }
}

presets の値を ["@babel/env", {…}] から [["@babel/env", {…}]] にしました。env の設定なんだねー。

参考

• Unknown option: .targets · Issue #6854 · babel/babel

メモ。

ちょっと久しぶりに動かした React アプリでこれ言われた。

Error: Invariant failed: You should not use <Link> outside a <Router>

なんでかな Router の中なんだけどなあと思ったけど、Router を react-router じゃなくて react-router-dom から import したらうまく動くようになった。

Before:

import { Route, Router, Switch } from 'react-router';

After:

import { Route, Router, Switch } from 'react-router-dom';

色々古いからなあ。