如何从一个模板创建多个不同语言的页面？

Question

我想从一个通用模板生成多个页面，这些页面将包含不同语言的内容。如何使用 webpack 做到这一点？

我尝试使用不同的 webpack 插件，例如 webpack-static-i18n-html、i18n-webpack-plugin，但对我没有任何帮助。我找到的最好的东西是webpack-static-i18n-html，但它的支持很差，而且这个插件不能观察带有翻译文本的 JSON 文件的变化。以下是我目前拥有的。

这是我来自webpack.common.js的代码。

const Path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const StaticI18nHtmlPlugin = require("webpack-static-i18n-html");
//...

module.exports = {
    //...
    plugins: [
        //...
        new StaticI18nHtmlPlugin({
            locale: 'en',
            locales: ['en', 'ua', 'ru'],
            baseDir: Path.posix.join(__dirname, ".."),
            outputDir: 'src/localized-pages',
            outputDefault: '__lng__/__file__',
            localesPath: 'src/locales',
            files: 'src/templates/index.html'
        }),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: Path.resolve(__dirname, '../src/templates/index.html')
        }),
        new HtmlWebpackPlugin({
            filename: 'ua/index.html',
            template: Path.resolve(__dirname, '../src/localized-pages/ua/src/templates/index.html')
        }),
        new HtmlWebpackPlugin({
            filename: 'ru/index.html',
            template: Path.resolve(__dirname, '../src/localized-pages/ru/src/templates/index.html')
        }),
        //...
    ],
    //...
};

我还有webpack.dev.js 和webpack.prod.js，我通过webpack-merge 插件与webpack.common.js 合并。如您所见，生成页面后，我必须使用HtmlWebpackPlugin 为它们提供服务。使用起来很尴尬。

locales文件夹：

locales
|-en.json
|-ua.json
|-ru.json

en.json文件：

{
    "key": {
        "innerKey" : "value"
    }
}

然后插件生成自：

<p data-t>key.innerKay</p>

这个

<p>value</p>

但正如我所说，如果我改变en.json，什么都不会再生。我不会使用这种方式为不同的语言生成多个页面。

所以，我想从一个模板生成多个页面。有没有办法用 webpack 做到这一点？

Answer 1

我正在使用 Webpack 开发多语言管理仪表板，并且想知道如何解决这个问题，直到我找到一种使用多语言 Web 模板使一切自动化的方法。

首先，webpack-static-i18n-html 不是一个好的解决方案，因为它的大多数包都已弃用。但实际上提到的包是基于一个名为node-static-i18n 的好的 npm 包。所以，你需要做的第一件事就是使用这个命令安装这个 npm 包

npm install -g static-i18n

接下来，您需要将翻译文件制作为 *.json 文件和 json 格式，并将它们放在我命名为“locales”的文件夹中，然后将其放在项目的“src”文件夹中。我的网站需要两种语言。其中一个是英语，另一个是波斯语或波斯语。因此我制作了两个文件，即 fa.json 和 en.json。所以，我有如下图所示的文件夹和文件结构：

My file and folder structure in my Webpack project

• 这是我的 en.json 文件的一部分作为示例：

{

"menu": {
    "items": {
      "dashboard": "Dashboard",
      "posts": "Posts",
      "media": "Media"
    },
    "sub": {
      "items": {
        "all-posts": "All Posts",
        "add-new-post": "Add New",
        "categories": "Categories"
      }
    }
  }

}

• 这是我的 fa.json 文件的一部分作为示例：

{

"menu": {
    "items": {
      "dashboard": "پیشخوان",
      "posts": "نوشته ها",
      "media": "رسانه"
    },
    "sub": {
      "items": {
        "all-posts": "نوشته ها",
        "add-new-post": "افزودن نوشته",
        "categories": "دسته ها"
      }
    }
  }

}

你可以像这样在你的html标签中使用它们：

<span class="className" data-t>menu.items.dashboard</span>

请注意，要使用翻译，您应该在标签中使用属性data-t，例如 span，然后您可以使用保存在相关 json 文件中的键和值来使用标签之间的翻译。有关data-t 及其用法的更多信息，请转到我在本文前面的插件名称中提到的插件的Github 页面。

接下来，您应该在 package.json 文件的脚本部分编写所需的命令以运行 node-static-i18n 以根据您的 html 模板文件翻译您的模板，并将它们保存在项目根目录下的 i18n 文件夹中，如下所示：

"scripts": {

"i18n": "static-i18n -l en -i fa -i en  src --localesPath src/locales/",

}

在上面的命令中：

-l：默认语言环境。

-i：要生成的语言环境列表。

--localesPath：翻译的目录，每个文件都应该命名为LOCALE_NAME.json

现在，如果您运行npm run i18n，此命令应在项目的根路径中创建一个名为i18n 的文件夹，在这种情况下包含两种语言的html 文件。如下图所示：

i18n folder and translated html files in it

接下来，您应该在您的 Webpack 配置文件中配置您的 Html Webpack 插件，以在您的浏览器中显示这些页面，如下所示：

    plugins: [
.
.
.
new HtmlWebpackPlugin({
  //inject: false,
  chunks: ['main'],
  template: 'i18n/index.html',
  filename: 'index.html'
}),
new HtmlWebpackPlugin({
  //inject: false,
  chunks: ['main-rtl'],
  template: 'i18n/fa/index.html',
  filename: 'fa/index.html'
})

]

因为您需要在浏览器上自动查看更改，所以您需要另一个名为 npm-watch 的软件包来通过此命令安装：

npm install -D npm-watch

然后，您应该像这样更改 package.json 的脚本部分：

"scripts": {
    "i18n-watch": "watch 'npm run i18n' src",
    "i18n": "static-i18n -l en -i fa -i en  src --localesPath src/locales/",
  }

通过使用命令npm run i18n-watch，每当您对您的语言环境文件或 src 文件夹中的原始 html 模板进行任何更改时，它都会根据新信息重新翻译您的 html 文件，如果您正在运行您的 webpack 开发服务器，您保存更改后可以立即看到结果。

之后，要同时运行i18n-watch 命令和您的Webpack 开发服务器，最好使用以下命令为此目的安装另一个名为npm-run-all 的npm 包：

npm i -D npm-run-all

最后，您可以像这样更改 package.json 的脚本部分以同时运行 i18n-watch 和 Webpack dev server，然后如果您进行任何更改，您可以在浏览器中看到结果保存更改。

"scripts": {
    "i18n-watch": "watch 'npm run i18n' src",
    "i18n": "static-i18n -l en -i fa -i en  src --localesPath src/locales/",
    "webpack-dev": "webpack-dev-server --open --config=config/webpack.dev.js",

    "start": "npm-run-all --parallel webpack-dev i18n-watch"
  }

现在，如果您在终端中使用 npm start，您将看到您的 Webpack dev server 和 i18n-watch 正在同时运行，以观察任何变化。

希望这是有道理的。