TypeScript 複数ファイル まとめて コンパイル Webpack

今回は、複数のTypeScriptファイルを一つのjsファイルにコンパイルする方法をメモしておきます。

■手順

  • Webpack インストール
  • package.json 作成
  • tsconfig.json 作成
  • webpack.config.js 作成
  • ビルド実行

尚、Webpackをインストールするには、npmが必要となります。

npmに関しては、以下のメモを参考に頂ければと思います。

mac Node.js npm インストール

前提

複数のtsファイルをmain.tsファイルが読み込んで利用しています。

main.tsとその他のtsファイルの内容は、一つのjsファイル(index.js)にコンパイルします。

そして、コンパイルされたjsファイル(index.js)を、test.htmlが読み込んで利用する想定です。

※設定次第では、htmlがコンパイルされたjsを読み込むタグ自体も、

自動的に挿入できる様ですが、今回のメモには含まれておりません。

 


Webpack インストール

まずは、webpackをインストールします。

最低限、ひとまとめのjsファイルに出力する場合、以下の要領でコマンドを実行します。

https://www.npmjs.com/package/webpack-cli

http://npmjs.com/package/ts-loader

正常にインストールされると、node_modulesのディレクトリとpackage-lock.jsonが生成されます。

 


package.json 作成

続けてpackage.jsonを生成します。

最低限の構成で生成する場合、以下のコマンドを実行します。

※-fオプションを省略した場合、設定内容を質問形式で登録することができます。

package.jsonが生成されたら、

scripts“の部分に、以下を追記します。


こちらを追加すると、単純なビルド実行と、変更を監視&自動実行ビルドを利用できる様になります。

また、”main“にひとまとめにされたjsファイル名を指定します。

 


tsconfig.json 作成

次に、tsconfig.jsonを作成します。

そのままの内容で利用しても良いですが。

ES2015などの形式でjsを出力したい場合には、targetmoduleの部分で指定します。

 


webpack.config.js 作成

続けてwebpack.config.jsを作成します。

webpack.config.jsは、webpackのビルド実行の設定ファイルですが、手動で作成します。

※6行目のコメントは誤りです。(×:メインとなるJavaScriptファイルを指定、○:メインとなるTypeScriptファイルを指定)

 


ビルド実行

各種設定ファイルが揃ったら、以下のコマンドでビルドを行います。

正常にビルドされると、

webpack.config.jsのoutputで指定された内容(ディレクトリ・ファイル名)で、jsファイルが生成されます。

生成されたjsファイルを利用するhtmlをブラウザで表示して、

正常に動作していれば、正常にコンパイルされています。

 


 

今回のメモは以上となります。

TypeScriptとWebpackの両方の機能を利用する為、

設定ファイルが多いしややこしいですが、

一つのjsファイルとしてコンパイルしたい事が多いと思います。

面倒ですが、自動化する為にWebpackはよく利用しますので、

逐一メモしておきたいと思います。


------------------------------------------ スポンサーリンク ------------------------------------------
都内でエンジニアをやっています。 2017年に脱サラ(法人設立)しました。 仕事で調べたことや、気になったことをメモしています。
投稿を作成しました 123

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


関連投稿

検索語を上に入力し、 Enter キーを押して検索します。キャンセルするには ESC を押してください。

トップに戻る