webサイトを作成するにあたり、もう言語対応は外せなくなってきました。

webpackで言語対応をする際、色々と迷います。

まずはどういう形でlocale対応をしたいのかで、方法が大きく異なると思います。

今回僕は、英語版と、日本語版をそれぞれコンパイルし、静的ファイルを言語ごとに分ける対応をしてみました。

React等を使用される場合は、storeにtextを保持し、動的に言語を切り替える方法などもありますが、 なんとなくstoreにtextデータがたくさん貯まるのは重くなる気がしてなりません。

だったら使うFrameworkに左右されることなく、静的なファイルを言語毎に履き、別ページとして対応したほうがわかりやすし、シンプルだなーと思い、今回はこの方法を採用しました。

といっても、i18n webpack等で調べるとほんとにいろんなnpmが出てきます。

どれ使う？

• i18n-webpack-plugin はい、検索すると一番上位に出てきました。wepack-pluginというくらいなんで、一番一般的？なんですかね？

とてもわかりやすそうでしたので、今回はこれを使いました。

環境

• node v7.9.0
• webpack 3.8.0
• babel 6.26
• babel-preset-es2015 6.2.4.1

導入方法

まずは、インストール

npm install --save-dev i18n-webpack-plugin

webpack.config.jsを編集

import I18nPlugin = from "i18n-webpack-plugin";
var languages = {
  "en": null,
  "ja": require("./src/locale/ja.json") // dir構造によって変えて下さい。
};

export default Object.keys(languages).map(function(language) {
  ....
  entry: {
    app: './app.js',
  },
  output: {
    path: path.join(__dirname, './public'),
    filename: '[name].' + language + '.js'
  },
  plugins: [
    new I18nPlugin(
      languages[language]
    )
  ]
  ....
  ....
}

• まずはimportします
• 必要な言語を定義し、default（辞書データがない場合はキー名が出力されるので、key名は大体英語だと思うのでenはnullを）
• exportする際に、language毎にループさせる
• filenameに言語名を入れる
• pluginsに追加

この場合、app.en.js と、app.ja.js ファイルが作成される

辞書ファイルを用意

json形式で下記のように用意します。 src/locale/ja.json

{
  "Hello World": "こんにちは"
}

たぶんnestできなそうですが、試してません。

app中での使い方

console.log(__("Hello World"));

この場合、日本語のjaの場合、「こんにちは」と出力され、enの場合は、辞書ファイルを用意してないですが、default設定がenになりますので、key名がそのまま出力される形になります。

以上、これで言語対応ができました！