rails-translations-webpack-plugin
Shares Rails i18n translations with your javascripts without duplicating contents
Usage
-
Install it with
npm install rails-translations-webpack-plugin --save-dev
-
To access the generated translations remember to install also
json-loader
withnpm 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"]}`)
Options
The followings are the available options you can set for RailsTranslationsPlugin:
localesPath
: Path where to look for yml files. Default: current dirpattern
: Pattern used to find yml files. Default:**/*.yml
name
: Name of the generated json file. Default: translationsroot
: 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
- app/
- locales/
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")