27077


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

[code]

    get 'script.js' do
      babel :script
    end
    
[/code]

sinatraの公式ドキュメントを読みますと、[オリジナルテンプレートエンジンの追加](http://www.sinatrarb.com/intro-
ja.html#%E3%82%AA%E3%83%AA%E3%82%B8%E3%83%8A%E3%83%AB%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%B3%E3%81%AE%E8%BF%BD%E5%8A%A0)の項目がありますので、無理な実装であるということはないと思っています。

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

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

Gemfile

[code]

    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"
    
[/code]

app.rb

[code]

    # 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
    
[/code]

views/script/main.es6

[code]

    alert('test')
    
[/code]

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

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

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

[code]

    "\xEF" on US-ASCII
    
[/code]

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

[code]

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

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

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


CC BY-SA 3.0
2016-06-22T00:34:25.570
26927
2016-06-25T15:44:51.647
2016-06-22T00:49:15.300
5840
5840
question
sinatra es6
sinatraでes6やjsxのコードをトランスパイルしてレンダリングしたい


`config.ru`に`Encoding.default_external = 'UTF-8'`を追加したらエラーが出なくなりました。


CC BY-SA 3.0
2016-06-25T15:44:51.647
27077
2016-06-25T15:44:51.647
5840
26927
answer