TypeScript：Node.jsプロジェクトの作成手順

TypeScript + Webpackを使ったプロジェクトの作成方法をメモ。

環境

仮想上のWindows11 Pro 22H2 (22621.1702)
Node.js 18.16.0
TypeScript 5.0.4

Node.jsプロジェクトの作成

プロジェクト名を "test02" とし、
C:\projects\typescript\test02 フォルダを作成する。
作成したtest02フォルダ上で [SHIFT]+[F10] → "Codeで開く" を実行。

「CTRL]+[@]でターミナルを起動しCommand Promptへ変更、以下コマンドを実行する。

npm init -y

実行結果：

    C:\projects\typescript\test02>npm init -y
    Wrote to C:\projects\typescript\test02\package.json:
    
    {
      "name": "test02",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "keywords": [],
      "author": "",
      "license": "ISC"
    }
    
    
    
    C:\projects\typescript\test02>
  

package.jsonファイルが生成される。

TypeScriptの設定

次にTypeScript(@types/nodeというパッケージ)をプロジェクトに組み込む。

npm install typescript @types/node --save-dev

実行結果：

    C:\projects\typescript\test02>npm install typescript @types/node --save-dev

    added 2 packages, and audited 3 packages in 2s
    
    found 0 vulnerabilities
    
    C:\projects\typescript\test02>
  

TypeScript設定ファイルの作成

以下のコマンドを実行する。

tsc --init

実行結果：

    C:\projects\typescript\test02>tsc --init

    Created a new tsconfig.json with:                                                                                             
                                                                                                                         TS       
      target: es2016
      module: commonjs
      strict: true
      esModuleInterop: true
      skipLibCheck: true
      forceConsistentCasingInFileNames: true
    
    
    You can learn more at https://aka.ms/tsconfig
    
    C:\projects\typescript\test02>    
  

tsconfig.jsonというファイルが生成される。

Webpack設定ファイルの作成

必要なファイルをまとめて公開するアプリをパッケージするためのWebpackというソフトウェアをインストールする。

npm install webpack ts-loader @webpack-cli/generators

実行結果：

    C:\projects\typescript\test02>npm install webpack ts-loader @webpack-cli/generators
    npm WARN deprecated readdir-scoped-modules@1.1.0: This functionality has been moved to @npmcli/fs
    npm WARN deprecated @npmcli/move-file@1.1.2: This functionality has been moved to @npmcli/fs
    npm WARN deprecated @npmcli/move-file@2.0.1: This functionality has been moved to @npmcli/fs
    npm WARN deprecated @npmcli/move-file@2.0.1: This functionality has been moved to @npmcli/fs
    
    added 614 packages, and audited 617 packages in 36s
    
    74 packages are looking for funding
      run `npm fund` for details
    
    found 0 vulnerabilities
    
    C:\projects\typescript\test02>    
  

Webpackの初期化

Webpackの初期化を行う。

npx webpack-cli init

質問が表示されるので順次入力していく。
・Which of the following JS solutions do you want to use?

→ TypeScript

・Do you want to use webpack-dev-server?
　(Webpackの開発サーバーを追加するか？)

→ Enter (Yes)

・Do you want to simplify the creation of HTML files for your bundle?
　(簡略化したHTMLファイルを生成するか？)

→ Enter (Yes)

・Do you want to add PWA support?
　(PWAをサポートするか？)

→ Enter (Yes)

・Which of the following CSS solutions do you want to use?
　(CSS関連ソリューションの選択)

→ 今回は "none" (使わない)

・Do you like to install prettier to format generated configuration?
　(設定ファイルを見やすくする？)

→ Enter (Yes)

・Pick a package manager:
　(使用するパッケージマネージャは？)

→ 今回は "npm"

・Overwrite package.json?
　(Package.jsonを上書き保存する？)

→ "y" を入力 (保存する)
→ "Overwrite" を選択

これで以下のフォルダ・ファイルが作成される。
・Srcフォルダ
・index.html
・README.md
・webpack.config.js
作成するTypeScriptのファイルはSrcフォルダに作成してく。
→ 「webpack：webpack.config.jsファイルの説明」

---

学習 TypeScript