Edited at

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

More than 1 year has passed since last update.

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.jsonts-loaderGemfilewebpackerのVereion一致はわりとシビアらしく,

今日時点最新のts-loader+webpackerでもCompile時にErrorでました.(WebpackのVersionは4以上が必須,的な)

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

---/// 追記ここまで

npm/yarnの構成ファイルらしいpackage.jsonts-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


おわり

---///