高機能エディタVisual Studio Codeをちょろっと試してみました。
まずは、reactのコードがコンパイルできるようになるところまでを目指してやってみます。
作業フォルダの作成
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><metacharset="utf-8"/><title>Hello react</title></head><body><divid="content"></div><scriptsrc="js/bundle.js"></script></body></html>
完成！
ということで完成しました。インテリセンスも効くし、ビルドもできる。 アプリの実行の仕方はまた今度。