Chapter 02

開発環境の準備

Kei Touge
Kei Touge
2022.02.27に更新

📁 Node.js プロジェクトのフォルダを準備しよう

フォルダを作成

ターミナル(Git Bash など)から my-hello-lib という名前のフォルダを作成します。

zsh
% mkdir my-hello-lib

Node.js プロジェクトとして初期化

my-hello-lib フォルダへ移動し、npm コマンドを利用して Node.js のプロジェクトとして初期化します。

zsh
% cd my-hello-lib
% npm init --yes

Wrote to /Users/zenn/my-hello-lib/package.json:

{
  "name": "my-hello-lib",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

ルートディレクトリへ package.json というファイルが作成されたことを確認できます。

zsh
% tree
.
└── package.json

0 directories, 1 file

TypeScript をインストール

  • typescript: TypeScript 言語本体とコンパイラです。
  • ts-node: ts-node は、Node.js 用の TypeScript 実行エンジンと REPL です。
  • @types/node: @types/node には、Node.js 用の型定義が含まれています。
zsh
% npm install --save-dev typescript ts-node @types/node

package.jsondevDependencies へこれらのパッケージが追加されたことを確認しましょう。

package.json
{
  "name": "my-hello-lib",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "@types/node": "^16.3.3",
    "ts-node": "^10.1.0",
    "typescript": "^4.3.5"
  }
}

tsconfig.json の作成

TypeScript の挙動を設定する tsconfig.json ファイルをルートディレクトリに作成します。

https://qiita.com/ryokkkke/items/390647a7c26933940470
tsconfig.json
{
  "compilerOptions": {
    "target": "ESNext",
    "module": "CommonJS",
    "moduleResolution": "Node",
    "esModuleInterop": true,
    "strict": true,
    "lib": ["ESNext"],
    "types": ["node"],
    "outDir": "dist"
  },
  "include": ["src"]
}

src ディレクトリ内の TS ファイルをコンパイルし、 dist ディレクトリへ CommonJS 形式のモジュールとして出力するようにした設定です。

便利ツールのインストール

クロスプラットフォームな環境で UNIX コマンドの rm -rf と同等の働きをしてくれる rimraf をインストールし、前回ビルドの結果である dist ディレクトリを消去できるようにします。

zsh
% npm i -D rimraf

NPM スクリプトを用意

package.jsonscripts に前回の結果を消去したのちにビルドを行うようにスクリプトを用意します。

package.json
  "scripts": {
    "prebuild": "rimraf dist",
    "build": "tsc"
  },

これで npm run build コマンドの発行で(再)ビルドが行えるようになりました。

main エントリの修正と files の指定

main エントリに指定するスクリプト(このプロジェクトでデフォルトとして読み込まれるスクリプト)を npm run build の実行結果である dist/index.js へアップデートします。

package.json
  "main": "dist/index.js",

また、配布物(NPM パッケージ)へ含めるべきファイルやディレクトリを files エントリへ指定します。ここでは、 tsconfig.jsonoutDir に指定した dist ディレクトリですね。

package.json
  "files": [
    "dist"
  ],

ここまでで以下のようなフォルダ構成となりました。

zsh
% tree -L 1
.
├── node_modules
├── package-lock.json
├── package.json
└── tsconfig.json

1 directory, 3 files

これで開発環境のセットアップが完了しました(のちにアップデートも行います)。
次章では、さっそくライブラリのコードを書いていきましょう。