環境
- Rails5.1.4
- rails/webpacker 3.2.1
公式のdocumentにあるerb-loaderを利用する。 https://github.com/rails/webpacker#erb
ubuntu@ubuntu-xenial:~/rails/yuyuyui$ bundle exec rails webpacker:install:erb
rails aborted!
Don't know how to build task 'webpacker:install:erb' (see --tasks)
taskがないと言われた(この時点ではrails/webpacker 3.0.1あたりだった)。webpackerをupgradeする
ubuntu@ubuntu-xenial:~/rails/yuyuyui$ bundle update webpacker
ubuntu@ubuntu-xenial:~/rails/yuyuyui$ bundle exec rake -T | grep erb
rake webpacker:install:erb # Install everything needed for Erb
タスクができたので再実行する
ubuntu@ubuntu-xenial:~/rails/yuyuyui$ bundle exec rails webpacker:install:erb
Webpacker is installed �
sing /home/ubuntu/rails/yuyuyui/config/webpacker.yml file for setting up webpack paths
Copying erb loader to config/webpack/loaders
create config/webpack/loaders/erb.js
Adding erb loader to config/webpack/environment.js
insert config/webpack/environment.js
insert config/webpack/environment.js
Updating webpack paths to include .erb file extension
insert config/webpacker.yml
Copying the example entry file to /home/ubuntu/rails/yuyuyui/app/javascript/packs
create app/javascript/packs/hello_erb.js.erb
Installing all Erb dependencies
run yarn add rails-erb-loader from "."
いろいろファイルができた。とりあえずwebpack-dev-serverを起動してみる
ubuntu@ubuntu-xenial:~/rails/yuyuyui$ bundle exec bin/webpack-dev-server
/home/ubuntu/rails/yuyuyui/config/webpack/environment.js:4
environment.loaders.append('erb', erb)
^
TypeError: environment.loaders.append is not a function
appendがないと言われる。理由はわからないがとりあえず config/webpack/environment.js
内のappendをsetにして回避する(情報求)
environment.loaders.set('erb', erb)
これで使えるようになる。今回はTypeScriptに書きたいので、config/webpack/loaders/erb.js
の test:
を以下のように書き換える。
module.exports = {
test: /\.(erb|ts)$/,
enforce: 'pre',
exclude: /node_modules/,
use: [{
loader: 'rails-erb-loader',
options: {
runner: 'bin/rails runner'
}
}]
}
これで例えばconfig gemを利用して以下のようなTypeScriptが書ける。
getCards(): Observable<Card[]> {
let url = "http://<%= Settings['api_host'] %>/api/cards.json";
return this.http.get<Card[]>(url);
}