意外と簡単。TypeScript+JavaScriptでビルドする方法

巨大化するWebサービス/アプリの開発現場で着実に市民権を得てきたTypeScript。C#生みの親Anders Hejlsberg老師が作ったとあって開発効率を爆上げしてくれる。非常に筋の良い言語だ。

今回はTypeScriptへJavaScriptソースをインポートし、webpackを使って1ファイルにビルドする方法についてangularプロジェクトを例に取って解説する。「npmとかbowerで落としてきたJavaScriptってTypeScriptからどう使うの〜？」てな事を解決しよう。

Contents [hide]

1 さくっと分かる(?)ビルド方法
2 詳しいビルド方法
3 番外 TypeScript + Babel on webpackでES5にする方法

さくっと分かる(?)ビルド方法

これからつらつらと設定やインポート方法の解説が続くけれど、やりたいことはシンプル。要は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で必要なパッケージをインストールする。

$ npm install typescript webpack ts-loader --save-dev

1	$ npm install typescript webpack ts-loader --save-dev

typescriptは言わずもがな。webpackはTypeScriptとJavaScriptを一つにまとめて1ファイルへビルドするために使う。（ts-loaderはTypeScriptをwebpackでビルドするため）

インポートする対象（angular）もインストールする。

$ npm install angular --save-dev

1	$ npm install angular --save-dev

webpack

パッケージのインストールが終わったら、お次はwebpackの設定へ進もう。webpackのビルド設定はwebpack.config.jsonで行う。

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' 
            }
        ]
    }
}

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へ書く。このとおり。

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5"
    }
}

{

"compilerOptions": {

"module": "commonjs",

"target": "es5"

}

今回はインポート方法にフォーカスするために最低限の設定としている。実際の開発現場ではソースマップの設定など必要に応じて書き殴ろう。

TypeScriptへJavaScriptソースをインポートする

やれやれ。設定はここまで。いよいよJavaScriptのインポート方法を紹介する。

import "angular";

console.log("Hello angular!");

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変換を組み込もう。

まずは必要なパッケージをインストールする。

$ npm install babel-core babel-loader babel-preset-es2015 webpack-stream --save-dev

1	$ npm install babel-core babel-loader babel-preset-es2015 webpack-stream --save-dev

プロジェクトルートに .babelrc なるBabelの設定ファイルを作る。

{
  "presets": ["es2015"]
}

{

"presets": ["es2015"]

}

最後はBabelを使うためのwebpackの設定。ポイントはmodule.loaders.loadersの中身。 “babel” と “ts” を指定しており、右から順にビルドプロセスで使われる。

※ “-loader” は省略しても大丈夫。

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"]
            }
        ]
    }
}

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ソースが出力されるだろう。

意外と簡単。TypeScript+JavaScriptでビルドする方法

さくっと分かる(?)ビルド方法

詳しいビルド方法

プロジェクト構成

npm

webpack

tsconfig.json

TypeScriptへJavaScriptソースをインポートする

ビルドして使う

番外 TypeScript + Babel on webpackでES5にする方法

Similar Posts

これからTypeScriptを始める人のための開発環境入門

More Posts

AWS EC2へWordPressを移行する方法。

波紋を呼ぶRuby 3.0の文字列型の変更。そしてC#では？

絶対に見た方がイイ名作アニメ映画 / OVAのおすすめ42選！第弐話

ナチュラルCぐらいGo言語の省略がヒドすぎる件について [golang]

京都観光でオススメな紅葉スポットを20箇所ありったけ

Slack 新チームの作り方と、招待されてからすること。

バットマン vs スーパーマンジャスティスの誕生日本公開まで八ヶ月だけれどネタバレしちゃう。

インバウンド対策をトリップアドバイザー上位10店から学ぶ

絶対おさえておきたい、WordPressプラグイン作りでスタートダッシュを決める方法

みんな気になるC#のstringとStringの違い。