Hugo で typescript を利用する

はじめに

Hugo で typescript を利用する方法をまとめます。
前回 webpack の導入までを実施したのでお済みでない方はこちらをご確認ください。
今回は typescript の導入です。

Github はこちら
github.com

Hugo で typescript を利用する

Hugo は初期状態では typescript を利用する環境がありません。
今回は前回の続きとして webpack を利用して typescript が利用できるようにする設定の流れをまとめます。

typescript を install する

以下のコマンドを実行して typescript をインストールします。

$ npm i -D typescript ts-loader

tsconfig の設定

tsconfig.json を以下のように設定します。

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

webpack の設定

前回作成した webpack.config.js を以下のように修正します。
Hugo のディレクトリ構成に合わせて ts を js にトランスパイルしています。

module.exports = {
  mode: "development",
  entry: `${__dirname}/themes/example/static/js/index.ts`,
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: "ts-loader"
      }
    ]
  },
  resolve: {
    extensions: [".ts"]
  },
  output: {
    path: `${__dirname}/themes/example/static/js/dist`,
    filename: "main.js"
  },
  devServer: {
    contentBase: `${__dirname}/themes/example/static/js/dist`,
    open: true
  }
};

npm-run-all で Hugo と typescript の開発環境を設定する

さて、Hugo であれば hugo server -w といったコマンドで変更検知を行いながら開発を行なっていると思います。
webpack であれば webpack --watch のようなコマンドがあると思います。

Hugo で typescript を利用する場合にはこのコマンドを並行して実行しておく必要があります。
そんな都合の良いものが、と思いきや npm-run-all というツールで解決ができそうです。

$ npm i -D npm-run-all

package.json の scripts を以下のように設定します。
実際に利用するのは npm-run-all に入っている run-p という並列実行が可能なコマンドです。

"scripts": {
    "start": "run-p start:**",
    "start:hugo": "hugo server -t example -w",
    "start:webpack": "webpack --watch",
  },

Hugo で typescript を利用する

前回の記事で作成した themes/example/static/js/index.jsthemes/example/static/js/index.ts と拡張子を変換します。
コードは前回同様で構いません。

import { hello } from "./hello";

hello();

また themes/example/static/js/hello.jsthemes/example/static/js/hello.ts とし、以下のように書きます。

export function hello() {
  console.log('Hello');
}

Hugo の template として読み込む際には前回同様 dist/main.js として読み込みます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="{{ .Site.Title | safeHTML }}">

  <!-- js -->
  <script src="{{ .Site.BaseURL }}js/dist/main.js"></script>
</head>

〜省略〜

では実行します。

$ npm start 

前回同様コンソールに Hello と出力されていることが確認できると思います。

まとめ

Hugo で typescript を利用する方法をまとめました。

Github はこちら
github.com