Rails✖︎Webpacker

Webpackerとは、webpackをRailsで使用するためのgemパッケージ。

webpackを使用すれば、Javascriptなどの静的アセット(リクエスト毎に生成しないもの)の管理&packにまとめる等が出来る。

※静的アセットを利用することで、アプリケーションの高速化につながる。

WebpackerをRailsで使うには

1. YarnとNode.jsを用意。
2. Webpackerをインストール。

Webpackerインストール後

Webpackerのインストール後は、app/javascript/packs以下のJavascriptファイルがコンパイルされてpackにまとめられるようになる。

packにまとめられたコードは、以下のようなコードで呼び出すことが出来る。

<%= javascript_pack_tag 'hello_vue' %>

※自分の場合は、packsディレクトリにhello_vue.jsというファイルが存在するので、'hello_vue'を指定している。

コンパイルする方法

rails assets:precompile

上記コマンドを実行すれば、publicディレクトリの配下にコンパイルされたJavaScriptのコードなどが出力される。

また、同時に生成されるmanifest.jsonというファイル内で定義されたファイルが出力されるよういなっている。

{
  "entrypoints": {
    "hello_vue": {
      "js": [
        "/packs/js/✳︎✳︎✳︎-✳︎✳︎✳︎.js"
      ],
      "js.map": [
        "/packs/js/✳︎✳︎✳︎-✳︎✳︎✳︎.js.map"
      ]
    }
  },
  "hello_vue.js": "/packs/js/✳︎✳︎✳︎-✳︎✳︎✳︎.js",
  "hello_vue.js.map": "/packs/js/✳︎✳︎✳︎-✳︎✳︎✳︎.map"
}

上記コマンドを実行時には、NODE_ENVのデフォルトはproductionになる。

WebpackerでJavaScriptの環境変数を扱うには

Railsで開発を行うさいに、Wecpackerで扱うJavaScriptの環境変数を切り替える方法を調べたのでまとめます。

1. gem dotenvを入れる。
2. envファイルを環境ごとに作成。
3. package.jsonにScriptsを記載。
4. webpack/environment.jsにコードを追加。

上記の流れの詳細は以下の通り。

gem dotenvを入れる

gemfileに、以下のコードを追加。

gem 'dotenv'

bundle installでgemをインストールする。

envファイルを環境ごとに作成

自分が作成したファイルは、以下の2パターンです。

(.env.development)
NODE_ENV='development'
VUE_APP_API_ORIGIN='http://localhost:3000'

(.env.production)
NODE_ENV='production'
VUE_APP_API_ORIGIN='https://example.com'

同じ名前の環境変数を定義していますが、NODE_ENVの値によって開発or本番環境用の値を取り出します。

package.jsonにscriptsを記載

以下のコードは、こちら
のページで紹介されていたものを使用しました。

"scripts": {
    "serve": "vue-cli-service serve",
    "dev-serve": "vue-cli-service serve --mode development",
    "prod-serve": "vue-cli-service serve --mode producution",
    "build": "vue-cli-service build",
    "dev-build": "vue-cli-service build --mode development",
    "prod-build": "vue-cli-service build --mode producution",
    ...
  }

webpack/environment.jsにコードを追加

dotenvを使用できるようにするためのコード。

const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
const dotenv = require('dotenv')

const dotenvFiles = [
    `.env.${process.env.NODE_ENV}.local`,
    '.env.local',
    `.env.${process.env.NODE_ENV}`,
    '.env'
  ]
  dotenvFiles.forEach((dotenvFile) => {
    dotenv.config({ path: dotenvFile, silent: true })
  })
  
  environment.plugins.prepend('Environment',
    new webpack.EnvironmentPlugin(
      JSON.parse(JSON.stringify(process.env))
    )
  )


module.exports = environment