@alienfast/i18n next-loader (英语)
注:
我们把工具链换了用 vite 改为 webpack。虽然这个插件仍然可以工作,但我不太可能努力维持这个项目,但肯定会接受并合并拉动请求.
如果你还没有用过 vite 我鼓励你试试看! 和... 我迁移了这个插件, 与 vite 这样你就可以继续做同样的事情 你的地盘文件! 1.0.0 已经释放 https://github.com/alienfast/vite-plugin-i18n-ext-loader (中文(简体) )。 。 。 .
yarn add -D @alienfast/i18next-loader
此网包加载器生成 resources a. 所需结构 下一个i18。该结构在构建时与客户端捆绑在一起,从而避免通过额外的HTTP请求来加载任何语言资源.
特征
- 基于 glob 文件过滤
- 支持再利用的例(白色标签)
- yaml 和 json 支持
- 地方块 (帮助想要 - 见 6号(中文(简体) )
鉴于一个本地目录, 默认情况下, 加载器会找到并分析任意 json|yaml|yml 文件并属性
包含的 lang 文件夹的内容, 例如 . en中。不需要添加诸如 en 或者说 de 在你体内
json 或者说 yaml 文档.
见 test/data 目录 用于结构和示例数据.
使用量
应用程序样本结构
└── app
└── src
│ └── app.js
└── locales
├── index.js
├── de
│ ├── foo.json
│ └── bar.yaml
└── en
├── foo.json
└── bar.yaml
备选案文1:使用webpack.config.js(建议)
module.exports = {
// ... snip
module: {
rules: [
{
test: /locales/,
loader: "@alienfast/i18next-loader",
// options here
//query: { overrides: [ '../node_modules/lib/locales' ] }
},
],
},
// ... snip
};
// File: app.js
import i18n from "i18next";
import resources from "../locales"; // typescript: import * as resources from '../locales'
i18n.init({
resources,
});
// Use the resources as documented on i18next.com
i18n.t("key");
备选案文2:使用导入语法
// File: app.js
import i18n from "i18next";
import resources from "@alienfast/i18next-loader!../locales/index.js";
i18n.init({
resources,
});
// Use the resources as documented on i18next.com
i18n.t("key");
你完蛋了! 滚开! 这个 index.js 可以是空的,只需要将加载器指向地块的根目录.
高级使用
通过加载器设置选项 query。关于这一机制如何运作的更详细情况,见网页文件.
以下例子假设你理解这些值被用作 query 数值.
过滤文件
您可以通过指定所支持的任何 glob 来过滤文件结构中的文件 glob-all。 。 。 .
默认情况下,任何 json|yaml|yml 将会被载入.
只有Json一个
{
include: ["**/*.json"];
}
所有json 除了一个文件
{
include: ["**/*.json", "!**/excludeThis.json"];
}
覆盖/ 白色标签
复用库的应用程序,例如白色标签,可以使用一到多套本地目录 应用程序会覆盖.
{
overrides: ["../node_modules/lib1/locales"];
} // relative or absolute paths
此配置加载器可在如下文件结构上工作:
└── app
├── src
│ └── app.js
├── locales
│ ├── index.js
│ └── en
│ ├── foo.json
│ └── bar.yaml
└── node_modules
└── lib1
└── locales
├── index.js
└── en
├── foo.json
└── bar.yaml
一切从 app/locales 将覆盖一个库中指定的任何内容到许多库.
使用文件底名作为 i18n 命名空间
{
basenameAsNamespace: true;
}
下述文件结构将导致资源加载如下:
└── app
├── src
│ └── app.js
└── locales
├── index.js
└── en
├── foo.json
└── bar.yaml
(原始内容存档于2018-09-26). foo.json
{
"header": {
"title": "TITLE"
}
}
栏
footer:
aboutUs: About us
装入对象中的结果 :
"en": {
"foo": {
"header": {
"title":"TITLE"
}
},
"bar": {
"footer":{
"aboutUs":"About us"
}
}
}
使用相对路径作为 i18n 命名空间
{
relativePathAsNamespace: true;
}
下述文件结构将导致资源加载如下:
└── app
└── locales
├── index.js
└── en
├── green.yaml
├── blue
├──── foo.yaml
绿色. yaml
tree:
species: Oak
蓝色/ foo.yaml
water:
ocean: Quite large
装入对象中的结果 :
"en": {
"green": {
"tree": {
"species":"Oak"
}
},
"blue": {
"foo":{
"water": {
"ocean": "Quite large"
}
}
}
}
注: 如果您有同名的文件和文件夹, 您将使用 MGHT 覆盖其中之一 。 例如:
└── app
└── locales
├── index.js
└── en
├── blue.yaml
├── blue
├──── foo.yaml
蓝色的. yaml
foo: Welcome
蓝色/ foo.yaml
eggs: delicious
装入对象中的结果 :
"en": {
"blue": {
"foo": {
"eggs": "delicious"
}
}
}
但它只是根据 返回值 glob-all所以,你不应该依赖它.
信贷
这是从 i18next-resources-store-loader (i18n-next-resources-tore-loader) (英语) 因为
我们换了 打破不兼容的方式。 。 。 .
感谢原作者和撰稿人.