How to add simple internationalization with i18next for a browser application

#javascript #i18n

In this article, we will take the node example and put it to the browser-side.

Code

We will use the same code as in the previews article, but this time it will be in src/index.js:

import i18next from "i18next";

i18next
  .init({
    lng: "en",
    resources: {
      en: {
        translation: {
          hello_world: "hello world",
        },
      },
    },
  })
  .then((t) => {
    console.log(t("hello_world"));
  });

HTML

The index.html is set up to work with default webpack output:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>i18next vanilla</title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <script defer="defer" src="dist/main.js"></script>
  </head>
  <body></body>
</html>

Dependencies

Besides the library itself, this time we will need webpack packages as well:

$ npm install --save-dev webpack webpack-cli
npm WARN i18next-vanilla@1.0.0 No description
npm WARN i18next-vanilla@1.0.0 No repository field.

+ webpack-cli@4.8.0
+ webpack@5.51.1
added 121 packages from 158 contributors and audited 124 packages in 6.758s

17 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Build script

After adding to package.json:

{
  ...
  "scripts": {
     "build": "webpack --mode=none"
...

We can run the build with:

webpack --mode=none

asset main.js 91.8 KiB [compared for emit] (name: main)
runtime modules 670 bytes 3 modules
modules by path ./node_modules/@babel/runtime/helpers/esm/*.js 3.53 KiB
  ./node_modules/@babel/runtime/helpers/esm/typeof.js 433 bytes [built] [code generated]
  ./node_modules/@babel/runtime/helpers/esm/objectSpread.js 612 bytes [built] [code generated]
  ./node_modules/@babel/runtime/helpers/esm/classCallCheck.js 176 bytes [built] [code generated]
  ./node_modules/@babel/runtime/helpers/esm/createClass.js 579 bytes [built] [code generated]
  ./node_modules/@babel/runtime/helpers/esm/possibleConstructorReturn.js 436 bytes [built] [code generated]
  ./node_modules/@babel/runtime/helpers/esm/assertThisInitialized.js 192 bytes [built] [code generated]
  ./node_modules/@babel/runtime/helpers/esm/getPrototypeOf.js 230 bytes [built] [code generated]
  ./node_modules/@babel/runtime/helpers/esm/inherits.js 490 bytes [built] [code generated]
  ./node_modules/@babel/runtime/helpers/esm/defineProperty.js 269 bytes [built] [code generated]
  ./node_modules/@babel/runtime/helpers/esm/setPrototypeOf.js 200 bytes [built] [code generated]
./src/index.js 338 bytes [built] [code generated]
./node_modules/i18next/dist/esm/i18next.js 77.1 KiB [built] [code generated]
webpack 5.51.1 compiled successfully in 268 ms