🧊
pnpmでTypeScript開発環境をセットアップする
はじめに
この記事は、pnpmを使用してTypeScriptの開発環境を整えるまでの手順を個人的な備忘録としてまとめたものです。
今ではNext.jsやNest.jsなど、コマンド一つでtypeScriptのテンプレートを作成してくれるフレームワークもたくさんありますが、ちょっとしたBotやサーバーなどを開発しようとするとテンプレートがない場合もあり、そういった場合はTypeScriptをJavaScriptにコンパイルする環境を自前で準備しなければなりません。情報が散らばっていてそこそこ面倒だったので、ここにまとめておくことにしました。
TypeScriptやpnpmその他のアップデートおよび仕様変更によって将来的にこの手順が使用できなくなる可能性があります。(記.2023/11/30)
前提条件
- node.js, pnpmの環境構築が完了している
環境構築
- 開発を行うディレクトリで以下のコマンドを実行し、プロジェクトを作成
pnpm init -y
-
package.jsonが生成されるので、プロジェクト名やautherなどを適宜変更 - 以下のコマンドを実行し、TypeScriptとESLintをインストール
pnpm install -D typescript ts-node eslint
- 以下のコマンドを実行し、TypeScriptをセットアップ
npx tsc --init
-
tsconfig.jsonが生成されるので、"outdir"となっている部分を書き換える
(以下のように./buildとすればTypeScriptをコンパイルしたファイルは./build以下に生成されます)
tsconfig.json
{
// ...略...
"outdir": "./build"
// ...略...
}
- 以下のコマンドを実行し、ESLintをセットアップ
npx eslint --init
- 以下の順で選択する
? How would you like to use ESLint? …
To check syntax only
▸ To check syntax and find problems
To check syntax, find problems, and enforce code style
? What type of modules does your project use? …
▸ JavaScript modules (import/export)
CommonJS (require/exports)
None of these
? Which framework does your project use? …
React
Vue.js
▸ None of these
? Does your project use TypeScript? No / ▸ Yes
? Where does your code run? …
Browser
▸ Node
? What format do you want your config file to be in? …
JavaScript
YAML
▸ JSON
-
package.jsonの"scripts"を以下のように変更
package.json
{
// ...略...
"scripts": {
"dev": "ts-node src/main.ts",
"start": "node build/main.js",
"build": "tsc -p ."
}
// ...略...
}
以上でpnpmによるTypeScript開発環境構築は終了です。お疲れ様でした。
pnpmコマンドの使い方は以下を参照してください。
pnpmコマンドの使い方
src/main.tsにアプリなどのコードを作成し、実行してみましょう。
-
pnpm run dev
アプリを開発環境で動かすことができます。残念ながらホットリロードは効かないようです。 -
pnpm run build
TypeScriptのコードをJavaScriptにコンパイルします。この記事の通りに設定していれば./build以下に生成されます。 -
pnpm run start
上のコマンドでコンパイルされたJavaScriptのコードを実行します。本番環境ではこちらを実行するのが一般的です。
綺麗なコードを書くために
コミット前にlinterとformatterのチェックが走るようにすることができます。
別の記事で執筆しました。
Discussion