今更さくっとpnpmでなるべく素のNode.tsのテンプレート作るメモ

よく忘れて定期的に調べ直すのでメモ
tsconfigは沼

最初に準備するディレクトリ構成

# 基本
~/(ProjectRoot) $ mkdir node-ts-proj
~/(ProjectRoot) $ cd node-ts-proj
~/(ProjectRoot)/node-ts-proj $ pnpm init

# ts置くとこ
~/(ProjectRoot)/node-ts-proj $ mkdir src
~/(ProjectRoot)/node-ts-proj $ mkdir src/mylib    # 自分用ライブラリ置き場
~/(ProjectRoot)/node-ts-proj $ touch src/index.ts # メインスクリプト

# packageつくる
~/(ProjectRoot)/node-ts-proj $ pnpm init

この時点でこういう構成になります。

(ProjectRoot)
  ├ package.json
  └ src/
    ├ index.ts
    └ mylib/

必要ライブラリ

# 必須
~/(ProjectRoot)/node-ts-proj $ pnpm add -D typescript tsx @types/node
# 自前クラスのインポート用
~/(ProjectRoot)/node-ts-proj $ pnpm add ./src/mylib

実行用スクリプト

scripts 内に2行追加して以下のようにします。

package.json

{
  "name": "node-ts-proj",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "tsx watch src/index.ts",
    "build": "tsc -p ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/node": "^20.14.10",
    "tsx": "^4.16.2",
    "typescript": "^5.5.3"
  },
  "dependencies": {
    "mylib": "link:src/mylib"
  }
}

tsconfig

よくわからんけど最低限とりあえずコレかなという設定値です（異論歓迎）

{
  "compilerOptions": {
    "target": "ES2022",
    "lib": [ "ES2022" ],
    "module": "NodeNext",
    "rootDir": "src",
    "baseUrl": "src",
    "moduleResolution": "NodeNext",
    "paths": {
      "*": [
        "@types/*",
        "mylib/*"
      ]
    },
    "resolveJsonModule": true,
    "sourceMap": true,
    "outDir": "dist",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "traceResolution": false
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "dist",
    "node_modules"
  ],
}

ガッツリ設定する場合は npx tsc --initで生成されたJSONを編集すること。

Hello worldする

src/index.ts

console.log('Hello world')

~/(ProjectRoot)/node-ts-proj $ npm run dev

> node-ts-proj@1.0.0 dev
> tsx watch src/index.ts

Hello world

JS出力

~/(ProjectRoot)/node-ts-proj $ npm run build

> node-ts-proj@1.0.0 build
> tsc -p .

# ./dist/index.js に出力されます
# ctrl+c

~/(ProjectRoot)/node-ts-proj $ node dist/index.js
Hello world

最終的なディレクトリ構成

こうなってればOK。

(ProjectRoot)
  ├ package.json
  ├ pnpm-lock.yaml
  ├ node_modules/
  ├ tsconfig.json
  │
  └ src/
  │ ├ index.ts # 起点
  │ └ mylib/   # 自作クラスはこの中に放り込む
  │
  └ dist/
    ├ index.js # JS出力はここに
    └ index.js.map