webpack + TypeScript の環境を作成する (Windows)
はじめに
webpack を使用して、TypeScript をコンパイル(トランスパイル)する環境を作成します。
注意事項
コマンドプロンプトから npm を実行するために、node.js がインストールされている必要があります。
目次
環境
- OS : Windows 7 Pro 64bit
- その他 : npm 2.14.20, webpack 1.14.0, typescript 2.1.5
webpack とは
webpack はモジュールバンドラのひとつで、依存関係のあるモジュールから静的なファイル(アセット)を作成します。
今回は TypeScript をコンパイルするために webpack を使用します。
TypeScriptとは
TypeScript は、Japascript に静的型付けを追加したスーパーセットのひとつで、コンパイルすることで素の Javascript ファイルが作成されます。
環境の作成
npm をアップデート
npm を利用してツールをインストールするために、npm をアップデートしておきます。
> npm update -g
package.json を作成する
作業フォルダに移動し、以下のコマンドを入力すると、対話形式での入力で packege.json ファイルが作成されます。とりあえず、最初は name と description 以外は何も入力せず Enter でも OK です。
> npm init
name: (www)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
name に test
、description に test project
と入力した場合は、以下のようなファイルが作成されます。
{
"name": "test",
"version": "1.0.0",
"description": "test project",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
作業フォルダ内は以下のようになります。
root
┗ package.json
webpack をインストールする
webpack を、package.json の devDependencies に追加するために、--save-dev
オプションを付けてインストールします。
> npm install --save-dev webpack
作業フォルダにモジュールがインストールされます。
root
+ ┣ mode_modules
+ ┃ ┗ webpack
┗ package.json
TypeScript をインストールする
TypeScript と ts-loader をインストールします。
> npm install --save-dev typescript ts-loader
モジュールがインストールされます。
root
┣ mode_modules
+ ┃ ┣ ts-loader
+ ┃ ┣ typescript
┃ ┗ webpack
┗ package.json
typings をインストールする
TypeScript の型定義ファイルを管理するツールである typings をインストールしておきます。
> npm install --save-dev typings
root
┣ mode_modules
┃ ┣ ts-loader
┃ ┣ typescript
+ ┃ ┣ typings
┃ ┗ webpack
┗ package.json
tsconfig.json ファイルを作成する
ルート直下に、typescript 用の設定ファイルを作成し、中身を以下のように書きます。
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"noImplicitAny": false,
"outDir": "public",
"rootDir": ".",
"sourceMap": false
},
"exclude": [
"node_modules"
]
}
フォルダ構成は以下のようになります。
root
┣ mode_modules
┃ ┣ ts-loader
┃ ┣ typescript
┃ ┣ typings
┃ ┗ webpack
┣ package.json
+ ┗ tsconfig.json
webpack.config.js を作成する
webpack 用の設定ファイルを作成します。今回は入力を src フォルダ内の app.ts ファイル、出力を public フォルダ内の bundle.js ファイルとして、以下のように書きます。
const path = require('path');
module.exports = {
entry: [
'./src/app.ts'
],
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
devtool: 'source-map',
resolve: {
extensions: ["", ".ts", ".tsx", ".js"]
},
module: {
loaders: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/
}
]
}
};
フォルダ構成は以下のようになります。
root
┣ mode_modules
┃ ┣ ts-loader
┃ ┣ typescript
┃ ┣ typings
┃ ┗ webpack
+ ┣ public
+ ┣ src
┣ package.json
┣ tsconfig.json
+ ┗ webpack.config.js
npm-scripts の設定
コンパイルするために、package.json の scripts にビルド用のコマンドを追加します。
{
"name": "a",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"ts-loader": "^2.0.0",
"typescript": "^2.1.5",
"typings": "^2.1.0",
"webpack": "^1.14.0"
}
}
コンパイル
実際にファイルをコンパイルします。src フォルダ内に、空の app.ts ファイルを作成し、以下のコマンドを実行します。
> npm run build
コンパイルが成功し、public フォルダ内に bundle.js と bundle.js.map ファイルが作成されます。
root
┣ mode_modules
┃ ┣ ts-loader
┃ ┣ typescript
┃ ┣ typings
┃ ┗ webpack
┣ public
+ ┃ ┣ bundle.js
+ ┃ ┗ bundle.js.map
┣ src
+ ┃ ┗ app.ts
┣ package.json
┣ tsconfig.json
┗ webpack.config.js
まとめ
今回は、webpack を使用して TypeScript をコンパイルするだけでしたが、簡単に環境が作成できました。