2017年8月30日CentOSでTypeScript+Node.js+Webpackを使うTypeScriptVagrantで作ったCentOS6+node.js環境にTypeScriptをインストールします。上げることができます。中規模なシステムを構築する場合でもTypeScriptが非常に役立ちます。TypeScriptとは?Microsoftが開発するaltJSと呼ばれる言語です。JavaScriptのスーパーセット(上位互換)という位置づけで、静的型付けなど強力な言語機能を備えています。TypeScriptは高度なwebアプリケーションの開発で使われることが多く、Google社内の標準言語として2017年に採用されています。言うと、以下のような特徴があります。JavaやC#に近い感覚のプログラミングできます。tsファイルをコンパイルすると、JavaScriptのソースコードに変換されます。オープンソースで無料で利用できます。Node.jsとは?Node.jsは、サーバーサイドで動くJavaScriptです。Socket.IOと連携してリアルタイムなウェブコンテンツを作ったり、webpackやgulpのようなフロントエンドエンジニアのツールとして使われます。TypeScriptの問題点TypeScriptは、コンパイラによってJavaScriptのコードが得られます。Modules/importやexport文のこと)をまとめる機能が提供されていません。ModulesのJSファイルをまとめるモジュールバンドラー(例:webpack、Rollup等)をTypeScriptと合わせて使います。webpackとは?tsファイルをコンパイルするとき、依存関係を処理し、ひとつのjsファイルにまとめるために使用します。作業の流れwebpackやTypeScriptなどの必要なモジュールをインストールします。package.json、tsconfig.json、webpack.config.jsを作成します。プロジェクトディレクトリ内のsrcディレクトリにtsファイルを配置します。配置したtsファイルをコンパイルします。出来上がったjsファイルをhtmlから読み込みます。準備Vagrantでゲスト環境(仮想環境)を作ります。1Virtualboxをインストールします。Virtualboxのインストールまでで結構です。Ubuntu2Vagrantをインストールします。centos6環境を作りますので、Vagrantのインストールのみ済ませてください。Ubuntu3Vagrantをインストールします。(Final)nvm0.33.2node.jsv8.4.0typescript2.4.2webpack3.5.5source-map-loader0.2.1awesome-typescript-loader3.2.3Vagrantへログイン1【ホスト環境】端末を開き、前回構築したVagrantのディレクトリまで移動します。vagrant/typescript/2【ホスト環境】仮想マシンを起動します。up3【ホスト環境】ログインします。ssh4【ゲスト環境】rootにログインします。-inpmモジュールのインストール1以下のコマンドでwebpackとTypeScriptなど必要なモジュールをインストールします。source-map-loaderiinstallのショートカット。-Sモジュールのインストール場所(devDependencies)を指定します。–save-devのショートカット。TypeScriptをwebpackで処理するためには「awesome-typescript-loader」を使います。ソースマップを処理するためには「source-map-loader」を利用します。以下のようにインストール結果が表示されます。awesome-typescript-loader@3.2.32実行用の「three」モジュールもインストールします。型定義ファイルも欲しいので「three」だけなく、「@types/three」も指定します。@types/threeiinstallのショートカット。-Sモジュールのインストール場所(dependencies)を指定します。実行ファイルに含まれるモジュールとして利用したいので指定します。–saveのショートカット。以下のようにインストール結果が表示されます。@types/three@0.84.19設定ファイル作成1作業フォルダ「typescript」に移動し、package.jsonファイルを作成します。package.jsonpackage.jsonファイルを編集します。package.jsonファイルは次の内容になります。"ISC"}scriptsは自前のビルドコマンドを記述しておきます。scriptsとdevDependencies以外の情報は省略しています。2同じディレクトリへ、TypeScriptの設定ファイル「tsconfig.json」を作成します。tsconfig.jsonファイルは次の内容になります。2017の先端機能を使うことを明示的に指定します。2015+を一部使っているためです。3同じディレクトリへ、TypeScriptの設定ファイル「webpack.config.js」を作成します。webpack.config.jsファイルは次の内容になります。'source-map'};rulesの部分でawesome-typescript-loaderとsource-map-loaderを指定。resolveに拡張子.tsや.jsを指定しています。以上で設定は完了です。4同じディレクトリにsrcディレクトリとbuildディレクトリを作ります。build以下のようなディレクトリ構成になったと思います。work/build/src/package.jsontsconfig.jsonwebpack.config.jsTSファイルがコンパイル1srcディレクトリに、サンプルのmain.tsファイルを配置します。src/main.tsmain.tsは、以下のような内容になります。Three.js');});2以下のコマンドでmain.tsファイルをコンパイルします。すると、buildフォルダにbundle.jsファイルが出力されます。build3実際にhtmlファイルから読み込みます。同じディレクトリにindex.htmlファイルを作成します。index.htmlindex.htmlは、以下のような内容になります。src="build/bundle.js"></script></head><body></body></html>成功していれば、以下のようなページが表示できます。