LoginSignup
5
5

More than 5 years have passed since last update.

TypeScriptとbrowserifyを併用する

Last updated at Posted at 2015-04-11

どちらもそれほどよくわかっていません。
とりあえず動くところまで持っていくのが大変でした。
sourcemapとかは全然考慮していません。
もっといい方法があれば教えてください。

方針

  • TypeScriptでもnpm使いたい。
  • TypeScriptのimport, exportの挙動が今ひとつしっくりこなかったし、babelに乗り換えるかもしれないのでES6 modulesを使う。
  • 基本的にTypeScriptは型チェックだけをやっててほしい。
  • いきなりtsifyを使ってハマるのは避けたく、まずはCLIから直で叩く。
  • TypeScript 1.5 alpha前提

やったこと

reference pathとimportは両方書く

/// <reference path="./lib/student" />
/// <reference path="../typings/vue/vue.d.ts" />

import Student from "./lib/student";
import Vue = require("vue");

コンパイラのエラーを消すのに、reference pathは必須みたい。
requireするパッケージに関しては、dtsmを使ってd.tsを入れておく。

classはexport default

こうしないとロードできなかった。
defaultじゃなくてもいい方法ないかなぁ。

export default class Student{
  //
}

TypeScriptの出力は、browserifyに食わせやすい形で出す

例えば、tscのオプションは下記のように。

tsc src/main.ts --noImplicitAny --module commonjs --outDir build

--module commonjsしておくと、ES6のimport文をrequireの形に変換してくれる。
そうすれば、browserifyが解決してくれる。

また、--outDirを指定しているのは、ソースディレクトリを汚したくなかったのと、
browserifyに依存関係を解決させるため。
(tscにconcatさせる--outオプションも試したが、なぜか出力が空になってしまった。)

リポジトリ

5
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
5