Edited at

TypeScript + SystemJS + lite-serverでさくっとHello, World!する

More than 3 years have passed since last update.

Angular2のチュートリアルをやり、tscとSystemJSの組み合わせは、TypeScriptで実験的なコードを書くには良いと感じた。

なるだけ最小構成で動かすために試したらこうなったので、メモとして残しておきます。


環境構築


とりま npm init

mkdir ts-sample

cd ts-sample
npm init -y

実験なので、-yで色々スキップ。

gitで管理する際には、package.jsonのrepository周りの情報が埋まるので先に git init を走らせておくのがよさ気。


必要なパッケージを追加する

npm i lite-server typescript typings concurrently --save-dev

npm i systemjs --save

※執筆時点でのバージョンは以下

  "devDependencies": {

"concurrently": "^2.2.0",
"lite-server": "^2.2.2",
"typescript": "^1.8.10"
},
"dependencies": {
"systemjs": "^0.19.36"
}


SystemJSの設定

systemjsの設定ファイルを追加

touch systemjs.config.js


systemjs.config.js

System.config({

baseURL: '/',
transpiler: false,
map: {
'app': 'src/app' // dist
},
packages: {
'app': { main: 'index.js' , defaultExtension: 'js' }
}
});


TSCの設定

$(npm bin)/tsc --init


ファイル追加


TypeScriptファイルを追加

せっかくモジュールローダーを使っているので、2ファイル作る

mkdir src

cd src
touch index.ts hello.ts


index.ts

import { Hello } from './hello';

const hello = new Hello();
document.body.innerHTML = hello.message();



hello.ts

export class Hello {

public message() {
return 'hello, world!!';
}
}


index.htmlを追加


index.html

<!DOCTYPE html>

<html>
<head>
<title>sample!?</title>
</head>
<body>
<script src="./node_modules/systemjs/dist/system.src.js"></script>
<script src="./systemjs.config.js"></script>
<script>
System.import('app');
</script>
</body>
</html>

読み込むのがsystemjs関係のみというのがシンプルで良い感じ


動かす


package.jsonにscriptを書く


package.json

...

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "tsc && concurrently \"tsc -w\" \"lite-server\" "
},
...

消耗するので、実験レベルだとタスクランナー使いたくない派


hello, world!

npm run start

をすると、ブラウザが立ち上がり hello, world!!が表示されるはずです。

この状態で、hello, world!!を弄ると、ブラウザに変更が反映されます。

ざっくり仕組みとしては、


  • lite-server が *.js ファイルの変更を監視

  • tsc が *.ts ファイルの監視

を行っており、tsファイルをいじるとそれぞれが連動してブラウザに変更が反映されます。イイネ!


まとめ

あんまりさくっとじゃなかった


(参考)ディレクトリ構成

├── index.html

├── node_modules
├── package.json
├── src
│   ├── hello.js
│   ├── hello.ts
│   ├── index.js
│   └── index.ts
├── systemjs.config.js
├── tsconfig.json
└── typings.json