此次使用的是react-i18n-auto babel插件。
引言: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