使用Node指令碼對前端國際化(二)

2021-10-07 04:54:36 字數 4552 閱讀 3619

以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...