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
Working code
Now, the demo application should work as expected:
Links
Summary
In this article, we have seen minimal setup needed to start with i18next on the browser side.
%%[i18next]
Top comments (0)