Typescriptのコンパイルはtscだけじゃだめなのでしょうか

Question

前提

npmでTypescript, ts-loaderをインストールしてあります。

私はjsファイルを作ってHTMLに<script src="./js/main.js">と直接書いていくスタイルでずっとやっていて、CSSに関してもSCSSを最近学び始めたばかりです。

よってnode.js, npmに関しても初心者であり、フロントエンド開発は古代のやり方で止まっています。

目的

静的型付け、class構文（メンバ変数初期化等）や外部ファイル呼び出しなどを行える環境（Typescript）でブラウザで動くjavascriptを作りたい。

疑問

プロジェクトディレクトリでnpm init --y、npmでTypescript, ts-loaderをインストールして、最終的に以下のようなpackage.jsonに。
（scriptやdevDependencies,dependenciesくらいしか理解しておりません）

{
  "name": "project_dir",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "tsbuild": "tsc src/main.ts --outDir dist/" 
  },
  "devDependencies": {
    "ts-loader": "^4.0.1",
    "typescript": "^2.7.2"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

そして、tsconfig.jsonはこのようにしました。

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "sourceMap": false
  },
  "exclude": [
      "node_modules"
  ]
}

(target, moduleの違いがよくわかっていませんが、es5を指定しているのでブラウザで動くのでは？とおもうのですが)

この状態で、静的型付け、class構文や外部ファイル呼び出しなどを使用した.tsファイルは、tscでコンパイルしてもブラウザで動かないのでしょうか？

検索すると、tsifyやらwebpackやらと併用するものばかりで、そうでないとブラウザで動かないのでしょうか。

よろしくお願いいたします。

Comments

[HayatoKamono]

tscまたはnpm run tsbuildでコンパイルされたjsをhtmlのscriptでいつものように読み込んで試してみれば分かるのではないですか？ちなみにts-loaderはwebpackでtypescriptをコンパイルしたい時に使うものなので、webpackを使わない場合はインストール不要です。

[kurosuke___]

外部モジュールの読み込み方法が勉強中でして（しかもネット上では情報が錯綜していて・・・）まだコードが書けないのですが、いずれは使いたいので、かけるようになったときのために環境の方の知識をお貸しいただきたいと思い投稿しました。　ts-loaderはwebpackで使用するのですね、ありがとうございます。

Answer 1

基本的にブラウザで実行するときjsが外部のjsをインポート(import文やrequire())することはできません。なので、依存関係にある複数のjsファイルを1つにまとめる(バンドル)必要があります。これを行うのがbrowserfyやwebpackです。

ただ、外部のjsをインポートするようなjs(ES Module)を読み込む機能がブラウザでも実装されてきています(<script type="module">)。
JavaScript modules via script tag - Can I use
ですがまだ対応状況が微妙なのでこの機能をproductionで使わないほうがよさそうです。

Comments

[kurosuke___]

回答ありがとうございます。
なるほど・・・開発中では外部参照をサポートして、本番環境ではすべて一つのファイルにすることで外部参照を実現しているんですね・・・
webpackやBrowserifyを試してみたいと思います。
ありがとうございました！

Answer 2

ts-loaderはwebpackでtypescriptをコンパイルする時に使うもので、tsifyはbrowserifyというwebpackと似たような立ち位置のツールでtypescriptをコンパイルする時に使うプラグインです。

webpackもbrowserifyもいろいろ設定しないといけないので、手を出しづらいかもしれません。

最近は設定なしでみたいなコンセプトのparcelというのも頭角を現してきてるので、まずはそちらから慣らしていくと良いかもしません。

参考
https://qiita.com/tonkotsuboy_com/items/20ee57c6bb2762746fce