やりたきこと
タイトル通り。
今のチームのフロントエンドのJS環境は、こんなけwebpack,ES6とか言われてるのにフロントのビルドツールを使っていない。
現状は自分たちで書くjsのライブラリはfunctionでクラスで作っている。ES5で。
厳密にはクラスではないが、まーいーや。敢えて。
こんな感じ
person.js
//クラス
Person = function(name, age) {
this.name = name;
this.age = age;
};
//継承
Person.prototype.getName = function() {
return this.name;
};
//継承
Person.prototype.sayHello = function() {
console.log('Hello I\'m ' + this.getName());
};
で、上のファイル(person.js)を下の別ファイル(application.js)から呼び出し、インスタンス化。
(ファイルは分割したまま書く。
railsでモジュール管理している。で、アセットパイプラインでbunleしてもらう。)
こんな感じ。
application.js
//newでインスタンス化
var John = new Person('John Frusciante');
//メソッド呼び出し
John.sayHello();//Hello I'm John Frusciante
あー、ES6のClass構文使いたい。まずは使いたい。仕事で使いたい！！
こんな感じに書きたい。
//person.js
//クラス
class Person {
constructor(name) {
this.name = name;
}
}
//エクスポート
export default Person;
//インポート
import Person from './person';
//継承
class Friend extends Person{
constructor(name) {
super(name);
}
sayHello() {
console.log('Hello I\'m ' + this.name);
}
}
//インスタンス化
var John = new Friend('John Frusciante');
//メソッド実行
John.sayHello();//Hello I'm John Frusciante
現状のビルドはrailsで
railsにはJS,CSSの圧縮や連結、scssのコンパイルもやってくれたりするし、モジュールの分割もできるアセットパイプラインっていう便利な機能があるので、ビルドはrailsでやってる状態。
でもなー、これだとなー、フロントの新しい技術使われへんなー、ES6とかで書いてwebpackでbundleしてえ、と思ったのがきっかけ。
アセットパイプラインやとjsならjs,scssならコンパイルされたcssがぜ〜んぶ一行に連結されて出力される、デメリットも当然あるけど。
で、方針
なるべくrailsのアセットパイプラインと仲良くする。(いきなりアセットパイプラインの機能のメリットから完全分離はしない。)
railsの機能で使えるところは使い、分離できるとこは分離する。ってのが方針。で、先人さんたちのサイトを参考にしました。
参考にしたサイト
ES6をrailsで書いてる。でももうちょっとSprocketsと仲良くしたまま移行したいっす。
参考になりました！
webpackで作るSprockets無しのフロントエンド開発
Rails + モダンJS環境(Webpack)で新規アプリ作成
やりたきことはこんな感じ。でもbrowserifyとbabelifyではなく、webpackとbabelのローダーでes6をbundleして変換したい。
でもめっちゃ参考にしました！
モダンJavaScript開発環境 on Rails
ディレクトリ構造が構想通り。それから完全に分離できればと思います！
だいぶ参考にしました!
WebPackを使ってRailsからJavaScriptを楽に良い感じに分離する
で、、、、
色々参考にして自分で作ったリポジトリ
https://github.com/nishidashib/rails-webpack--sprockets
あ、rubyのバージョンは2.2.3を使用しています。
rbenvとかruby-buildとかインストールしてrubyのバージョンを2.2.3にしてください。
自分の環境では動きました。動かんかったらググってみてください。
自分の勉強にもなるので、ちょくちょく更新します。
クドいけどES6を今のチームでも使いたいーーーー。
ではでは。