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

英大研究員H

npmについて

既に知っている事

npm init - package.json ファイルを作成
npm install - 色んなパッケージをインストール
npm run - コードを実行する

英大研究員H

図が見やすい

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

英大研究員H

他ライブラリと併用する時に便利なコマンド達

英大研究員H

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 に記載されたパッケージを再インストール

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

英大研究員H

他ライブラリの解説 2

gulp
grunt
webpack

英大研究員H

npm についての面白い考察

英大研究員H

これによると
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",
  }
}

英大研究員H

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

例えば

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

英大研究員H

npm module の作り方

英大研究員H

dependencies
devDependencies
他

の使用用途の違いを解説

英大研究員H

テストツール
ビルドツール / バンドルツール
タスクランナー

ってなんだろう？

テストツール (Jest, Mocha) ぐらいしか分からない

英大研究員H

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

英大研究員H

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

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

めちゃくちゃ似てる❗

英大研究員H

コマンドの使い方一覧を表示

npm -l

英大研究員H

Getting started

en
https://docs.npmjs.com/getting-started

英大研究員H

CLI command

en
https://docs.npmjs.com/cli/v6

英大研究員H

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

ja-2

en-1
https://devhints.io/npm

英大研究員H

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

                     ★
                    ／＼
                   ／  ＼
                  ／   @＼
                 ／⸮    &＼
                ／& i     ＼
               ／⸛     ⸮   ＼
              ／           ⁂＼
             ／@ ⸮   ⸮     ｡ ＼
            ／i⸛⸛ ⸛i⁂i  @  ⸮& ＼
           ／  ⁂ i ⁂ ⁂   @    ⸮＼
          ／    ⸛  @ ⁂& &    ⸛ @＼
         ／             @｡ &     ＼
        ／ ⸮  ⸛@  ｡   ｡&@      @ i＼
       ／@ ｡@&⸛     ⸮⁂    @      ｡⁂＼
      ／⸮@  ⁂ @ &  ⁂ ⁂   ⸮ i&  ｡ i  ＼
     ／｡⁂   @@   ⸛⁂⁂⸮ @     ⸛ &⸛ i   ＼
    ／   ⸮⸛    @     ⸛  &｡  @  ⸛   ⸛ @＼
   ／&     ⸛   @⁂  i⸮ ⸮ i@  ⸮@ i⸛   @ i＼
  ／  ⸛ ⸮  ｡⁂⁂｡ ⸛ ｡ i ⸮ ⸮  ⁂⸛ ⸮  ⁂⸛  i@ ＼
 ／ ⸛              ⸛     i⸮     &⁂ ｡   ⸮i＼
 ^^^^^^^^^^^^^^^^^^^|  |^^^^^^^^^^^^^^^^^^^
                    |  |