作業フォルダの作成

VS Codeはプロジェクトファイルとかいう概念がなさそうでフォルダを開くところから始まります。なので、適当な場所で以下のコマンドをうってフォルダを作りました。

mkdir vscodeedu

npm init

作成したフォルダに移動してnpm initを打ち込んで適当にEnterを押してpackage.jsonを作ります。

必要なモジュールのインストール

とりあえずreactに必要な以下のモジュールをインストールします。

npm install react react-dom --save

型定義のインストール

srcフォルダ以下にTypeScriptを書こうと思うので以下のようなコマンドで、型定義ファイルをとってきます。

mkdir src
cd src
tsd init
tsd install react react-dom -save

VS Codeの起動

やっとVS Codeの出番です。vscodeeduフォルダでcode .と打ち込んでVS Codeを起動します。

VS Codeからtscでコンパイルしてbrowserifyで1つのjsにまとめる作業をgulpfile.jsに書きます。

TypeScriptの設定ファイルの作成

tsconfig.jsonというファイルをプロジェクトのルートに作成します。インテリセンスが効くのでサクサクっと以下のようなファイルを作成します。

{
    "compilerOptions": {
        "module": "commonjs",
        "jsx": "react"
    },
    "files": [
        "src/typings/tsd.d.ts"
    ]
}

gulpfile.jsの作成

gulpfile.jsを作成します。その前に、使うモジュールをnpmを使ってインストールしておきます。

npm install gulp gulp-typescript browserify vinyl-source-stream --save-dev

そして、以下のようなgulpfileを作成します。TypeScriptのコンパイルとbrowserifyをしてるだけのシンプルな感じです。

var gulp = require('gulp');
var browserify = require('browserify');
var ts = require('gulp-typescript');
var source = require('vinyl-source-stream');

gulp.task('build', ['browserify']);

gulp.task('compile', function() {
    var project = ts.createProject('tsconfig.json');
    return gulp.src('src/**/*.{ts,tsx}')
        .pipe(ts(project))
        .js
        .pipe(gulp.dest('.tmp'));
});

gulp.task('browserify', ['compile'], function() {
    return browserify({ entries: ['.tmp/app.js']})
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('js'));
});

app.tsxの作成

まだソースがないのでタスクを実行してもbrowserifyで失敗してしまうので、ソースを作ります。

src/app.tsxを作成して、以下のような感じに書き換えます。

import * as React from 'react';
import * as ReactDOM from 'react-dom';

class App extends React.Component<{}, {}> {
    render() {
        return (
            <h1>Hello world</h1>
        );
    }
}

ReactDOM.render(<App />, document.getElementById('content'));

ビルド

Ctrl + Shift + Bを押すとビルドが始まります。

HTMLの作成

JavaScriptが出来たのでindex.htmlを作成します。

<html>
    <head>
        <meta charset="utf-8"/>
        <title>Hello react</title>
    </head>
    <body>
        <div id="content"></div>
        <script src="js/bundle.js"></script>
    </body>
</html>