Zenn
Open5

TypeScript/Node.js/VSCodeについて調べる

Node.js
TypeScript
VS Code
ツッナツッナ

node.jsのバージョン管理ではnvmというものが使われるらしい。

nvmのメイン開発言語はGoの模様。

パッケージマネージャーはyarnというものらしい。npmでもインストールできるようだけれど、yarnのページ内に

注意: npm から Yarn をインストールすることは一般的にはお勧めしません。

といった記述があったので、インストーラを利用してインストールする方針。

こちらはJavaScriptのツール(npmでインストールできるのならそらそう)

ツッナツッナ

Chrome拡張をTypeScriptで開発したい...

あとできればVSCodeで開発しながらホットリロードして、デバッガ上でエラー箇所の行数を指定してほしい。

TypeScriptでChrome拡張を開発する場合webpackという物を使うらしい。
webpackは複数の.jsファイルがある場合に一つにまとめてブラウザリクエストを効率的にしてくれるものとのこと。
参考: いちばんやさしい webpack 入門

ではwebpackをTypeScriptで使うためにはどうすればよいのか？

→ ts-loaderをインストールすればwebpackがTypeScriptを解釈できるようになるようだ。
参考: Typescriptでwebpackを使用する。 #TypeScript - Qiita

公式もInstallationでそう書いてる。
公式: TypeScript#Basic Setup | webpack

じゃあそもそもwebpackは何をすれば使えるようになるのか？

→npm install --save-dev webpackでインストールできるモジュールみたい。
参考：webpackのリポジトリのreadme: GitHub - webpack/webpack#install
（関係ないですけれどスポンサーの数とその企業の面々がすごいですね......）

ただ、一般的にはnpm init -yでプロジェクトのディレクトリを生成して、そのディレクトリにインストールする模様。
（npm initとnpm installが何をするコマンドかわからないのでwebpackがどの範囲でインストールされるのかよくわかっていない。npm initはpackage.jsonを生成してプロジェクトの基本情報を示すjsonファイルを生成するコマンドかな？）
参考: webpack の基本的な使い方（入門）

また、上記参考サイトにて以下の記述があったので、
npm install -D webpack-cli(or npm install -D webpack webpack-cli)も実行する。

webpack 4.0以降では、コマンドライン操作用のパッケージは webpack-cli という別パッケージで提供されている

npm installしたパッケージはnode_modulesというディレクトリに格納される模様。
npmコマンドを実行するときのターミナルのカレントディレクトリに注意が必要だ。

ツッナツッナ

nvm入れてご機嫌にnode.jsのバージョン管理したろ、と思ってwindowsのターミナル上でnode -vを打ち込んだら過去の自分が直でインストールしていた。過去の自分、絶対に許さない。

前述のこのページで紹介されている完全なアンインストール方法のページを参照してnode.jsを一旦削除する。

  1. Take a deep breath.
  2. Run npm cache clean --force
  3. Uninstall from Programs & Features with the uninstaller.
  4. Reboot (or you probably can get away with killing all node-related processes from Task Manager).
  5. Look for these folders and remove them (and their contents) if any still exist. Depending on the version you installed, UAC settings, and CPU architecture, these may or may not exist:
  • C:\Program Files (x86)\Nodejs
  • C:\Program Files\Nodejs
  • C:\Users\{User}\AppData\Roaming\npm (or %appdata%\npm)
  • C:\Users\{User}\AppData\Roaming\npm-cache (or %appdata%\npm-cache)
  • C:\Users\{User}\.npmrc (and possibly check for that without the . prefix too)
  • C:\Users\{User}\AppData\Local\Temp\npm-*
  1. Check your %PATH% environment variable to ensure no references to Nodejs or npm exist.
  2. If it's still not uninstalled, type where node at the command prompt and you'll see where it resides -- delete that (and probably the parent directory) too.
    Reboot, for good measure.

引用：https://stackoverflow.com/a/20711410

ざっくり訳。

  1. 深呼吸する
  2. npm cache clean --forceを実行する
  3. プログラムと機能(今だとアプリ>インストールされているアプリ>検索)からアンインストーラーで(Node.jsを)削除する
  4. 再起動(またはタスクマネージャーからnode関連のすべてのプロセスをタスキルしてもよい)
  5. 以下ディレクトリが残っていれば削除する。ユーザアクセス制御(UAC)やCPUアーキテクチャ、インストールバージョンによっては、存在したり存在しなかったりすることもある。
  • C:\Program Files (x86)\Nodejs
  • C:\Program Files\Nodejs
  • C:\Users\{User}\AppData\Roaming\npm (or %appdata%\npm) → 私はこれが残っていたので手動削除した。
  • C:\Users\{User}\AppData\Roaming\npm-cache (or %appdata%\npm-cache)
  • C:\Users\{User}\.npmrc (and possibly check for that without the . prefix too)
  • C:\Users\{User}\AppData\Local\Temp\npm-*
  1. %PATH%変数にNodejsまたはnpmを参照する変数が残っていないことを確認する。
  2. それでもまだアンインストールが完了していなければ、where nodeを実行してコマンドファイルとそのディレクトリを削除する。
  3. 念の為再起動する。

随分念入りにディレクトリを削除するな、と思ったのですけれど、その点についてはWindows での Node.js のインストールの"重要"の箇所に記述がありました。

これには、残っている可能性がある既存の Node.js インストール ディレクトリ (例: "C:\Program Files\nodejs") の削除などが含まれます。 NVM によって生成される symlink は、既存のインストール ディレクトリを (空であっても) 上書きしません。

ツッナツッナ

nvm-windowsインストールの概略

繰り返しになりますが、基本的にこちらのページを参照しています。

  1. nvm-windowsのreleasesページから最新版のインストーラー(zipを解凍)をダウンロードする。
    • 個人的にはここでchecksumの検証をします。
    • certutil -hashfile nvm-setup.zip MD5
  2. インストーラー(nvm-setup.exe)を実行してインストールを完了します。
  3. 管理者権限でPowerShellを起動しnvm lsを実行します。
    • no installations recognized.と表示され何もないことが表示されます。
  4. nvm install latestでNode.jsの最新版をインストールします。(機能強化検証用)
  5. nvm list availableでLTSのバージョン番号を調べます。
  6. nvm install <LTSのバージョン>で任意のLTSバージョンをインストールします。
  7. nvm lsでインストールした最新版とLTS版が表示されることを確認します。
  8. nvm use <version>で使用するバージョンを選択します。
  9. npm --versionを実行し、現在アクティブなnpmを確認します。
    • 実行したところLTSで指定したバージョンではない番号が出てきて驚いた
    • → バージョンを指定したのはNode.jsのバージョンであってnpmのバージョンではない
    • → 表示されたのはインストールしたNode.jsに関連付けられたnpmのバージョンなので正しい挙動

補記

  • プロジェクトに使用するNode.jsのバージョンを変更する場合の手順
    1. mkdir (dirname): プロジェクトディレクトリを作成する
    2. cd (dirname): カレントディレクトリを作成したディレクトリに移動する
    3. nvm use <version>: 使用したいNode.jsのバージョンを指定する
      (パッケージ内に何かnvm用のバージョンファイルが生成されるのだろうか？)
  • nvm use <version>の挙動
    1. C:\Program Files\nodejsというシンボリックリンクが配置される(されている)
    2. C:\Users\{User}\AppData\Roaming\nvm\<version>へシンボリックリンクが書き換わる
      • ユーザ領域単位でnode.jsのバージョンが切り替えられるのなら、なぜバージョン変更の手順でディレクトリを作ってカレントディレクトリを移動させたうえでnvm use <version>を実行する手順になっている？
      • nvm use <version>した直後にnpm initを何も考えずできるようにするためだったのかもしれない。

次はyarnのインストール。公式注記に従い、インストールにnpmは使わないよう気をつける。