でやってることで全てだけど 前回の記事 でやってた内容を完了まで持って行った。

サブフォルダ以下の ES6 Module 化

https://github.com/mugijiru/ember-rails-todo-app/pull/10 でやったこと。

これは基本的に単純で、ほぼ前回の記事でやってることを全部のフォルダに適用しただけ。

Model だけ命名規則が他と違うので import 関連の処理をそこだけ分岐している

<% if dir == 'models' %>
  <% klass_name = module_name.underscore.camelize %>
<% else %>
  <% klass_name = "#{module_name.underscore.camelize}#{dir.underscore.singularize.camelize}" %>
<% end %>
import <%= klass_name %> from 'todo-app/modules/<%= dir %>/<%= module_name %>';
TodoApp.<%= klass_name %> = <%= klass_name %>;

Model は models/hoge.module.es6 とあったら Hoge として使われるようにして、他は例えば Component だと components/fuga.module.es6 とあったら FugaComponent として使われるようにしているだけ。

あとはそれぞれのファイルを *.js.es6 から *.module.es6 に rename して import, export に書き換えるだけ。とても簡単だし、全部まとめて変更する必要もないので楽。

ただこれをやってる時に気付いたのが import-modules.js.es6.erb が cache されてるおかげで module 化対象のファイルだけ変更・移動しても import 文が変更されなくてうまく読み込まれない問題があるということ。何故か rspec は通ったりするけど。

まあその時は rails tmp:cache:clear して cache を消すか import-modules.js.es6.erb に適当に空行でも加えて cache を使われないようにしたら解決する。

router.js.es6, <APP_NAME>.js.es6, environment.js.es6 の ES6 Module 化

https://github.com/mugijiru/ember-rails-todo-app/pull/11 でやったこと。

サブフォルダのファイルを全部 module にしたら後は変更しないといけないファイルはこれぐらい。

変更の流れは大体以下の感じ

  1. router.js.es6 をこれまでのファイルと同じように module 化
  2. environment.js.es6 も同様に module 化
  3. <APP_NAME>.js.es6 の module 化とそれに伴うファイル移動等

router.js.es6 をこれまでのファイルと同じように module 化

https://github.com/mugijiru/ember-rails-todo-app/pull/11/commits/359520f6656920ac8ef3fe623d15f2368cc66a78

この commit でやってることそのもの。

拡張子を module.es6 に変更して中身を module っぽく書いて require される順番を最後に移動し、最後に他のファイルみたいに import してあげるだけ。

environment.js.es6 も同様に module 化

実はこのファイルをまともに使ってなかったので PR では後ろに回したんだけど、多分ちゃんとやるならこのタイミングかなって。

これもさっきの手順と同じ感じだと思う。 require するタイミングは //= require ./todo-app の直前になる。そのタイミングになる理由はよく知らんけど ember-rails で generate したらそこに来るからそこでいいんだろ(適当)

実際 import して使われるタイミングは application.js.es6 の中で明示的に import することになるので require_self するより前ならどこでも良さそうな気はする。

あと、多分、古いスタイルに書き換える時に適当にやってたのでそもそも古いスタイルでの environment の置き方が正しくなさそうな気もする。

一応 https://guides.emberjs.com/v1.10.0/configuring-ember/ に

Note that the above code must be evaluated before Ember.js loads.

と書いてるのでそれに従って対応してたつもりだけどね。

ま、古いスタイルの正しいやりかたを必要としている人はいないだろうし新しい形式でちゃんと動けば良かろう。ちゃんと動くか知らんけど。

<APP_NAME>.js.es6 の module 化とそれに伴うファイル移動等

https://github.com/mugijiru/ember-rails-todo-app/pull/11/commits/d3673bfa455906abd0ff6d31d1d3f4f083bd4a71 の commit でやってることだけど、ここが結構まとめて色々やらないといけなさそう。

<APP_NAME>.js.es6 を ES6 Module 化をするんだけどここが一番色々書き変わるところ。

事前に Namespace を用意する必要がなくなったので require_self を一番最後にしたり、 import Application from 'ember-rails/application しておいてそこから extend して export して、みたいな。まあ ファイル を見た方が早いか。

で、こいつを ES6 Module にすると ember-rails での自動 import が動くようになる。なので、事前に module 化していたファイルを全部本来の位置に戻した上でこれまでお世話になってきた import-modules.js.es6.erb にさよならすることになる。ま、そいつは消しやすいように別ファイルに分離していたんだけども。

あと当然 application.js.es6 も、他のファイルが全部 module 化された前提で書き換える必要がある。まあほとんど <APP_NAME>.js.es6 を import して create するだけなんだけど。

以上でほぼ終わりだけど、不要になった modules フォルダを消して require_tree する処理を消すのを忘れずに。麦汁さんはそれを忘れて commit を積むことになった

ここまでやると何ができるようになるか

ember-rails で書いた上で最も最新の記述に変更できた状態となる。というわけで、これでようやく ember-cli-rails 移行する準備ができました! やったね!

まあぶっちゃけ ember-cli-rails 移行と module 化を同時にやっちゃうという手もあるけど、 1回1回の変更差分を小さくするには、バラバラがいいかなってことで分けてやっている。

だって、そうじゃないと「はい変更の多い PR はリジェクト〜wwww」ってされかねない^^