ホーム >  TypeScript >  CentOSでTypeScript+Node.js+Webpackを使う


Posted:2017/08/31 9:00:09 AM|Category : TypeScript

CentOSでTypeScript+Node.js+Webpackを使う

Vagrantで作ったCentOS6node.js環境にTypeScriptをインストールします。

TypeScriptの使いどころ

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のコードが得られます。しかし、TypeScriptのコンパイラにはECMAScript Modules(ES Modules/importやexport文のこと)をまとめる機能が提供されていません。ECMAScript ModulesのJSファイルをまとめるモジュールバンドラー(例:webpack、Rollup等)をTypeScriptと合わせて使います。

webpackとは?

tsファイルをコンパイルするとき、依存関係を処理し、ひとつのjsファイルにまとめるために使用します。

作業の流れ

  1. webpackやTypeScriptなどの必要なモジュールをインストールします。
  2. package.json、tsconfig.json、webpack.config.jsを作成します。
  3. プロジェクトディレクトリ内のsrcディレクトリにtsファイルを配置します。
  4. 配置したtsファイルをコンパイルします。
  5. 出来上がったjsファイルをhtmlから読み込みます。

準備

Vagrantでゲスト環境(仮想環境)を作ります。

①Virtualboxをインストールします。Virtualboxのインストールまでで結構です。

VirtualBoxをインストールする for Ubuntu

②Vagrantをインストールします。centos6環境を作りますので、Vagrantのインストールのみ済ませてください。

Vagrantをインストールしてテスト環境を作る for Ubuntu

③Vagrantをインストールします。

CentOS6にnode.jsの最新バージョン(v8.4.0)をインストール

ホスト環境

OS Ubuntu 16.04.1 LTS 64bit
Virtualbox 5.1
Vagrant 1.9.5

ゲスト環境

OS CentOS release 6.9 (Final)
nvm 0.33.2
node.js v8.4.0
typescript 2.4.2
webpack 3.5.5
source-map-loader 0.2.1
awesome-typescript-loader 3.2.3

Vagrantへログイン

①【ホスト環境】端末を開き、前回構築したVagrantのディレクトリまで移動します。

cd vagrant/typescript/

②【ホスト環境】仮想マシンを起動します。

vagrant up

③【ホスト環境】ログインします。

vagrant ssh

④【ゲスト環境】rootにログインします。

sudo -i

npmモジュールのインストール

①以下のコマンドでwebpackとTypeScriptなど必要なモジュールをインストールします。

npm i -D webpack typescript awesome-typescript-loader source-map-loader
i installのショートカット。
-S モジュールのインストール場所(devDependencies)を指定します。–save-devのショートカット。

TypeScriptをwebpackで処理するためには「awesome-typescript-loader」を使います。ソースマップを処理するためには「source-map-loader」を利用します。

以下のようにインストール結果が表示されます。

+ source-map-loader@0.2.1
+ webpack@3.5.5
+ typescript@2.4.2
+ awesome-typescript-loader@3.2.3

②実行用の「three」モジュールもインストールします。型定義ファイルも欲しいので「three」だけなく、「@types/three」も指定します。

npm i -S three @types/three
i installのショートカット。
-S モジュールのインストール場所(dependencies)を指定します。実行ファイルに含まれるモジュールとして利用したいので指定します。–saveのショートカット。

以下のようにインストール結果が表示されます。

+ three@0.87.1
+ @types/three@0.84.19

設定ファイル作成

①作業フォルダ「typescript」に移動し、package.jsonファイルを作成します。

cd /vagrant/typescript
vi package.json

package.jsonファイルを編集します。package.jsonファイルは次の内容になります。

{
  "name": "work",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "awesome-typescript-loader": "^3.2.3",
    "source-map-loader": "^0.2.1",
    "typescript": "^2.4.2",
    "three": "^0.87.1",
    "webpack": "^3.5.5"
  },
  "devDependencies": {
    "awesome-typescript-loader": "^3.2.2",
    "source-map-loader": "^0.2.1",
    "typescript": "^2.4.2",
    "webpack": "^3.4.1"
  },
  "scripts": {
    "build": "webpack",
    "watch": "webpack -w"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

scriptsは自前のビルドコマンドを記述しておきます。scriptsとdevDependencies以外の情報は省略しています。

②同じディレクトリへ、TypeScriptの設定ファイル「tsconfig.json」を作成します。tsconfig.jsonファイルは次の内容になります。

{
  "compilerOptions": {
    "sourceMap": true,
    // TSはECMAScript 5に変換
    "target": "es5",
    // TSのモジュールはES Modulesとして出力
    "module": "es2015",
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

libにはTypeScriptでのコンパイル時にECMAScript 2017の先端機能を使うことを明示的に指定します。これはThree.jsが内部的に最新のECMAScript 2015+を一部使っているためです。

③同じディレクトリへ、TypeScriptの設定ファイル「webpack.config.js」を作成します。webpack.config.jsファイルは次の内容になります。

module.exports = {
  // メインとなるJavaScriptファイル(エントリーポイント)
  entry: './src/main.ts',
  // ファイルの出力設定
  output: {
    //  出力ファイルのディレクトリ名
    path: `${__dirname}/build`,
    // 出力ファイル名
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        // 拡張子 .ts の場合
        test: /\.ts$/,
        // TypeScript をコンパイルする
        use: 'awesome-typescript-loader'
      },
      // ソースマップファイルの処理
      {
        enforce: 'pre',
        test: /\.js$/,
        loader: 'source-map-loader'
      }
    ]
  },
  // import 文で .ts ファイルを解決するため
  resolve: {
    extensions: [
      '.ts', '.js', '.json'
    ],
  },
  // ソースマップを有効に
  devtool: 'source-map'
};

rulesの部分でawesome-typescript-loaderとsource-map-loaderを指定。resolveに拡張子.tsや.jsを指定しています。

以上で設定は完了です。

④同じディレクトリにsrcディレクトリとbuildディレクトリを作ります。

mkdir src
mkdir build

以下のようなディレクトリ構成になったと思います。

  • work/
  • build/
  • src/
  • package.json
  • tsconfig.json
  • webpack.config.js

TSファイルがコンパイル

①srcディレクトリに、サンプルのmain.tsファイルを配置します。

vi src/main.ts

main.tsは、以下のような内容になります。

import * as THREE from 'three';

window.addEventListener('DOMContentLoaded', () => {
  // レンダラーを作成
  const renderer = new THREE.WebGLRenderer();
  // レンダラーのサイズを設定
  renderer.setSize(800, 600);
  // canvasをbodyに追加
  document.body.appendChild(renderer.domElement);

  // シーンを作成
  const scene = new THREE.Scene();

  // カメラを作成
  const camera = new THREE.PerspectiveCamera(45, 800 / 600, 1, 10000);
  camera.position.set(0, 0, 1000);

  // 箱を作成
  const geometry = new THREE.BoxGeometry(250, 250, 250);
  const material = new THREE.MeshPhongMaterial({color: 0xff0000});
  const box      = new THREE.Mesh(geometry, material);
  box.position.z = -5;
  scene.add(box);

  // 平行光源を生成
  const light = new THREE.DirectionalLight(0xffffff);
  light.position.set(1, 1, 1);
  scene.add(light);

  const tick = (): void => {
    requestAnimationFrame(tick);

    box.rotation.x += 0.05;
    box.rotation.y += 0.05;

    // 描画
    renderer.render(scene, camera);
  };
  tick();

  console.log('Hello Three.js');
});

②以下のコマンドでmain.tsファイルをコンパイルします。すると、buildフォルダにbundle.jsファイルが出力されます。

npm run build

③実際にhtmlファイルから読み込みます。同じディレクトリにindex.htmlファイルを作成します。

vi index.html

index.htmlは、以下のような内容になります。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8"/>
  <script defer src="build/bundle.js"></script>
</head>
<body>
</body>
</html>

成功していれば、以下のようなページが表示できます。

サンプルを別windowで再生


トラックバック用のURL
プロフィール

名前:イワサキ ユウタ 職業:システムエンジニア、ウェブマスター 誕生:1986年生まれ 出身:静岡県 特技:ウッドベース 略歴 2008年04月 金融機関系I

最近の投稿
人気記事
カテゴリー
広告