RailsのFront EndでTypeScriptを動かすまで

Rails 5.xアプリのFront Endを今まではCoffeeScriptで開発してたのですが，最近の流行に乗ってTypeScriptをさわってみたくなり，Railsアプリ上でTypeScriptを動かすところまでをまとめてみました．

環境セットアップ

素のRails環境からだと，nodejs, npm, yarnあたりが追加でInstall必要でした．
環境次第で他にも必要なものがあるかも．

nodejs / npm

nodejs, npm は ↓ のサイトを参考にInstallしました．
https://qiita.com/seibe/items/36cef7df85fe2cefa3ea

Proxy環境下だとProxyの設定が必要

(http_proxyを環境変数に入れている場合，sudo -E とかでenv引き継いでsudoする必要あり)

SSL Errorになることがある

↓ こちらを参考に npm config set strict-ssl false で一時的に回避しました．
https://blog.yug1224.com/archives/563d9b67bf652a600632d01e

yarn

↓ こちら参考にyarnもInstall.
https://qiita.com/darai0512/items/9e0a2c77d8d3ddf5c0fe

Gem追加

gem 'webpacker', git: 'https://github.com/rails/webpacker.git'

webpackerを追加して，いつもの bundle install．

webpackerインストール

rails webpacker:install
でwebpackerをインストールします．(yarnが入ってないとココで怒られます)
この時点で，TypeScriptをCompileするとき用のCommand bin/webpack が追加されています．

webpackerにTypeScript追加

rails webpacker:install:typescript
最初のサンプルコードになる app/javascript/packs/hello_typescript.ts など追加されます．

自動生成されるサンプルコードは↓な感じ．(これだけだと素のJSと何も変わらん)

app/javascript/packs/hello_typescript.ts

// Run this example by adding <%= javascript_pack_tag 'hello_typescript' %> to the head of your layout file,
// like app/views/layouts/application.html.erb.

console.log('Hello world from typescript');

TypeScriptをCompile

$ bin/webpack
で app/javascript 配下の.tsをCompileしますが，Versionによっては ↓ のようなErrorが出ることがあるようです．(ありました)

ERROR in ./app/javascript/packs/hello_typescript.ts
Module build failed: TypeError: Cannot read property 'afterCompile' of undefined

ほぼ空っぽのサンプルコードなので，何のことやらさっぱりですが，
↓ によると，ts-loader なるもののversionを落とすことで回避できるらしい．
https://github.com/angular/angular-cli/issues/9783

追記 2018/06/19

package.jsonのts-loaderとGemfileのwebpackerのVereion一致はわりとシビアらしく，
今日時点最新のts-loader+webpackerでもCompile時にErrorでました．(WebpackのVersionは4以上が必須，的な)

↓ のように3.5.0に戻せば動きはしますが，最新とVersion乖離が進んでしまうので，できる限り最新で安定動作するVersionの組み合わせを調べないといけません．．．
---/// 追記ここまで

npm/yarnの構成ファイルらしいpackage.jsonのts-loaderのversionを3.5.0にします．

package.json

{
  "name": "your-project",
  "private": true,
  "dependencies": {
    "@rails/webpacker": "^3.4.3",
    "ts-loader": "^3.5.0",
    "typescript": "^2.8.3"
  },
  "devDependencies": {
    "webpack-dev-server": "^3.1.3"
  }
}

変更後に yarn install した後，bin/webpack でCompileが通ると思います．

HTMLからTypeScript呼び出し

サンプルコードの冒頭にも書かれていたとおり，
<%= javascript_pack_tag 'hello_typescript' %>
をHTMLに追加すれば呼び出せる模様．

HTMLから呼び出しのEntry Pointとして使えるのは，app/javascript/packs に配置したものだけらしい．

実際に↑のTagを追加したHTMLをChromeで読み込んでConsole出力を見てみると，

Hello world from typescript

が出力されているはずです．

Production環境で動かす

webpack/typescript特有の処理は特に必要なく，いままでどおりのassets処理でOKぽいです．

# 中間生成物+成果物の除去．public/assetsとpublic/packs以下を全削除．
rake assets:clobber

# 通常のsprocketsのassets pipeline処理のあとに，webpackのcompileが始まる．
rake assets:precompile

rails s

おわり

---///