kimuray · kimuray · Mar 10, 2018 · Mar 10, 2018 · Mar 10, 2018 · Mar 10, 2018
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,18 @@
+{
+  "presets": [
+    ["env", {
+      "modules": false,
+      "targets": {
+        "browsers": "> 1%",
+        "uglify": true
+      },
+      "useBuiltIns": true
+    }]
+  ],
+
+  "plugins": [
+    "syntax-dynamic-import",
+    "transform-object-rest-spread",
+    ["transform-class-properties", { "spec": true }]
+  ]
+}
diff --git a/.gitignore b/.gitignore
@@ -22,3 +22,8 @@
 config/settings.local.yml
 config/settings/*.local.yml
 config/environments/*.local.yml
+/public/packs
+/public/packs-test
+/node_modules
+yarn-debug.log*
+.yarn-integrity
diff --git a/.postcssrc.yml b/.postcssrc.yml
@@ -0,0 +1,3 @@
+plugins:
+  postcss-import: {}
+  postcss-cssnext: {}
diff --git a/Gemfile b/Gemfile
@@ -13,7 +13,7 @@ gem 'pg', '~> 0.18'
 gem 'puma', '~> 3.7'
 
 # Frontend
-# gem 'webpacker'
+gem 'webpacker'
 
 # Backend
 gem 'jbuilder', '~> 2.5'

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -149,6 +149,8 @@ GEM
     rack (2.0.4)
     rack-mini-profiler (0.10.7)
       rack (>= 1.2.0)
+    rack-proxy (0.6.4)
+      rack
     rack-test (0.8.3)
       rack (>= 1.0, < 3)
     rails (5.1.5)
@@ -235,6 +237,10 @@ GEM
       activemodel (>= 5.0)
       bindex (>= 0.4.0)
       railties (>= 5.0)
+    webpacker (3.3.0)
+      activesupport (>= 4.2)
+      rack-proxy (>= 0.6.1)
+      railties (>= 4.2)
     websocket-driver (0.6.5)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.3)
@@ -268,6 +274,7 @@ DEPENDENCIES
   timecop
   tzinfo-data
   web-console (>= 3.3.0)
+  webpacker
 
 BUNDLED WITH
    1.16.1
diff --git a/README.md b/README.md
@@ -14,9 +14,15 @@
 git clone git@github.com:kimuray/dic_memo.git
 cd dic_memo
 bundle install --path vendor/bundle
+yarn
+bin/webpack-dev-server
 rails s
 ```
 
+### 追記
+`yarn` : javascriptのパッケージマネージャー(Rubyでいうところのbundler的なもの)
+`bin/webpack-dev-server` : 開発中にjavascriptの変更を検知して開発環境用に自動でビルドしてくれるもの
+
 ## Development Flow
 
 1. `git checkout develop`

diff --git a/app/frontend/images/.keep b/app/frontend/images/.keep
diff --git a/app/frontend/javascripts/application.js b/app/frontend/javascripts/application.js
@@ -0,0 +1,15 @@
+/* eslint no-console:0 */
+// This file is automatically compiled by Webpack, along with any other files
+// present in this directory. You're encouraged to place your actual application logic in
+// a relevant structure within app/javascript and only use these pack files to reference
+// that code so it'll be compiled.
+//
+// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
+// layout file, like app/views/layouts/application.html.erb
+
+import 'stylesheets/application';
+import Rails from 'rails-ujs';
+
+require.context('images', true, /\.(png|jpg|jpeg|svg)$/)
+
+Rails.start();
diff --git a/app/frontend/stylesheets/application.scss b/app/frontend/stylesheets/application.scss
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -4,8 +4,8 @@
     <title>DicMemo</title>
     <%= csrf_meta_tags %>
 
-    <%= stylesheet_link_tag    'application', media: 'all' %>
-    <%= javascript_include_tag 'application' %>
+    <%= stylesheet_pack_tag 'application', media: 'all' %>
+    <%= javascript_pack_tag 'application' %>
   </head>
 
   <body>

diff --git a/app/views/users/dashboard.html.erb b/app/views/users/dashboard.html.erb
@@ -2,9 +2,7 @@
 <p>Find me in app/views/users/dashboard.html.erb</p>
 
 <% if user_signed_in? %>
-  <!-- リンクを踏むとdeleteではなくgetメソッドが飛びRouting Errorが発生。Webpack導入後に method: :delete に戻す -->
-  <p><%= link_to "log out", destroy_user_session_path, method: :get %></p>
-  <!-- <p><%#= link_to "log out", destroy_user_session_path, method: :delete %></p> -->
+  <p><%= link_to "log out", destroy_user_session_path, method: :delete %></p>
 <% else %>
   <p><%= link_to "user login", user_session_path, method: :get %></p>
 <% end %>
diff --git a/bin/webpack b/bin/webpack
@@ -0,0 +1,15 @@
+#!/usr/bin/env ruby
+
+ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
+ENV["NODE_ENV"] ||= ENV["RAILS_ENV"]
+
+require "pathname"
+ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
+  Pathname.new(__FILE__).realpath)
+
+require "rubygems"
+require "bundler/setup"
+
+require "webpacker"
+require "webpacker/webpack_runner"
+Webpacker::WebpackRunner.run(ARGV)
diff --git a/bin/webpack-dev-server b/bin/webpack-dev-server
@@ -0,0 +1,15 @@
+#!/usr/bin/env ruby
+
+ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
+ENV["NODE_ENV"] ||= ENV["RAILS_ENV"]
+
+require "pathname"
+ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
+  Pathname.new(__FILE__).realpath)
+
+require "rubygems"
+require "bundler/setup"
+
+require "webpacker"
+require "webpacker/dev_server_runner"
+Webpacker::DevServerRunner.run(ARGV)
diff --git a/config/environments/development.rb b/config/environments/development.rb
@@ -1,4 +1,7 @@
 Rails.application.configure do
+  # Verifies that versions and hashed value of the package contents in the project's package.json
+  config.webpacker.check_yarn_integrity = true
+
   # Settings specified here will take precedence over those in config/application.rb.
 
   # In the development environment your application's code is reloaded on

diff --git a/config/environments/production.rb b/config/environments/production.rb
@@ -1,4 +1,7 @@
 Rails.application.configure do
+  # Verifies that versions and hashed value of the package contents in the project's package.json
+  config.webpacker.check_yarn_integrity = false
+
   # Settings specified here will take precedence over those in config/application.rb.
 
   # Code is not reloaded between requests.

diff --git a/config/initializers/devise.rb b/config/initializers/devise.rb
@@ -247,9 +247,7 @@
   # config.navigational_formats = ['*/*', :html]
 
   # The default HTTP method used to sign out a resource. Default is :delete.
-  # リンクを踏むとdeleteではなくgetメソッドが飛びRouting Errorが発生。Webpack導入後に config.sign_out_via = :delete に戻す
-  config.sign_out_via = :get
-  # config.sign_out_via = :delete
+  config.sign_out_via = :delete
 
   # ==> OmniAuth
   # Add a new OmniAuth provider. Check the wiki for more information on setting

diff --git a/config/webpack/development.js b/config/webpack/development.js
@@ -0,0 +1,3 @@
+const environment = require('./environment')
+
+module.exports = environment.toWebpackConfig()
diff --git a/config/webpack/environment.js b/config/webpack/environment.js
@@ -0,0 +1,5 @@
+const { environment } = require('@rails/webpacker')
+const vue =  require('./loaders/vue')
+
+environment.loaders.append('vue', vue)
+module.exports = environment
diff --git a/config/webpack/loaders/vue.js b/config/webpack/loaders/vue.js
@@ -0,0 +1,13 @@
+const { dev_server: devServer } = require('@rails/webpacker').config
+
+const isProduction = process.env.NODE_ENV === 'production'
+const inDevServer = process.argv.find(v => v.includes('webpack-dev-server'))
+const extractCSS = !(inDevServer && (devServer && devServer.hmr)) || isProduction
+
+module.exports = {
+  test: /\.vue(\.erb)?$/,
+  use: [{
+    loader: 'vue-loader',
+    options: { extractCSS }
+  }]
+}
diff --git a/config/webpack/production.js b/config/webpack/production.js
@@ -0,0 +1,3 @@
+const environment = require('./environment')
+
+module.exports = environment.toWebpackConfig()
diff --git a/config/webpack/test.js b/config/webpack/test.js
@@ -0,0 +1,3 @@
+const environment = require('./environment')
+
+module.exports = environment.toWebpackConfig()
diff --git a/config/webpacker.yml b/config/webpacker.yml
@@ -0,0 +1,69 @@
+# Note: You must restart bin/webpack-dev-server for changes to take effect
+
+default: &default
+  source_path: app/frontend
+  source_entry_path: javascripts
+  public_output_path: packs
+  cache_path: tmp/cache/webpacker
+
+  # Additional paths webpack should lookup modules
+  # ['app/assets', 'engine/foo/app/assets']
+  resolved_paths: []
+
+  # Reload manifest.json on all requests so we reload latest compiled packs
+  cache_manifest: false
+
+  extensions:
+    - .vue
+    - .js
+    - .sass
+    - .scss
+    - .css
+    - .module.sass
+    - .module.scss
+    - .module.css
+    - .png
+    - .svg
+    - .gif
+    - .jpeg
+    - .jpg
+
+development:
+  <<: *default
+  compile: true
+
+  # Reference: https://webpack.js.org/configuration/dev-server/
+  dev_server:
+    https: false
+    host: localhost
+    port: 3035
+    public: localhost:3035
+    hmr: false
+    # Inline should be set to true if using HMR
+    inline: true
+    overlay: true
+    compress: true
+    disable_host_check: true
+    use_local_ip: false
+    quiet: false
+    headers:
+      'Access-Control-Allow-Origin': '*'
+    watch_options:
+      ignored: /node_modules/
+
+
+test:
+  <<: *default
+  compile: true
+
+  # Compile test packs to a separate directory
+  public_output_path: packs-test
+
+production:
+  <<: *default
+
+  # Production depends on precompilation of packs prior to booting for performance.
+  compile: false
+
+  # Cache manifest.json for performance
+  cache_manifest: true
diff --git a/package.json b/package.json
@@ -1,5 +1,15 @@
 {
   "name": "dic_memo",
   "private": true,
-  "dependencies": {}
+  "dependencies": {
+    "@rails/webpacker": "^3.3.0",
+    "rails-ujs": "^5.1.5",
+    "vue": "^2.5.14",
+    "vue-loader": "^14.2.1",
+    "vue-template-compiler": "^2.5.14"
+  },
+  "devDependencies": {
+    "webpack-cli": "^2.0.11",
+    "webpack-dev-server": "^2.11.1"
+  }
 }