最懒的前端多语言策略（二）

为了应对多语言开发，之前弄了一个脚本，根据项目文件里被标记词语（如lang[xxx]），跑一下就生成json文件，然后交付给翻译同事
最懒的前端多语言策略（一）

开发久了，发现懒得连跑脚本都不想跑了，想全自动生成，无意中看到umi文档插件部分，看到有个api

umi 事件类 API

生成逻辑在上一篇的基础上基本一样，把它放在onDevCompileDone里面就行了

export default (api, {
  entry = './src',
  output,
  increment = true,
  word = 'lang'
} = {}) => {
  api.onStart(() => {
    if (!output) {
      throw new Error('output必填')
    }
  })

  api.onDevCompileDone(() => {
    const fs = require('fs')
    const readline = require('readline')
    const path = require('path')

    const reg = /(trans\(.*\))/gi
    const dispose = /\/\//
    const obj = {}
    const separator = `${word}[` // 分隔符
    const suffix = ['.js', '.jsx'] // 后缀白名单
    let readNum = 0 // 计数还剩未读的文件数
    console.log('-----start-----')

    function readFileToObj(fReadName, value, callback) {
      var fRead = fs.createReadStream(fReadName)
      var objReadline = readline.createInterface({
        input: fRead,
      });

      objReadline.on('line', line => {
        // 注释的忽略
        if (line.includes('//') || line.includes('*')) {
          return
        }
        if (line) {
          const arr = line.split(separator)
          if (arr.length > 1) {
            const bb = arr.slice(1)
            for (let i in bb) {
              const v0 = bb[i].split(']')[0]
              const v = v0.substr(1, v0.length - 2)
              if (!v) {
                // 空输出提示
                console.warn(`空行为：${line}`)
                continue
              }
              // 增量就不覆盖了
              if (increment && value && value[v]) {
                obj[v] = value[v]
              } else {
                obj[v] = v
              }

            }
          }
        }
      })
      objReadline.on('close', () => {
        // 文件都读过了，写进生成文件
        if (--readNum === 0) {
          let result = JSON.stringify(obj, null, 2)
          fs.writeFile(output, result, err => {
            if (err) {
              console.warn(err)
            }
          })
          callback && callback()
        }
      })
    }


    const filePath = path.resolve(entry)

    // 递归执行，直到判断是文件就执行readFileToObj
    function fileDisplay(filePath, value, callback) {
      fs.readdir(filePath, (err, files) => {
        let count = 0
        function checkEnd() {
          if (++count === files.length && callback) {
            callback()
          }
        }
        if (err) {
          console.warn(err)
        } else {
          files.forEach(filename => {
            var fileDir = path.join(filePath, filename)
            fs.stat(fileDir, (err2, status) => {
              if (err2) {
                console.warn(err2)
              } else {
                if (status.isDirectory()) {
                  return fileDisplay(fileDir, value, checkEnd)
                }
                else if (status.isFile()) {
                  // 后缀不符合的跳过，并计数加一
                  if (suffix.includes(path.extname(fileDir))) {               
                    readNum++
                    readFileToObj(fileDir, value)
                  }
                }
                checkEnd()
              }
            })
          })
        }
      })
    }


    // 开始逻辑
    function run() {
      new Promise((resolve, reject) => {
        fs.exists(output, exists => {
          // 存在且增量生成
          if (exists && increment) {
            console.log('增量更新')
            fs.readFile(output, 'utf-8', (err, data) => {
              if (err) {
                console.warn(err)
              } else {
                try {
                  // 旧文件已存在的json
                  const json = JSON.parse(data)

                  resolve(json)
                } catch (e) {
                  // 翻车
                  console.warn(e)
                }
              }
            })
          } else {
            console.log('全量更新')
            resolve()
          }
        })
      }).then(value => {
        let startTime = Date.now()
        fileDisplay(filePath, value, function (value) {
          console.log('finish:', Date.now() - startTime)
        })
      })
    }
    run()

  });
};

.umirc.js
...
export default {
  plugins: [
    ['umi-plugin-gtj', {
        entry: './src',
        output: './src/lang/en.json',
        increment: true, // 是否增量
        word: 'lang', // 生成标记
    }]
  ]
...
}

效果

github
npm