Shares Rails i18n translations with your javascripts without duplicating contents

• Install it with npm install rails-translations-webpack-plugin --save-dev

• To access the generated translations remember to install also json-loader with npm install json-loader --save-dev

• Require it in your webpack.config.js:

  const RailsTranslationsPlugin = require("rails-translations-webpack-plugin");

• Add it to your plugins block. See below for options documentation:

  plugins: [
    new RailsTranslationsPlugin({
      localesPath: path.resolve(__dirname, "../rails-app/config/locales"),
      root       : "src"
    })
  ]

• Add JSON loader in your loaders block:

  module: {
    loaders: [
      {
        include : "src",
        test    : /\.json$/,
        loader  : 'json-loader'
      }
    ]
  }

• Now you can require the translations from your code. E.g.

  // somewhere inside your javascripts
  const translations = require("translations.json");
  console.log(`English translation for hello.world key: ${translations["en"]["hello.world"]}`)

The followings are the available options you can set for RailsTranslationsPlugin:

• localesPath: Path where to look for yml files. Default: current dir
• pattern: Pattern used to find yml files. Default: **/*.yml
• name: Name of the generated json file. Default: translations
• root: Root path of your javascripts. Default: current dir

So let's say you have the following file structure:

• config/
  • locales/
    • en.yml
    • it.yml
  • client/
    • app/
      • index.js
    • webpack.config.js

Your webpack entry point is probably app/index.js. This can be the configuration for RailsTranslationsPlugin:

{
  root: path.resolve(__dirname, "app"),
  localesPath: path.resolve(__dirname, "../config/locales"),
  name: "my_translations"
  pattern: "*.yml"
}

Your client/app/index.js will then be able to require the translations with:

const translations = require("my_translations.json")