以locals資料夾下面存放國際化檔案為例,我們將zh存放中文為例,下面將演示遍歷所有中文檔案,並進行翻譯,翻譯後生成到對應的資料夾下,保持和中文目錄下的一致的目錄結構。
目錄結構如下
├── index.js
├── translate-core
│ ├── google-translate.js
│ ├── index.js
│ └── string.js
└── translate-helper.js
需要的npm包如下
"jsonic": "^0.3.1",
"klaw": "^3.0.0",
"recast": "^0.19.1",
"request": "^2.88.2",
"request-promise-native": "^1.0.8",
"rimraf": "^3.0.2",
"through2": "^3.0.1"
在使用node指令碼對前端國際化初探已經做了翻譯api,的封裝,本次將上次內容放到translate-core下。
translate-helper存放了一些工具函式,內容如下
const through2 =
require
("through2"
)const path =
require
("path"
)const fs =
require
("fs"
)const filterfolder = through2.
obj(
function
(item, enc, next)
this
.push
(item)
next()
})const
filterjsfile
=(item)
=>
const filterjs = through2.
obj(
function
(item, enc, next)
next()
})/** * 讀取路徑資訊
* @param path 路徑
*/function
getstat
(path)
else})
})}/**
* 建立路徑
* @param dir 路徑
*/function
mkdir
(dir)
else})
})}/**
* 路徑是否存在,不存在則建立
* @param dir 路徑
*/async
function
direxists
(dir)
else
if(i***ists)
//如果該路徑不存在
let tempdir = path.
parse
(dir)
.dir //拿到上級路徑
//遞迴判斷,如果上級目錄也不存在,則會**會在此處繼續迴圈執行,直到目錄存在
let status =
await
direxists
(tempdir)
let mkdirstatus
if(status)
return mkdirstatus
}module.exports =
index.js封裝了翻譯的主體,一些配置項也在這裡
更新:新增對index.js這中入口檔案新增相容,不做翻譯處理
const klaw =
require
("klaw"
)const path =
require
("path"
)const fs =
require
("fs"
)const recast =
require
("recast"
)const
= recast
const jsonic =
require
("jsonic"
)const
=require
("./translate-helper"
)const
=require
("./translate-core/index"
)const rimraf =
require
("rimraf"
)const through2 =
require
("through2"
)// 需要翻譯的語言以及翻譯後生成的資料夾名
const pathmap =
const basedir =
"zh"
// 需要翻譯的資料夾路徑
const rootdir = path.
resolve
(__dirname,
"../locals"
)let sourcemap =
// 每次一處舊檔案,重新建立新的檔案
deleteolddir()
.then((
)=>).
catch
((e)
=>
)/**
* 讀取指定資料夾下的所有檔案並過濾出js檔案,儲存路徑和ast到集合中
* 讀取是個非同步過程
*/function
init()
)}).
on("end",(
)=>)}
)})}
/** * 將字串astcode轉換為物件
*/function
astcodetoobject
(content)
/** * 將ast獲取的物件表示式字串轉換為js物件
*/function
getsourceobject
(ast),}
)return codeobj
}/**
* 批量處理讀取的js檔案
*/function
handleparseobject()
)return sourcemap
}/**
* 將翻譯後的檔案寫回對應的資料夾下
* @param dir 目錄名稱
* @param lang 語言選型
* @param result 翻譯結果(沒有翻譯的檔案傳空字元)
* @param ast ast結果
*/function
rewritefolder
(dir, lang, result, ast)
` }
else
direxists
(resultpath)
.then((
)=>)}
/** * 處理翻譯
*/function
translatesource
(dir, source, lang)).
then
((result)
=>).
catch
((e)
=>)}
/** * 刪除存在的其他語言資料夾
*/function
deleteolddir()
// 檔案刪除完成
resolve()
})}else})
})// })})
}, promise.
resolve()
)}/** * 過濾資料夾下index入口檔案
*/const filterentryindex = through2.
obj(
function
(item, enc, callback))}
else
// this.push(chunk);
callback()
})/** * 去除文字中的,避免翻譯格式錯誤
* @param source
*/function
replacekeybyzero
(source)
object.
keys
(source)
.foreach
((key)
=>/g,
"")})
return nokeysource
}/**
* 還原文字中的
* @param source
*/function
replacezerobykey
(source)
object.
keys
(source)
.foreach
((key)
=>/g,
"")})
return nozerosource
}
前端js(vue)實現國際化
1.建立自己的語言包 language.js 並引入介面。2.語言種類定義json格式,如中文 zh 英文 en 韓語 ko var zh page 3.為語言定義乙個初始值。var languague zh 4.定義乙個函式獲取語言。var getlanguage function else 5....
jquery i18n(前端國際化)
昨天在做前端js的國際化的時候,因為遇到了需要從cookie中獲取語言資訊再進行資源載入的情況,索性就直接將判斷的條件以及i18n的初始化寫到了index頁面中,這裡是velocity的語法。script script foreach gc in request.getcookies if gc.v...
web前端 國際化 自動翻譯(免費)
ant desing pro專案,上次完成了自動識別元件,根據元件屬性生成zh cn國際化對照檔案之後,又遇到乙個問題,怎麼從中文自動翻譯成其他語種?實現原理 如何使用 修改配置 package.json 配置指令碼 執行指令碼,生成檔案 npm run translate us npm run t...