Open32

npm - ビギナーズガイド (2020.12.29)

図が見やすい

npm とその他ライブラリ (gulp, webpack, ...) との併用法

https://qiita.com/kamykn/items/45fb4690ace32216ca25

npm init -y 質問省略
npm i インストール
npm i gulp webpack express react 複数パッケージを一気にインストール

は知ってたけど

npm un アンインストール
npm i -D "package" npm i "package" --save-devの省略バージョン

は知らなかった

--save はnpm v5から標準でつくようになったので省略可能です。

👆

知らなかった、省略可なのか❗


アップデート&アンインストールの弊害

npm update "package" アップデート

パッケージのインストールやアンインストールを繰り返すと、キャッシュゆえに予期せぬエラーが発生しえます。

node_modules フォルダーを削除して、
packge.json に記載されたパッケージを再インストール

すると解決する場合があるらしい

npm についての面白い考察

https://qiita.com/chuck0523/items/dafdbd19c12efd40e2de

これによると
grep, sed, awk, pipe の知識が必要❓

ん❓
npm を使って linux/unix コマンドも動くの?

{
  "name": "npm-scripts-example",
  "version": "1.0.0",
  "description": "npm scripts example",
  "scripts": {
    "linux": "rimraf ./dist && mkdir dist",
  }
}

npm には明確なデメリットもあるらしい

例えば

  • JSONファイルにコメントを書くことが出来ない

npm から yarn に乗り換える事を考えてる時に読む

https://qiita.com/tonkotsuboy_com/items/0242928ab32794d11f76

yarn って意外と学習コストが低い❗

npm install "package" --save-dev = yarn add "package" --dev

めちゃくちゃ似てる❗

CLI command list

npm -v, -version npm バージョン

npm -h, -help, -list, -search ヘルプコマンド

これを実行すると


    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 -l, -ls だとさらに詳細な説明が
  • npm help "command" だとさらにさらに詳細な説明が
  • npm doc "command" 詳細な説明をウェブ(GitHub)で見たい時


この中で最も使うコマンド

  • init
  • install(i)
  • run

後は下記リンクでチェック❗

ja-1

https://qiita.com/ymdymd/items/1dc038b32d298ff31de5

ja-2

https://qiita.com/rubytomato@github/items/1696530bb9fd59aa28d8

en-1

https://devhints.io/npm

npm xmas でクリスマスツリー出てきた\(^o^)/

                     ★
                    /\
                   /  \
                  /   @\
                 /⸮    &\
                /& i     \
               /⸛     ⸮   \
              /           ⁂\
             /@ ⸮   ⸮     。 \
            /i⸛⸛ ⸛i⁂i  @  ⸮& \
           /  ⁂ i ⁂ ⁂   @    ⸮\
          /    ⸛  @ ⁂& &    ⸛ @\
         /             @。 &     \
        / ⸮  ⸛@  。   。&@      @ i\
       /@ 。@&⸛     ⸮⁂    @      。⁂\
      /⸮@  ⁂ @ &  ⁂ ⁂   ⸮ i&  。 i  \
     /。⁂   @@   ⸛⁂⁂⸮ @     ⸛ &⸛ i   \
    /   ⸮⸛    @     ⸛  &。  @  ⸛   ⸛ @\
   /&     ⸛   @⁂  i⸮ ⸮ i@  ⸮@ i⸛   @ i\
  /  ⸛ ⸮  。⁂⁂。 ⸛ 。 i ⸮ ⸮  ⁂⸛ ⸮  ⁂⸛  i@ \
 / ⸛              ⸛     i⸮     &⁂ 。   ⸮i\
 ^^^^^^^^^^^^^^^^^^^|  |^^^^^^^^^^^^^^^^^^^
                    |  |                   

元ネタ

https://gist.github.com/AvnerCohen/4051934

npm を学習した後にやる事

下記の記事を読むと、npm を覚えた次にやる事が明確になります

  • タスクランナー: gulp, grunt
  • ビルドヘルパー: webpack, parcel
  • トランスパイラ: Babel
  • フレームワーク: React, Vue, Angular


私はタスクランナー、ビルドヘルパーを使っていなかったので目から鱗でした 👀

https://qiita.com/Go-Noji/items/25a30b8cadef86abc2b0

npm のグローバルインストールは駄目(🙅)らしいです

https://qiita.com/lambda_funtaro/items/865f178628a035acbe5a

そうか

https://zenn.dev/researcher_h/scraps/e47d707fb9c447

で調べたグローバル汚染を避ける為に
npmではローカルインストールを推奨されているらしいんだけど
ローカルインストールでパッケージを使う場合は

$ ./node_modules/.bin/react

とコードを書くのが面倒だから

$ npx react

と実行すれば楽なのか❗

npm のライブラリ開発をはじめよう❗

https://qiita.com/saltyshiomix/items/0306e17cde8f2475f193
ログインするとコメントできます