お問い合わせ
ページのイメージ
  1. Home
  2. ブログ
  3. [Rails]Rails+webpack+babel+vueの環境を作ってみた
WEB開発 2017/01/16
rails

[Rails]Rails+webpack+babel+vueの環境を作ってみた

ミーム君
ミーム君
  • 　

今年はフロントに力をいれていきます！っと宣言をしたところで。。。
今年もよろしくお願いします、システムエンジニアの榊原です。

フロントに力を入れるといったので、今年一発目の記事について、
ruby on railsでwebpack+babel+vueの環境作った際の内容を書いていきたいと思います。
一から説明するとかなり長くなりそうなので、参考にしたサイト、および、実際に構築した際に入れたプラグインなどを書いていきたいと思います。

webpackとは

ざっくり書くとWebAppに必要なリソースの依存関係を自動的に解決し、配布物を生成するビルドツール(コンパイラ)とのことです。
はい、自分で書いてても正直分かり辛いなと思いました…
以下のURLの「Webpackってどんなもの？」というタイトルのQiitaの記事が図を使ってかなりわかりやすく説明されていましたので、そちらを見ていただけると良いと思います。
http://qiita.com/kmszk/items/45fb4690ace32216ca25

環境構築について

環境構築については、参考にしたQiitaの記事とほぼ変わらないので、そちらのURLを書いておきます。

WebPackを使ってRailsからJavaScriptを楽に良い感じに分離する
http://qiita.com/necojackarc/items/afa674ab10aafa9784eb
こちらの記事で参考にした部分は、バックエンドとフロントエンドをどのようなディレクトリ構成にして、分離しているのかという部分です。
記事の内容と同様にプロジェクト直下にfrontendディレクトを作成し、そこフロントエンドで使用するものを集約するようにしています。

実際のwebpackのdev用のconfigについては、以下のようになっています。
production用のconfigについては、まだ動作確認を行っていませんので、申し訳ありませんが、今回は書きません。。。

  1. const webpack = require('webpack');
  2. const path = require('path');
  3.  
  4. const fileName = '[name]';
  5.  
  6. const ExtractTextPlugin = require('extract-text-webpack-plugin');
  7. const ManifestPlugin = require('webpack-manifest-plugin');
  8.  
  9. module.exports = {
  10. 	devtool: 'inline-source-map',
  11. 	entry: {
  12. 		application: './src/javascripts/application.js'
  13. 	},
  14. 	output: {
  15. 		path: path.join(__dirname, '/public/assets'),
  16. 		filename: `${fileName}.js`,
  17. 		publicPath: 'http://localhost:8080/'
  18. 	},
  19. 	module: {
  20. 		loaders: [
  21. 			{ test: /\.vue$/, loader: 'vue' },
  22. 			{ test: /\.js$/, exclude: /node_modules/, loader: 'babel' },
  23. 			{ test: /\.(css|sass|scss)$/, loader: ExtractTextPlugin.extract('css!sass') },
  24. 			{ test: /\.svg$/, loader: 'url?mimetype=image/svg+xml' },
  25. 			{ test: /\.(woff|woff2|eot|ttf)$/, loader: 'url?mimetype=application/font-woff' },
  26. 			{ test: /\.(jpg|jpeg|png)$/, loader: `file?name=${fileName}.[ext]` }
  27. 		]
  28. 	},
  29. 	babel: {
  30. 		presets: ['es2015'],
  31. 		plugins: ['transform-runtime']
  32. 	},
  33. 	resolve: {
  34. 		alias: { vue: 'vue/dist/vue.js' }
  35. 	},
  36. 	plugins: [
  37. 		new ExtractTextPlugin(`${fileName}.css`)
  38. 	]
  39. };

[Vue.js][ES2015][webpack]サンプルソースを利用した学習（HackerNews clone with Vue.js）
http://qiita.com/yoshiro_ma/items/0ce5bf65900e5fed31ec
記事と同様にフロントエンドで利用するライブラリに関してはnpmで管理しました。
主にこちらの記事で参考した部分は、ライブラリの内容、今回の構成に必要なライブラリという部分です。

実際構築した際の入れたライブラリはnpmのpackage.jsonの内容を以下に記載しますので、そちらのご確認ください。

  1. {
  2.   "name": "frontend",
  3.   "version": "1.0.0",
  4.   "description": "",
  5.   "devDependencies": {
  6.     "babel": "^6.5.2",
  7.     "babel-core": "^6.18.2",
  8.     "babel-loader": "^6.2.7",
  9.     "babel-plugin-transform-runtime": "^6.15.0",
  10.     "babel-preset-es2015": "^6.18.0",
  11.     "css-loader": "^0.25.0",
  12.     "extract-text-webpack-plugin": "^1.0.1",
  13.     "file-loader": "^0.9.0",
  14.     "node-sass": "^3.13.0",
  15.     "rimraf": "^2.5.4",
  16.     "sass-loader": "^4.0.2",
  17.     "style-loader": "^0.13.1",
  18.     "url-loader": "^0.5.7",
  19.     "vue-loader": "^9.8.0",
  20.     "webpack": "^1.13.3",
  21.     "webpack-dev-server": "^1.16.2",
  22.     "webpack-manifest-plugin": "^1.1.0"
  23.   },
  24.   "dependencies": {
  25.     "bootstrap": "^3.3.7",
  26.     "vue": "^2.0.5",
  27.     "vue-router": "^2.0.1"
  28.   },
  29.   "scripts": {
  30.     "clean": "rimraf public/assets",
  31.     "dev": "NODE_ENV=development webpack-dev-server --config config/development/webpack.config.js --progress --colors --inline --hot",
  32.     "production": "NODE_ENV=production webpack config/production/webpack.config.js --progress --colors",
  33.     "build": "npm run clean && npm run production"
  34.   }
  35. }

パッケージの管理方法について

npmでのパッケージ管理方法、package.jsonの内容について、ざっくりとですが、備忘録として書いておきます。

package.jsonの作成について

package.jsonについては、自分で作成するのではなく、ターミナルで以下のコマンドを入力することで、対話形式で作成されます。
作成される場所については、カレントディレクトリとなるため、コマンドを実行する前に作成したいディレクトリに移動しておいてください。

$ npm init

devDependenciesとdependenciesの違いについて

ライブラリをインストールする際、devDependenciesに記載されているライブラリについては、dev環境時にのみインストールされ、dependenciesに記載されているライブラリについては、すべての環境でインストールされます。
そのため、dev環境のみ必要なものはdevDependenciesに、それ以外のものに関してはdependenciesにという感じに使い分ける形です。
こちらの記述に関しては、手動で行うのではなく、ライブラリのインストール時の以下のようにコマンドを実行することで自動的に記述されます。

・devDependenciesに記述する場合
$ npm install --save-dev [ライブラリ名]

・dependenciesに記述する場合
$ npm install --save [ライブラリ名]

ライブラリのインストールについて

ライブラリのインストールについて、package.jsonが作成されていない場合については、上記の「devDependenciesとdependenciesの違いについて」で書かれているコマンドを実行して、ライブラリのインストール、および、package.jsonの記述を行いますが、すでにpackage.jsonが作成されている場合には、その内容を元にライブラリのインストールが可能です。
コマンドとしては以下となり、オプションを省略した場合については、「--dev」を付けた状態と同様の処理をします。
そのため、devDependenciesに記述されたライブラリもインストールしたい場合には、オプション省略、または、「--dev」を付けてコマンドを実行してください。

  1. $ npm install [オプション(例: --production)]

スクリプトについて

webpackのビルド等を実行するためには、毎回コマンドを実行しないとならないのですが、それを手動で入力するのは結構しんどいです。
そのため、基本的にはpackage.jsonの「scripts」にビルド用のコマンド等を記述しておき、簡単なコマンドで済むようにします。
スクリプトの実行については、以下のコマンドで行えます。

  1. $ npm run [スクリプト名]

webpack-dev-serverについて

基本的には上記の「環境構築について」の内容でフロントエンドのリソースのビルドは可能なのですが、面倒なことにファイルを修正するたびにコマンドを実行して、ビルドしなければなりません。
実際、その状態で開発しようとしたんですが、かなり面倒だったので、どうにか自動的にビルドできないかということで、見つけたのがwebpack-dev-serverというライブラリでした。
詳細については、自分もまだまだわかっていない部分があるので割愛しますが、ruby on rails で利用するにあたって、asset周りで修正する必要がありました。
修正内容については、以下の記事の導入手順のconfig/initializers/assets.rbへの追記からアセットの読み込みまでを行ってもらい、webpack-dev-serverの起動、railsのプロセス起動を行ってもらえれば、自動ビルド、反映が実現できます。

Rails 4.2でSprocketsを捨ててwebpackに移行する
http://qiita.com/dakatsuka/items/c815a27b9740c843bee0

まとめ

今回は自分もまだまだ試せていない部分が多く、かなり説明を端折っている部分あり、また、間違った説明をしている部分があるのでないかと思います。。。
また、色々試した際には、もう少し詳細に記事を書かせていただきたいと思います。
駆け足となってしまいましたが、このあたりで終わりにさせていただきます。
遅くなりましたが、今年も一年よろしくお願いいたします。


しずおかオンライン中途採用社員も、積極募集中！
しずおかオンラインののスタッフとして、地域の魅力を伝える仕事です。
くわしくはこちら！

※「イエタテ」は2023年4月より㈱くふう住まいにて運営しています
ミーム君

記事を書いたひと

ミーム君

関連記事

一覧へ

Category

Ranking