Laravel Translations Loader 使用教程
项目介绍
Laravel Translations Loader
是一个用于将 Laravel 翻译文件(PHP 或 JSON)导入到你的 JS 包中的 webpack 加载器。这样,你可以使用诸如 i18next
这样的包来处理前端翻译。这个包适用于任何版本的 Laravel,只要你使用 Laravel Mix 或任何自定义的 webpack 配置。
项目快速启动
安装
首先,你需要通过 npm 或 yarn 安装这个包:
$ yarn add @kirschbaum-development/laravel-translations-loader --dev
# 或者
$ npm install @kirschbaum-development/laravel-translations-loader --save-dev
使用
在你的 app.js
文件中,添加以下导入:
import languageBundle from '@kirschbaum-development/laravel-translations-loader';
如果你需要使用参数选项,可以这样写:
import languageBundle from '@kirschbaum-development/laravel-translations-loader/php?parameters=[$1]';
这样,你的参数将被替换为新的语法。
应用案例和最佳实践
使用不同的文件夹
如果你在开发一个包或者因为某些原因需要一个不同的翻译文件位置,你可以通过创建一个 index.js
文件来配置。例如,如果你想从 resources/lang/vendor/[package-name]
加载翻译,首先在这个目录下创建一个空的 index.js
文件,然后这样导入:
import languageBundle from '@kirschbaum-development/laravel-translations-loader/php?resources/lang/vendor/[package-name]';
在 webpack 配置中配置
你也可以在 webpack.config.js
中直接应用上述配置,使其更易读:
rules: [
{
test: path.resolve(__dirname, 'resources/lang/index.js'), // 你的 index.js 文件路径
loader: '@kirschbaum-development/laravel-translations-loader/php?parameters=[$1]'
}
]
然后,在你的 app.js
中导入这个 index.js
文件。
典型生态项目
Laravel Translations Loader
可以与以下项目结合使用:
- Laravel Mix: 用于简化 webpack 的配置。
- i18next: 一个强大的国际化框架,用于处理前端的多语言支持。
- React/Vue.js: 用于构建现代的单页应用,这些应用通常需要前端的多语言支持。
通过这些组合,你可以构建一个完全国际化的现代 web 应用。