以往的方式都是先写一个默认简体中文json(或一个不正规的object)，到时翻译人员把一个个json复制编写成各种语言的json，前端动态判断映射到哪个语言的json，然后一个个key映射到所写json的value
键值对应（中文key是因为懒得命名）
看到键值相同（最讨厌写多余代码），然后我又只想把工作量都交给翻译，就连默认的简体中文的翻译表都不想写
首先想到有什么方法可以让对象的值自动等于键，马上想到用defineProperty做数据劫持使用对象的访问器属性马上返回属性值，好，开工
// const lang = {}
Object.defineProperty(lang, ???, {})
不知道属性的啊，因为我懒得初始化赋值给lang
于是我想起了es6的Proxy（下面称代理方法），直接上代码
// 代理的逻辑最好放初始化地方，这里只是方便演示
const trans= new Proxy({},{
get: function(obj, prop) {
return obj[prop] || prop
}
})
export default () => <div>{trans['首页23123123']}</div>
显示正常
完成最简单的部分，有默认值了，然后用nodejs根据所选目录，扒下目录下所有文件的包含trans对象的属性（严谨点是要排除一些不必要扒的文件），生成语言的json模板，执行的主体逻辑如下（时间关系，注释会慢慢添加）
const fs = require('fs')
const readline = require('readline')
const path = require('path')
const reg = /(trans\(.*\))/gi
const dispose = /\/\//
const obj = {}
const separator = 'lang[' // 分隔符
const suffix = ['.js', '.jsx'] // 后缀白名单
// const ignore = ['./pages']
const entry = './src/pages' // 入口
const output = './src/lang/' // 输出路径
const outputFile = `${output}en.json`
let increment = process.argv[2] !== 'new' // 是否增量生成
console.log('-----start-----')
let readNum = 0
function readFileToObj(fReadName, value, callback) {
var fRead = fs.createReadStream(fReadName)
var objReadline = readline.createInterface({
input: fRead,
});
objReadline.on('line', line => {
// 注释的忽略
if (line.includes('//') || line.includes('*')) {
return
}
if (line) {
const arr = line.split(separator)
if (arr.length > 1) {
const bb = arr.slice(1)
for (let i in bb) {
const v0 = bb[i].split(']')[0]
const v = v0.substr(1, v0.length - 2)
if (!v) {
// 空输出提示
console.warn(`空行为：${line}`)
continue
}
// 增量就不覆盖了
if (increment && value && value[v]) {
obj[v] = value[v]
} else {
obj[v] = v
}
}
}
}
})
objReadline.on('close', () => {
if (--readNum === 0) {
let result = JSON.stringify(obj, null, 2)
fs.writeFile(outputFile, result, err => {
if (err) {
console.warn(err)
}
})
callback && callback()
}
})
}
const filePath = path.resolve(entry)
// 递归执行，直到判断是文件就执行readFileToObj
function fileDisplay(filePath, value, callback) {
fs.readdir(filePath, (err, files) => {
let count = 0
function checkEnd() {
if (++count === files.length && callback) {
callback()
}
}
if (err) {
console.warn(err)
} else {
files.forEach(filename => {
var fileDir = path.join(filePath, filename)
fs.stat(fileDir, (err2, status) => {
if (err2) {
console.warn(err2)
} else {
if (status.isDirectory()) {
return fileDisplay(fileDir, value, checkEnd)
}
else if (status.isFile()) {
// 后缀不符合的跳过
if (!suffix.includes(path.extname(fileDir))) {
// return
} else {
readNum++
readFileToObj(fileDir, value)
}
}
checkEnd()
}
})
})
}
})
}
// 开始逻辑
function run() {
new Promise((resolve, reject) => {
fs.exists(outputFile, exists => {
// 存在且增量生成
if (exists && increment) {
console.log('增量更新')
fs.readFile(outputFile, 'utf-8', (err, data) => {
if (err) {
console.warn(err)
} else {
try {
// 旧文件已存在的json
const json = JSON.parse(data)
// console.log(json)
resolve(json)
} catch (e) {
// 翻车
console.warn(e)
errDeal(resolve).then(res => {
resolve()
})
}
}
})
} else {
console.log('全量更新')
resolve()
}
})
}).then(value => {
let startTime = Date.now()
fileDisplay(filePath, value, function (value) {
console.log('finish:', Date.now() - startTime)
})
})
}
// 异常处理
function errDeal(resolve) {
const tips = '出现异常情况1.重新全量生成2.放弃\n'
return new Promise(resolve2 => {
const r1 = readline.createInterface({
input: process.stdin,
output: process.stdout,
})
r1.question(tips, (answer) => {
r1.close()
if (answer == 1) {
console.log('重新')
resolve2(resolve)
// process.exit()
} else if (answer == 2) {
console.log('放弃')
process.exit()
} else {
// resolve()
errDeal(resolve)
}
})
}).then(r => {
return resolve
})
}
run()
生成的json模板
得闲饮茶
网友评论