記一次翻譯站經歷

做這個記錄之前，剛完成使用drone作爲公司前端項目的持續交付工具的實踐，打算寫的教程前先把官方文檔扒下來做個翻譯站。在實踐一番後，卡在不能頻密調取google翻譯這塊上，項目無法進行下去。最後覺得經歷的過程涉及的內容挺多的所以記錄一下同時分享給大家。

這次經歷涉及以下知識：

• wget抓取網站
• 使用基於python的翻譯工具
• 使用nodejs調取命令行
• 使用nodejs讀寫文件
• 爲express添加jwt
• 基於express實現上傳文件
• 在nodejs環境下讀取並編輯html文件

我們一點點來說。

wget抓取網站

最初是尋找有什麼帶可視化的工具來達到目的的，後來在尋找的過程中看到原來wget能實現整站抓取，所以怎樣簡單怎樣來！

# 抓取整站
wget -r -p -np -k -E http://www.xxx.com
# w抓取第一級
wget -l 1 -p -np -k http://www.xxx.com

• -r 遞歸抓取
• -k 抓取後修正鏈接，適合本地瀏覽
• -e robots=off 忽略robots協議，強制抓取（流氓抓取）
• -E 將text/html類型的文檔保存爲.html的文件

使用基於python的翻譯工具

這個在github上找了幾個工具，同時也考慮過使用官方提供的API（微軟和google均有提供），最後得出使用soimort/translate-shell（並不想花錢和花時間再看文檔上了>w<）

這個trans shell工具提供幾個翻譯源(google, bing, yandex, apertium)，不知道爲何能用的只有google Σ(!ﾟдﾟ)。google也很有保證了，問題不大。

安裝並不複雜，只需要安裝gawk，其他在ubuntu系統下默認都有包含的：

• GNU Awk

gawk安裝

$ sudo apt-get install gawk

嘗試：

$ gawk -f <(curl -Ls git.io/translate) -- -shell

安裝trans本體，官方文檔提供三種方式，方式1不知道爲何有bug，方式2並不太熟悉，最後選擇方式3：

$ git clone https://github.com/soimort/translate-shell
$ cd translate-shell/
$ make
$ [sudo] make install

使用起來也是簡單：

$ trans 'Saluton, Mondo!'
Saluton, Mondo!

Hello, World!

Translations of Saluton, Mondo!
[ Esperanto -> English ]
Saluton ,
    Hello,
Mondo !
    World!

簡短輸出方式：

$ trans -brief 'Saluton, Mondo!'
Hello, World!

翻譯文件：

$ trans -b en:zh -i input.txt -o output.txt

使用trans調取google translate進行翻譯不能頻頻調用，頻頻調用之後會令後續請求503，被google限制請求！！

使用nodejs調取命令行

完成翻譯的調研後，感覺本地實現翻譯需要安裝各種東西，不如做成web應用好了。用express快速建立網站應用，關於在nodejs下調用命令其實是沒啥頭緒的，搜索得出結果發現可以使用Child Process模塊實現：

const util = require('util')
const exec = util.promisify(require('child_process').exec)
exec(`trans -V`)
    .then(({stdout, stderr}) => {
        if(stdout.indexOf("not installed") > -1) return Error(stdout)
    })
    .then(()=>exec(`trans -b ${language} -i ${input} -o ${output}`))
    .then(({stdout, stderr})=>{
        return {
            input,
            output,
            message: stdout
        }
    })

使用nodejs讀寫文件

這個就不詳細說明了，簡單列一下用到的函數：

• fs.readFileSync(path)同步讀取文件
  例子：

  const data = fs.readFileSync('./test.txt')
  console.log(data.toString())
  // testing!

• fs.writeFileSync(path, data) 同步寫入文件
  例子：

  try{
    fs.writeFileSync('./test.txt', 'testing!!')
  }catch(e){
    console.error(e)
  }

• fs.unlinkSync(path) 同步刪除文件
  例子：

  try{
    fs.unlinkSync('./test.txt')
  }catch(e){
    console.error(e)
  }

爲express添加jwt

先說一下jwt，全名叫JSON Web Tokens，是一種開放的，行業標準的RFC 7519方法，用於表示兩端之間的應用安全。

RFC是由Internet Society(ISOC)贊助發行的互聯網通信協議規範，包含各種各樣的協議，同時包含互聯網新開發的協議及發展中所有的記錄。

jwt這種實現已經成爲互聯網通訊安全標準，那麼在express怎樣實現？

首先安裝下面兩個包：

• auth0/node-jsonwebtoken
• auth0/express-jwt

npm i -S express-jwt jsonwebtoken

使用：

const { router }  = require('express')
const decode_jwt = require('express-jwt')
const jwt = require('jsonwebtoken')

const secret = "your-secret" //鹽

// 登錄
router.get('/login', function(req, res, next) {
  /**+[登錄邏輯]...**/
  const token = jwt.sign(user, secret)
  res.status(200).send({ user, token })
})

//受限的接口
router.get('/user/star', decode_jwt({secret: secret}), (req, res)=>{
  const { user } = req
  const stars = []
  /**+[獲取用戶star列表]**/
  res.status(200).send(stars)
})

解釋一下，jsonwebtoken包爲加密作用， secret作爲鹽用來混淆內容（出於安全是不能對客戶端公開），然後經過express-jwt解密處理http header裏帶有的authorization: Bearer [token]中的token來獲得user信息。這樣在/user/star接口中就能獲取到用戶資料做後續的業務處理了。

基於express實現上傳文件

忘了說明這裏提及的express版本爲4，那麼在新版的express 4文檔中提及了這麼一段關於上傳文件的處理說明：

In Express 4, req.files is no longer available on the req object by default. To access uploaded files on the req.files object, use multipart-handling middleware like busboy, multer, formidable, multiparty, connect-multiparty, or pez.

意思是：express 4 版本req.files字段不在有效，需要使用上面提及的中間件提供支持才能實現讀取上傳來的文件。

看了一番文檔，最後選擇了multer。

下面講一下如何使用：

安裝

npm i -S multer

使用

const multer = require('multer')
const limits = { fieldSize: 1024*1024*3 }
const extname = 'html'
//創建本地儲存
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, './uploads');
  },
  //儲存文件時自定義文件名稱
  filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now());
  }
})
//創建上傳處理
const uploader = require('multer')({
    storage,
    limits,
    fileFilter(req, file, cb){
      if(path.extname(file.originalname) === `.${extname}`) cb(null, true)
      else cb(new Error(`upload file extname must be ${extname}`))
    }
})
/**
 * 上傳接口
 * 只接受http頭是`content-type: multipart/form-data`的數據
 * 這裏設定獲取字段是`file`的內容儲存成文件來完成文件上傳工作
 **/
router.post('/trans_on_upload', uploader.single('file'), (req, res)=>{
  const { file } = req
  const fileData = fs.readFileSync(file.path)
  console.log(fileData.toString())
  res.status(200)
})

multer接受多種文件上傳方式：

• uploader.single(fieldname) 接受一個以 fieldname 命名的文件。這個文件的信息保存在 req.file
• uploader.array(fieldname[, maxCount]) 接受一個以 fieldname 命名的文件數組。可以配置 maxCount 來限制上傳的最大數量。這些文件的信息保存在 req.files。

• uploader.fields(fields) 接受指定 fields 的混合文件。這些文件的信息保存在 req.files。fields 應該是一個對象數組，應該具有 name 和可選的 maxCount 屬性。
  例子：

  [
    { name: 'avatar', maxCount: 1 },
    { name: 'gallery', maxCount: 8 }
  ]

• uploader.none() 只接受文本域。如果任何文件上傳到這個模式，將發生 "LIMIT_UNEXPECTED_FILE" 錯誤。這和 upload.fields([]) 的效果一樣。
• uploader.any() 接受一切上傳的文件。文件數組將保存在 req.files。
  警告: 確保你總是處理了用戶的文件上傳。 永遠不要將 multer 作爲全局中間件使用，因爲惡意用戶可以上傳文件到一個你沒有預料到的路由，應該只在你需要處理上傳文件的路由上使用。

multer使用起來有一定限制，並不是所有項目合適使用，所以不做深入說明。

在nodejs環境下讀取並編輯html文件

這裏處理的流程是使用fs.readFileSync(path)讀取html文件內容後，希望能以dom方式編輯內容，使用jsdom/jsdom能像在瀏覽器一樣的方式處理DOM，是非常好用的工具。

比如我的需求是獲取所有TextNode提取內容進行翻譯並替換原來內容，最後導出html內容：

const { JSDOM } = require("jsdom")
const { minify } = require("html-minifier")

//遞歸獲得所有TextNode
const getAllTextNode = (node)=>{
  var all = [];
  for (node=node.firstChild;node;node=node.nextSibling){
    const { parentNode } = node
    if (node.nodeType==3){
      all.push(node)
    }
    else all = all.concat(getAllTextNode(node));
  }
  return all;
}

const html = ""
/**+[獲取html內容]**/
const vbrows = new JSDOM(minify(html, {
  collapseWhitespace: true
}))
const { document } = vbrows.window
const textNodes = getAllTextNode(document.body)
textNodes.forEach(textNodes=>{
  const transStr = textNodes.textContent
  /**翻譯處理**/
  textNodes.textContent = transStr
})
//翻譯結果
console.log('trans result', vbrows.serialize())

總結

完成一個應用涉及的範圍其實挺廣的，內容如果再深入討論應該能寫更多內容吧。由於手上還有其他工作，只能大致記錄關鍵詞和使用的方式，原理方向等有時間再深入研究。