VUE 項目基於 i18n 的國際化處理工具

項目 git 地址：i18n-collect-cli
npm 依賴包地址：i18n-collect-cli
issue 地址：issue

可用於已有 vue 項目的中文提取與替換，將語言文件如 zh.js 轉成 excel，同時也能夠將 excel 轉成對應的翻譯文件如 en.js

目前工具的限制

1. 目前腳本 僅支持 .vue 文件和 .js 文件 中的中文提取與寫入，若是涉及其餘文件夾下的內容，可根據腳本內容進行修改對應須要處理的文件內容
2. 目前支持 vue 項目
3. 寫入的腳本需 本地 node 環境版本不能低於 10.12.0

工具依賴包的安裝

1. 安裝工具依賴包

$ npm i -g i18n-collect-cli
複製代碼

目前該工具屬於全局指令操做，因此須要全局安裝

項目中文的提取

1. 執行 getLang 進行提取中文操做，filename 默認爲 zh_cn.json

$ i18n-cli getlang [src] -f <filename> -d <dir> -i <ignoredir>
複製代碼

• src 爲入口目錄
• filename 爲生成的語言文件的文件名，必須爲json格式， 默認爲zh_cn.json
• dir 爲要收集的文件目錄, 默認爲 [pages, components]
• ignoredir 爲 dir 目錄下被忽略的文件目錄

執行完成後會在同級目錄下生成一個 zh_cn.json 文件，經過json格式化後（必需要格式化，不然後續經過 $t 寫入項目會報錯），內容格式形同以下：

{
  'cs_common': {
    'cs_1': '用戶ID',
    'cs_2': '搜索',
  },
  'cs_error': {
    'cs_3': '請輸入小於200字符！',
    'cs_4': '請正確填寫年齡([0~120])！'
  }
}
複製代碼

3. 將 zh_cn.json 文件中的中文對應的 key 用語義化字符串代替，修改後獲得的 zh_cn.json 文件以下

{
  'cs_common': {
    'userId': '用戶ID',
    'search': '搜索',
  },
  'cs_error': {
    'maxInput': '請輸入小於200字符！',
    'ageTip': '請正確填寫年齡([0~120])！'
  }
}
複製代碼

項目中文的替換

1. 執行 writeLang 將中文以 i18n 的模式寫入文件（僅支持 components 與 pages 裏的 .vue 文件和 .js 文件）

$ i18n-cli writelang [srcDist] -f <filename> -d <dir> -i <ignoredir>
複製代碼

• srcDist 爲複製 src 出來的文件夾名
• filename 爲生成的語言文件的文件名，必須爲json格式， 默認爲zh_cn.json
• dir 爲要替換成 $t 的文件目錄, 默認爲 [pages, components]
• ignoredir 爲 dir 目錄下被忽略的文件目錄

注： 一、非 .vue 文件須要引用 i18n 才能使用 二、dir 能夠是src下的任意文件目錄

執行以上腳本後會在 src 同級目錄生成 srcDist 文件夾，文件夾內僅包含 components 與 pages 文件夾下的 .vue 文件和 .js 文件

2. 將 srcDist 文件夾內容替換到 src 文件夾中，覆蓋重複的文件

3. 將 zh_cn.json 內數據放入項目中的多語言模塊如 zh.js 文件中，運行項目，全局遍歷一下是否有遺漏

注： 以上基於項目中已加入 i18n ，而且已作好配置。

該腳本還不夠完善，目前僅支持部分經常使用模版的文案提取，有其餘使用場景的，能夠幫忙補充。

國際化語言提取與寫入

專業的事情找專業的人作，畢竟不是全部的開發人員都能作翻譯。因此會有找相關翻譯人員處理國際化語言的需求，估有了此工具，用於提取js文件裏的關鍵數據，轉成excel表格交給專業的人進行翻譯

國際化語言的提取

一、將語言文件 zh.js 轉成 excel 表格，好提供給專業的人進行翻譯

$ i18n-cli toexcel [url] [translateUrl] [filename] 
複製代碼

url 必填，爲js文件的路徑 translateUrl 選填，爲已經翻譯的語言的js，用於提取語言增量 filename 默認爲zh.xlsx, 默認保存路徑爲當前執行命令的路徑，且保存路徑不可修改

注：js中對象的 key 必須帶引號，以下

export default {
  'common': {
    'workOrder': '工單類型',
    'operateSucc': '操做成功',
    'testDrive': '試駕',
    'detail': '詳情',
    'selectEquity': '選擇權益',
    'selectEvent': '選擇事件',
    'sorry': '抱歉'
    ...
  }
  ...
}
複製代碼

若是沒有選擇已經翻譯的語言的js時，最後生成的excel表格以下

若是選擇了已經翻譯的語言的js，如

export default {
  'cs_common': {
    'detail': 'detail',
    'selectEquity': 'selectEquity',
    'selectEvent': 'selectEvent',
    'sorry': 'sorry'
  }
}

複製代碼

則生成的 excel 表格以下

此時，將key列隱藏後（防止key值被修改）便可將此 excel 表格提供給專業的人員，作專業的翻譯了

多語言的寫入

翻譯完成後還需將 excel 表格的翻譯內容用該腳本處理成js文件，引入到項目中作多語言的展現

一、將翻譯好的文件整理成 js 文件

$ i18n-cli tojs [url] [filename]
複製代碼

• [filename] 多語言js文件，默認 translate.js, 默認當前位置，不能修改存儲地址，如xx.js
• [url] excel文件路徑，格式能夠爲".xls", ".xml",".xlsx",".xlsm"

如 excel 文件內容以下

執行結束後會在根目錄生成一個 transform.js 文件，文件內容以下

歡迎issue