TypeScript 環境構築　メモ 📝

ディレクトリ作成後の環境構築手順のメモ

ディレクトリ作成後、TypeScriptをインストールするために、package.jsonを作成します。

作成したpackage.jsonの中でwebpackだのなんだのを管理していきます。

// npmで初期化する

npm init -y

以下のように出力されていればOKです。

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.

デベロップメント環境 (ローカル環境)でTypeScriptを作成していきます。

npm i --save-dev typescript

package.jsonの中を見て、TypeScriptがインストールされているかを確認します。

"devDependencies": {
    "typescript": "^5.1.5"
  }

TypeScriptをインストールするとnode_moduleというフォルダが出てきて、いろいろ使えるようになります。

webpackのインストール

以下のコマンドでwebpackとその他モロモロをインストールします。

npm i -D webpack webpack-cli webpack-dev-server ts-loader

• webpack-cli

  webpack のコマンドラインインターフェイスです。 webpack-cli をインストールしなければ、webpack を実行することはできません。

• webpack-dev-server

  簡単にwebpackでの開発サーバーを立ち上げることができます。

• ts-loader

  webpackにTypeScriptの変換処理を組み込むloaderです。

webpackをインストール後はカスタマイズするためにwebpack.config.jsを作成します。

module.exports = {
  entry: {
    bundle: "./src/index.ts",
  },
  output: {
    path: `${__dirname}/dist`,
    filename: "[name].js",
  },
  mode: "development",
  resolve: {
    extensions: [".ts", ".js"],
  },
  devServer: {
    static: {
      directory: `${__dirname}/dist`,
    },
    open: true,
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: "ts-loader",
      },
    ],
  },
};

webpack.config.jsの説明

以下は「どこにバンドルするのか、どのファイルをバンドルするのか」を記述しています。

entryは「どこのファイルをバンドルするのか」を記述します。以下はsrcディレクトリのindex.tsをバンドルするように指定しています。

module.exports = {
  entry: {
    bundle: "./src/index.ts",
  },
};

srcディレクトリを作成し、その中にindex.tsを作成します。

次に「バンドルしたものをどこに指定するのか」をoutputに記述します。

__dirnameはルートディレクトリを指しています。distの中にバンドルしたものをアウトプットするように指定します。

filenameは「どういう名前で出力するか」を指定します。

output: {
    path: `${__dirname}/dist`,
    filename: "[name].js",
  },

modeを指定します。

mode: "development",

resolveのextensionsで拡張子を省くことができます。

resolve: {
    extensions: [".ts", ".js"],
  },

ローカルサーバーを立ち上げたときに、どのファイルを見に行けばいいかを指定します。

devServer: {
    static: {
    directory: `${__dirname}/dist`,
    },
  },

拡張子が「.ts」のファイルをコンパイルするように指定します。

ts-loaderでコンパイルするように指定します。

module: {
    rules: [
      {
        test: /\.ts$/,
        loader: "ts-loader",
      },
    ],
  },

これらの設定を最初に行いますが、毎回設定するのはやたら面倒です。

なので一度設定したファイルをgithubにあげてコピペできるようにしておきましょう。

TypeScriptに関する設定を行う

ターミナルで以下の記述をします。

するとtsconfig.jsonが現れます。json形式のtypescriptを設定するためのファイルです。

npx tsc --init