npxについての理解

[syunto07ka]

rel https://github.com/Syunto07ka/jewelry_box/pull/27#pullrequestreview-386687017

[syunto07ka]

https://nodejs.dev/the-npx-nodejs-package-runner#installation-less-command-execution

There is another great feature of npx, which is allowing to run commands without first installing them.

つまり、installしなくてもcommandを叩くことができる。

課題となっている部分の答えは、すでにeslintがinstallされているのでnpxで叩く必要がない。 代わりに

./node_modules/.bin/hoge [some file or command] を叩くと、installしたmoduleのコマンドが叩ける

kakiishuntsutomunoMacBook-Pro:jewelry_box syunto$ ./node_modules/.bin/eslint src/App.tsx

/Users/syunto/development/jewelry_box/src/App.tsx
  12:1  error  Expected indentation of 8 spaces but found 4  indent

✖ 1 problem (1 error, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

kakiishuntsutomunoMacBook-Pro:jewelry_box syunto$

[syunto07ka]

kakiishuntsutomunoMacBook-Pro:jewelry_box syunto$ npm eslint src/App.tsx

Usage: npm <command>

where <command> is one of:
    access, adduser, audit, bin, bugs, c, cache, ci, cit,
    clean-install, clean-install-test, completion, config,
    create, ddp, dedupe, deprecate, dist-tag, docs, doctor,
    edit, explore, fund, get, help, help-search, hook, i, init,
    install, install-ci-test, install-test, it, link, list, ln,
    login, logout, ls, org, outdated, owner, pack, ping, prefix,
    profile, prune, publish, rb, rebuild, repo, restart, root,
    run, run-script, s, se, search, set, shrinkwrap, star,
    stars, start, stop, t, team, test, token, tst, un,
    uninstall, unpublish, unstar, up, update, v, version, view,
    whoami

npm <command> -h  quick help on <command>
npm -l            display full usage info
npm help <term>   search for help on <term>
npm help npm      involved overview

Specify configs in the ini-formatted file:
    /Users/syunto/.npmrc
or on the command line via: npm <command> --key value
Config info can be viewed via: npm help config

npm@6.13.6 /Users/syunto/.nodenv/versions/13.8.0/lib/node_modules/npm

Did you mean one of these?
    edit
    link
    list
kakiishuntsutomunoMacBook-Pro:jewelry_box syunto$

ちなみにnpmは外部moduleのコマンドはたたけないっぽい

[piro0919]

@Syunto07ka

ほぼ正解です、よく調べられていますね 💯

以前は、プロジェクトに追加できないnpmパッケージを叩く場合、npm i -g hoge と叩き、ローカルのグローバル環境にインストールする必要がありました この場合、バージョンアップについて行きづらく、そもそもグローバルにパッケージをインストールをするということ自体、あまり良いことではありません

それを解決するためにnpxが開発され、その場でのみnpmパッケージを叩けるようにした、という感じですね npxだと、常に最新のバージョンが使用可能であり、かつローカルの環境が汚れないということで、メリットが大きいというわけですね

create-react-app の公式サイトにも書かれていますね 😄

[syunto07ka]

OKということで、こちらのissueは閉じます！

[syunto07ka]

ほぼ正解です、よく調べられていますね 💯

うれすい