作成日:2017/01/24更新日:2021/07/19webタグ：typescriptwebpack

webpack+TypeScriptの環境を作成する

はじめに

webpackを使用して、TypeScriptをjavascriptにコンパイル(トランスパイル)する環境を作成します。

環境

npm : 6.14.10
webpack : 5.45.1
webpack-cli : 4.7.1
typescript : 4.3.5

webpackとは

webpackとはモジュールバンドラのひとつで、依存関係のあるモジュールから静的なファイル(アセット)を作成します。
今回はtypescriptをjavascriptにコンパイルするためにwebpackを使用します。

webpack

typescriptとは

typescriptは、japascriptに静的型付けを追加したスーパーセットのひとつで、コンパイルすることで素のjavascriptファイルが作成されます。

typescript

基本的な構成

typescriptをコンパイルするための基本的な構成を作成します。
今回、srcディレクトリにindex.tsというファイルを作成し、それをコンパイルしていきます。

src/index.ts
1const text: string = "World";
2alert(`Hello ${text}`);

package.jsonを作成する

package.jsonファイルを作成します。
npm initコマンドを入力すると、対話形式での入力でpackege.jsonファイルが作成されます。
今回は-yオプションを付けて、対話をせずにpackage.jsonが作成します。

1> npm init -y

wwwフォルダの直下で実行した場合、ファイルの内容は以下のようになります。

package.json
1{
2  "name": "www",
3  "version": "1.0.0",
4  "description": "",
5  "main": "index.js",
6  "scripts": {
7    "test": "echo \"Error: no test specified\" && exit 1"
8  },
9  "keywords": [],
10  "author": "",
11  "license": "ISC"
12}

webpackをインストールする

webpackとwebpack-cliを--save-dev オプションを付けてインストールしていきます。

webpack-cli : webpackを操作するためのコマンドラインインターフェース

1> npm install --save-dev webpack webpack-cli

typescriptをインストールする

typescriptとts-loaderをインストールします。

ts-loader : webpackでtypescriptを読み込むためのローダー

1> npm install --save-dev typescript ts-loader

tsconfig.jsonファイルを作成する

typescrptの設定ファイルであるtsconfig.jsonファイルを作成します。
手動でtsconfig.jsonファイルを作成するか、以下のコマンドを実行しファイルを作成します。

1> node node_modules/typescript/bin/tsc --init

typescriptをグローバルにインストールした場合はnode tsc --initで実行できます
npxをインストールしてある場合は、npx tsc --initで実行できます

今回は手動で以下のようにコンパイラーのオプションなどを記載します。

tsconfig.json
1{
2  "compilerOptions": {
3    "target": "es5",
4    "module": "commonjs",
5    "strict": true,
6    "esModuleInterop": true,
7    "skipLibCheck": true,
8    "forceConsistentCasingInFileNames": true
9  },
10  "include": [
11    "./src/**/*"
12  ],
13  "exclude": [
14    "node_modules"
15  ]
16}

tsconfigの詳細は以下のページに書いてあります。

TSConfig リファレンス紹介

webpack.config.jsを作成する

次に、webpack用の設定ファイルを手動で作成していくので、プロジェクト直下にwebpack.config.jsファイルを作成します。

1> touch webpack.config.js

まずは、入力ファイルの場所を指定します。ソースがsrc/index.tsの場合は以下のようになります。

webpack.config.js
1module.exports = {
2  entry: './src/index.ts',
3}

次に、出力のパスとファイル名を指定します。

pathに出力ディレクトリを絶対パスで指定します。

webpack.config.js
1module.exports = {
2  entry: './src/index.ts',
3  output: {
4    path: __dirname + '/dist',
5    filename: 'bundle.js',
6  }
7}

そしてtypescriptを読み込むためのローダーを指定します。

この場合は.tsという拡張子のファイルならts-loaderを使用して読み込む

webpack.config.js
1module.exports = {
2  entry: './src/index.ts',
3  output: {
4    path: __dirname + '/dist',
5    filename: 'bundle.js',
6  },
7  module: {
8    rules: [
9      {
10        test: /\.ts$/,
11        use: 'ts-loader',
12      }
13    ]
14  }
15}

modeを指定しないとWARNINGが表示されるので、とりあえずproductionを指定します。

webpack.config.js
1module.exports = {
2  mode: 'production',
3}

コンパイル

コンパイルを実行するには、コマンドラインから実行します。

1> node node_modules/webpack/bin/webpack.js

もしくは、package.jsonファイルのscriptに以下を追加し、npm run buildで実行します。

package.json
1{
2  "scripts": {
3    "build": "webpack"
4  },
5}

コンパイルが成功すると、distディレクトリ内にindex.jsファイルが作成されます。
中身は以下のようになります。

index.js
1(()=>{"use strict";alert("Hello World")})();

es5への変換について

tsconfig.jsonファイルのtargetにes5を指定していても、それだけではwebpackはes5へ変換しません。そのため、webpack.config.jsにtargetを追加します。

webpack.config.js
1module.exports = {
2  target: ["web", "es5"],
3}

これで再コンパイルした結果が以下のようになります。

index.js
1!function(){"use strict";alert("Hello World")}();

まとめ

今回は、webpackを使用してtypescriptをjavascriptコンパイルしてきました。 webpackの設定は複雑ですが、基本的な部分を理解していれば簡単に環境が作成できました。