internationalization - 下一个JS : next-translate and yaml loader

Question

是否可以使用 next-translate结合 YAML 装载机？例如，我想使用 yaml-loader .

我自己尝试过，但没有成功:

// file: next.config.js
const nextTranslate = require('next-translate')

module.exports = nextTranslate({
  i18n: {
    locales: ['en', 'es', 'it'],
    defaultLocale: 'en'
  },
  loadLocaleFrom: (lang, ns) =>
    require(`./locales/${lang}/${ns}`).then((m) => m.default),
  webpack: function (config) {
    config.module.rules.push({
      test: /\.ya?ml$/,
      use: 'yaml-loader'
    })
    return config
  }
})

之前的next.config.js配置抛出如下错误:

Module parse failed: Unexpected token (1:8)
File was processed with these loaders:
 * ./node_modules/yaml-loader/index.js
You may need an additional loader to handle the result of these loaders.

Answer 1

这些是使用 YAML 文件而不是带有 next-translate 的 JSON 文件的步骤:

1. 安装 yaml-loader :

yarn add yaml-loader --dev

1. 配置 webpack 以使用 yaml-loader。这是我的 next.config.js 文件:

const nextTranslate = require('next-translate')

module.exports = nextTranslate({
  webpack: function (config) {
    config.module.rules.push({
      test: /\.ya?ml$/,
      type: 'json',
      use: 'yaml-loader'
    })
    return config
  }
})

1. 不要使用 i18n.json。 而是使用 i18n.js。就我而言，我有两个页面:主页 (/) 和教师:

module.exports = {
  locales: ['en', 'es', 'it'],
  defaultLocale: 'en',
  pages: {
    '*': ['common'],
    '/': ['home'],
    '/teachers': ['teachers']
  },
  // Transform YAML files to JSON objects
  loadLocaleFrom: (lang, ns) => {
    return import(`./locales/${lang}/${ns}.yaml`).then((m) => m.default)
  }
}

仅此而已!您现在可以使用人性化的 YAML 格式，而不是机器友好的 JSON 格式。