前提条件
以下手順を実施済み
1. パッケージのインストール
typescript本体と、typescriptでの開発をサポートするパッケージをインストールします。
> npm i -D typescript ts-node @types/node
-
ts-node:.tsファイルを、コマンドライン上で直接実行できるようにするモジュール。 -
@types/node: Nodejs の型定義ファイル。Nodejs のモジュールを使用する場合に必要。
コマンドラインで実行する場合は、以下のようにします。
> npx tsc -v
Version 4.7.4
2. 設定ファイルの作成
以下コマンドを実行することで、プロジェクトルート直下にtsconfig.jsonファイルが作成されます。
> npx tsc --init
{
"compilerOptions": {
"target": "es2016",
"module": "commonjs",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true
}
}
各オプションのより詳しい内容は、公式のドキュメントで確認できます。
3. コンパイラオプションの修正
作成したtsconfig.jsonファイルを修正します。
{
"compilerOptions": {
"baseUrl": ".", // 非絶対モジュール名を解決するためのベースディレクトリを設定
"target": "es6", // サポートするJS機能の設定
"module": "commonjs",
"moduleResolution": "node",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true, // 大文字と小文字を区別
"strict": true,
"types": ["node"],
"outDir": "dist"
},
"include": ["src"]
}
これは、srcディレクトリ内の*.tsファイルをコンパイルして、distディレクトリへCommonJS形式のモジュールとして出力するようにした設定です。
4. スクリプトの追加
typescriptでのビルド実行を容易にするため、スクリプトを追加します。
{
...,
"scripts": {
"prebuild": "rimraf dist",
"build": "tsc"
}
}
これで、npm run buildコマンドの発行でビルドが行えるようになります。
5. Typescript ファイルの用意
ここまでで基本的なtypescript実行環境が整ったので、試しに.tsファイルを用意して実行してみます。
まず、コンパイラオプションのincludeでsrcを指定しているため、プロジェクトルート直下にsrcディレクトリを作成します。
> mkdir src
次に、作成したsrcディレクトリ内に任意のファイル名で.tsファイルを作成し、以下のように記述します。
この例では、index.tsとします。
export function hello(v: string): void {
console.log(`Hello ${v}`);
}
これは、コンソールにHello <引数>と出力するだけの関数をhelloという名前でエクスポートしています。
名前付きエクスポートなので、例えば以下のような実行スクリプトを用意して使用することができます。
import { hello } from './src';
hello('World!');
このファイルはコンパイルに含めない為、srcディレクトリ内に作成する必要はありません。
ここでは、プロジェクトルート直下に作成しています。
6. ts-nodeで実行する
作成した実行スクリプトを、コマンドラインで実行します。
> npx ts-node temp.ts
Hello World!
コンソールにHello World!と表示されていれば成功です。
7. コンパイルの実行と動作確認
tscコマンドを使用することで、.tsファイルをコンパイルできます。
ここまでの手順で既に準備は整っているので、npm run buildコマンドを実行するだけです。
> npm run build
プロジェクトルート直下にdistディレクトリが作成され、その中にindex.jsファイルが作成されていれば成功です。
試しに、以下のような実行スクリプトを作成して動作を確認してみます。
const { hello } = require('./dist');
hello('World!');
> node temp.ts
Hello World!
8. ESM（ESM Modules システム）形式で出力
ここまででNodejs環境で利用できるライブラリを作成できるようになりましたが、このままでは esm（ES Modules システム）から利用することができません。
これを解決する為、ビルドを実行する際にESM形式のファイルを同時に出力するよう設定を追加します。
tsconfig.jsonの修正と、CommonJS用の設定ファイル追加
ESM出力用の設定ファイルを追加する前に、tsconfig.jsonの設定が共通項目のみとなるよう修正して、CommonJS出力用のtsconfig.cjs.jsonファイルを別途追加します。
{
"compilerOptions": {
"baseUrl": ".", // 非絶対モジュール名を解決するためのベースディレクトリを設定
"target": "es6", // サポートするJS機能の設定
"moduleResolution": "node",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true, // 大文字と小文字を区別
"strict": true,
"types": ["node"]
},
"include": ["src"]
}
{
"extends": ".",
"compilerOptions": {
"module": "CommonJS",
"outDir": "dist/cjs"
}
}
ESM出力用の設定ファイルを追加
プロジェクトルート直下に、tsconfig.esm.jsonファイルを作成します。
{
"extends": ".",
"compilerOptions": {
"declaration": true,
"declarationMap": true,
"module": "es6",
"outDir": "dist/esm"
}
}
NPM スクリプトの修正
package.jsonのscriptsを修正します。
{
...,
"scripts": {
"prebuild": "rimraf dist",
"build": "run-p build:*",
"build:cjs": "tsc -p tsconfig.cjs.json",
"build:esm": "tsc -p tsconfig.esm.json"
},
}
これで、npm run buildを実行すると、ESM形式のファイルが同時に出力されるようになります。
また、出力先は以下のようになります。
-
dist/cjs/index.js: CommonJS -
dist/esm/index.js: ESModules
9. ESM形式での実行と動作確認
通常、NodejsはCommonJS形式で動作しますが、package.jsonのtypeフィールドで、JSファイルのモジュール形式を指定できます。
{
"type": "module"
}
この状態でtemp.jsファイルを以下のように書き換えて、nodeコマンドで実行してみます。
import { hello } from './dist/esm/index.js'
hello('World!');
> node temp.js
Hello World!
Hello World!と表示されていれば成功です。