syakoo's Lab

技術ブログやちょっと気合の入った記事を残すブログ

TypeScriptを勉強してみる(#2 webpack)

f:id:syakoo:20190815173938p:plain

1. はじめに

前からTypeScriptに運命を感じていたので、布教していきます(TS初心者)。前回の記事に書いていることを今回は割愛しているかと思うので、よろしければ前回の記事も観ていってください。TypeScriptを勉強してみる(#1 tsc) - syakoo's Lab

2. Webpackとは...?

さて、前回はtscを用いることでTypeScriptJavaScriptにトランスパイルし、実際にhtml上で動作確認をしました。それでイントロダクションを終了していいかと言われれば、まだTypeScriptのありがたみに触れていないとおもいます。せっかくTypeScriptを使っているので、オブジェクト毎にファイルを管理、したいですよね?

ということで今回使用するのはWebpack

webpack.js.org

これはJSファイルをまとめるモジュールハンドラで、ファイルの依存関係をまとめてくれます。つまり、別のファイルからオブジェクトを引っ張ってきたり、出力したりすることが可能になります。

CommonJSを使うことでtscコマンドからもモジュールを管理できるみたいですが、webpack記事(下にもリンクがあります)が非常にわかりやすかったので今回はwebpackを進めていきたいと思います。

3. 環境構築

前回と同じくNode.jsのパッケージマネージャであるnpmを使って環境構築をしていきます。公式ホームページからNode.jsをインストールしてnpmコマンドを叩けれるようにしておきましょう。

まずは、作業ディレクトリに移動して、パッケージマネージャを初期化

$ npm init

初期設定を聞かれますが、Enter連打で飛ばしても構いません。

次に、npmを用いてローカルのディレクトリに以下のパッケージをインストール。

typescript

$ npm i typescript --save

ts-loader

$ npm i ts-loader --save

webpack

$ npm i webpack --save

webpack-cli

$ npm i webpack-cli --save

しっかりインストールされているかが初期化(init)した際に作られたpackage.jsonを確認すると分かります。

{
  "name": "webpack-tutorial",
  "version": "1.0.0",
  "description": "tutorial",
  "main": "main.js",
  "author": "",
  "license": "ISC",
  // 追記-----------------------------
  "scripts": {
    "build": "webpack",
    "watch": "webpack -w"
  },
  // ---------------------------------
  "dependencies": {
    "ts-loader": "^6.0.4",
    "typescript": "^3.5.3",
    "webpack": "^4.39.2",
    "webpack-cli": "^3.3.6"
  }
}

続いて、tsconfig.jsonwebpack.config.jsを作成して以下のように書いていきます。

tsconfig.json

{
    "compilerOptions": {
      "sourceMap": true,
      "target": "es5",
      "module": "es2015",
    }
}

webpack.config.js

module.exports = {
  mode: "development", //開発モード
  entry: "./typescript/main.ts",
  output: {
    path: `${__dirname}/javascript`,
    filename: "main.js"
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: "ts-loader"
      }
    ]
  },
  resolve: {
    extensions: [".ts"]
  }
};

これで、npm run buildと打つと./typescript/main.tsから./javascript/main.jsが生成されます。

4. TypeScriptを書いてみる

ディレクトリ構成はこちら。

f:id:syakoo:20190815175306p:plain
ディレクトリ構成

前回と同じようにJavaScriptのファイルは./javascriptTypeScriptのファイルは./typescriptに書いていきます。helloWorld.tsmain.tsに以下のコードを記述。

./typescript/helloWorld.ts

function helloWorld(name: string): void {
    let message = name + ': Hello TypeScript :)'
    
    console.log(message);
}

// helloWorld()をファイル外にエクスポートする
export default helloWorld;

./typescript/main.ts

import helloWorld from './helloWorld';

// helloWorld.ts内の関数を呼び出す。
helloWorld('Syakoo');

コメントにもありますが、helloWorld.tshelloWorld()という関数をエクスポートして、main.tsでその関数を呼び出しています。

5. 動作確認

webpack.config.jsで書いている通り、main.tsをメインファイルとしてトランスパイルしていきます。以下のコマンドを実行。

$ npm run build

すると、./javascript/main.jsが生成されます。中身を見てみると...

f:id:syakoo:20190815175418p:plain
main.js

思ったより多く追記されていることがわかります(113行まであります)。それでは動作確認をしていきましょう。前回と同じく、Node.jsを用いてターミナル上で確認できます。

$ node ./javascript/main.js
Syakoo: Hello TypeScript :)

ちゃんと出力されました。

6. ちなみに

上ではwebpack.config.jsmodedevelopmentを選択していました。これは、デバッグする時にJSTSをリンクさせるためです。 このモードをproductionにすると、最適化された状態で出力されます。そちらの動作確認もしていきましょう。

まず、モードの変更

webpack.config.js

module.exports = {
  mode: "production", //変更点
  entry: "./typescript/main.ts",
  output: {
    path: `${__dirname}/javascript`,
    filename: "main.js"
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: "ts-loader"
      }
    ]
  },
  resolve: {
    extensions: [".ts"]
  }
};

そしてトランスパイル

$ npm run build

できたmain.jsを確認すると...

f:id:syakoo:20190815175500p:plain
main.js

一行でまとめられていかにも圧縮されていますね。これで動くのか確認してみる

$ node ./javascript/main.js
Syakoo: Hello TypeScript :)

ちゃんと動きますね。これで終わります。

7. さいごに

今回でオブジェクト毎にファイルを分けれるようになったと思うので、これからTypeScriptを使って楽しく(?)開発していきましょう。 これからはハマったところや気付いたことを記事にしていければなと思っています。

8. 参考記事

↓ 非常に参考になりました。ありがとうございます。

最新版TypeScript+webpack 4の環境構築まとめ(React, Vue.js, Three.jsのサンプル付き - ics.media)