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

カテゴリー: JavaScript

`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 … のスクリプトに引数を与えるには --

Babelで “Unknown option: .targets.” と言われたら括弧の確認をしよう。

カテゴリー: JavaScript

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

$ 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 の設定なんだねー。

参考

久しぶりのReactアプリでLinkがRouterの外で使われている、と言われる。

カテゴリー: JavaScript

メモ。

ちょっと久しぶりに動かした 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';

色々古いからなあ。