巨大化するWebサービス/アプリの開発現場で着実に市民権を得てきたTypeScript。C#生みの親Anders Hejlsberg老師が作ったとあって開発効率を爆上げしてくれる。非常に筋の良い言語だ。
今回はTypeScriptへJavaScriptソースをインポートし、webpackを使って1ファイルにビルドする方法についてangularプロジェクトを例に取って解説する。「npmとかbowerで落としてきたJavaScriptってTypeScriptからどう使うの〜？」てな事を解決しよう。
Contents
さくっと分かる(?)ビルド方法
これからつらつらと設定やインポート方法の解説が続くけれど、やりたいことはシンプル。要はTypeScriptでJavaScriptをインポートする命令を書き、それをビルドして1ファイルにする設定をするだけ。それでは詳しく見ていこう。
詳しいビルド方法
プロジェクト構成
まずは今回の記事で使うプロジェクトの構成をご紹介。
src/ts/app.tsで書いたTypeScriptソースをdst/js/app.jsへ出力する。
今回はapp.tsからangular.jsを読み込むことを想定して、node_modules以下のJavaScriptソース（angular.js）をTypeScriptへインポートする。ココらへんはBowerを使っているならbower_components以下から読んだりしてもいい。プロジェクトの要件に応じて柔軟に。
tsconfig.jsonとwebpack.config.jsについて詳しくは後述。
npm
お次はnpmで必要なパッケージをインストールする。
|
1 |
$ npm install typescript webpack ts-loader --save-dev |
typescriptは言わずもがな。webpackはTypeScriptとJavaScriptを一つにまとめて1ファイルへビルドするために使う。（ts-loaderはTypeScriptをwebpackでビルドするため）
インポートする対象（angular）もインストールする。
|
1 |
$ npm install angular --save-dev |
webpack
パッケージのインストールが終わったら、お次はwebpackの設定へ進もう。webpackのビルド設定はwebpack.config.jsonで行う。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
var path = require('path'); module.exports = { entry: { app :'./src/ts/app.ts' }, output: { path: require("path").resolve("./dst/js/"), filename: '[name].js' }, resolve: { extensions: ['', '.ts', '.webpack.js', '.web.js', '.js'], alias: { "angular": path.join(__dirname, "node_modules/angular/angular.js") } }, module: { loaders: [ { exclude: /(node_modules)/, loader: 'ts-loader' } ] } } |
何の事はない普通のビルド設定だけれど、ポイントはresolve.aliasにangularを設定しているところ。こうすると、外部ソース（今回だとangular.js）をインポートする度にパスを書かなくてよくなる。実際の開発現場ではあっちこっちにインポート文を書くことになるからここの設定が生きてくる。
tsconfig.json
TypeScriptのコンパイル設定をtsconfig.jsonへ書く。このとおり。
|
1 2 3 4 5 6 |
{ "compilerOptions": { "module": "commonjs", "target": "es5" } } |
今回はインポート方法にフォーカスするために最低限の設定としている。実際の開発現場ではソースマップの設定など必要に応じて書き殴ろう。
TypeScriptへJavaScriptソースをインポートする
やれやれ。設定はここまで。いよいよJavaScriptのインポート方法を紹介する。
|
1 2 3 |
import "angular"; console.log("Hello angular!"); |
angular.jsのインポートは import “angular”; と書くだけ。webpack.config.jsで先述したとおり、ここで指定した “angular” はangular.jsへのパスの代わりとして使っている。
ビルドして使う
ここまで終われば $ webpack を叩いてTypeScript + JavaScript（angular.js）をビルドしよう。dst/js/app.jsにangularと一緒くたにTypeScriptソースがビルドされているから、index.htmlからはapp.jsを読むだけでいい。（index.htmlでangular.jsを読み込まなくてもいい）。
プロジェクトによってはあえてJavaScriptソースをhtmlなどから別口で読み込みたいことも考えられる。そんな時はwebpackプラグインHtml Webpack Pluginを使おう。
番外 TypeScript + Babel on webpackでES5にする方法
プロジェクトによりけりだけれど、ソースをES5互換にしたいことがある。そんなときは僕らのBabelがパパッとやってくれる。webpackからBabelを使い、ビルドプロセスにES5変換を組み込もう。
まずは必要なパッケージをインストールする。
|
1 |
$ npm install babel-core babel-loader babel-preset-es2015 webpack-stream --save-dev |
プロジェクトルートに .babelrc なるBabelの設定ファイルを作る。
|
1 2 3 |
{ "presets": ["es2015"] } |
最後はBabelを使うためのwebpackの設定。ポイントはmodule.loaders.loadersの中身。 “babel” と “ts” を指定しており、右から順にビルドプロセスで使われる。
※ “-loader” は省略しても大丈夫。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
var path = require('path'); module.exports = { entry: { app :'./src/ts/app.ts' }, output: { path: require("path").resolve("./dst/js/"), filename: '[name].js' }, resolve: { extensions: ['', '.ts', '.webpack.js', '.web.js', '.js'], alias: { "angular": path.join(__dirname, "node_modules/angular/angular.js") } }, module: { loaders: [ { exclude: /(node_modules)/, loaders: ["babel", "ts"] } ] } } |
ここまで出来たら $ webpack を実行しよう。無事にES5ソースが出力されるだろう。
