記一次翻譯站經歷

weixin_33807284發表於2019-01-17

做這個記錄之前，剛完成使用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系統下預設都有包含的：

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怎樣實現？

首先安裝下面兩個包：

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())

總結

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

相關文章