sinatraではerbなどのメソッドを利用することで、簡単にviewsディレクトリに配置したテンプレートファイルを出力することができますが、es6やjsxのコードをトランスパイルしたコードを同じような形で出力したいと思っています。

get 'script.js' do
  babel :script
end

sinatraの公式ドキュメントを読みますと、オリジナルテンプレートエンジンの追加の項目がありますので、無理な実装であるということはないと思っています。

また、sinatraではテンプレートエンジンのレンダリングにtiltを使っているようで、tiltのgithubを閲覧してみると、es6やjsxのレンダリングに対応している様子が見受けられました。

これをうまく利用することで要望を満たすことができるのではないかと思い、両者のドキュメントを確認しながら以下のコードを作成しました。

Gemfile

gem "sinatra", "~> 1.4.7"
gem "sinatra-contrib", "~> 1.4.7"
gem "slim", "~> 3.0.7"
gem "sass", "~> 3.4.22"
gem "babel-transpiler", "~> 0.7.0"

app.rb

# coding: utf-8
require 'sinatra'
require 'sinatra/reloader'
require 'slim'
require 'sass'
require 'tilt/babel'

helpers do
  def babel(*args) render(:babel, *args) end
end

get '/style/main' do sass :'style/main' end
get '/script/main' do babel :'script/main' end

views/script/main.es6

alert('test')

実際はもう少し複雑なコードだったのですが、投稿用に余計な部分は削除させていただきました。

上記のコードでhttp://example.com/style/mainにアクセスするとsassがトランスパイルされてcssがクライアントサイドから取得できるのが確認できます。

しかし、独自にhelperで実装したbabelメソッドを実装したルーティングにアクセスすると次のようなエラーメッセージが返ってきます。

"\xEF" on US-ASCII

sinatraもtiltもあまり深く触ったことがないので探り探りの実装になってしまっているのですが、どうやらviews/script/main.es6のファイルをmain.babelやmain.jsx以外の拡張子にリネームするとエラー内容が以下に変わりますので、tiltがes6ファイルをトランスパイルしようとしているような様子は確認できました。

No such file or directory @ rb_sysopen - /var/www/vhosts/test-project/views/script/main.babel

main.es6ファイルの文字コードに問題があるような気がしているのですが、emacs上の表記では-UUUとなっていますので、UTF-8に設定されていることが確認できます。

何が問題なのか指摘箇所などありましたら是非アドバイスいただければと思っています。