react国际化插件使用总结

此次使用的是react-i18n-auto babel插件。

地址：react-i18n-auto

引言：react-i18n-auto 专门为React中文国际化提供的自动化方案（低维护成本），实现快速开发&迭代。

一、安装

npm install react-i18n-auto --save-dev

推荐环境：node8+,babel7+,webpack4+

二、添加 babel 插件配置（.babelrc 添加方式）

 {
  "presets": [
    "next/babel"
  ],
  "plugins": [
    ["@babel/proposal-decorators", { "legacy": true } ],
    "lodash",
    "@babel/plugin-transform-runtime",
    "module:react-i18n-auto",
    [
      "import",
      {
        "libraryName": "antd",
        "libraryDirectory": "lib"
      }
    ]
  ]
}

三、添加自动化配置 i18n.config.js

const plugin = require('react-i18n-auto')
const path = require('path')

plugin.config({

  // 必选配置项
  // src: path.resolve(__dirname, './pages'), //源文件目录 array|string
  src: [
    path.resolve(__dirname, './pages'), //源文件目录 array|string
    path.resolve(__dirname, './server'),
    path.resolve(__dirname, './components'),
    path.resolve(__dirname, './common'),
    
  ],
  outputPath: path.resolve(__dirname, './output'), //国际化配置输出目录
  excluded: /node_modules|output/, //排除文件选项（默认为：node_modules，及国际化配置输出目录）

  // 本地翻译文件，根据translation配置中的key生成不同的语言包
  translation: {
    en_US: {
      //翻译文件excel|js, array|string
      source: [
        path.resolve(__dirname, './output/en_US/english.xlsx'),
        path.resolve(__dirname, './output/en_US/en.js')
      ]
    }
  },

  //以下为可选配置项
  babelrc: true, //使用当前项目.babelrc配置

  //支持的后缀名
  extensions: [".js", ".jsx", ".tsx", ".ts"],

})

四、运行 node i18n.config.js 自动生成配置文件（每次打包前运行即可，生成最新配置）

记录碰到的几个问题。
1、npm ERR! code EINTEGRITY
解决方案：删除package-lock.json. 就可以了

2、Parsing error : Cannot find module ‘next/babel’
解决方案：npm install next@latest --save-dev