使用node写一个快捷开发中英文切换的小工具...

lyphard
1,631 阅读2分钟

背景

公司n年前的项目突然市场部需要新加一个国际化功能要实现中英文切换功能，项目是用vue+ elementUi开发里面有大量的文字，基本就是无脑即繁琐的需求，准备开发一个简易的插件来直接全局替换。

思路

在vue中安装vue-i18n 使用node读取.vue和.js结尾的文件，使用正则过滤所有的文字，然后使用随机字符替换(开始想用拼音，后面感觉转起来太麻烦)，把随机字符和字符指定的文字生成对象，写到一个js里用作后面切换用，接一个有道的插件可以直接把中文转成英文输出到另外的js中(考虑到直译影响翻译的效果，最后还是交给商务翻译了)。

思路很简单，开始写代码

第一步： 准备工作
  1. 安装vue-i18n，npm || yarn
  2. 创建新建文件夹language，在文件夹language下新建文件zh.js、en.js
  3. 在main.js下引入及挂载vue-i18n，引入js文件... . . .
第二步 读取文件

新建node.js文件，并放到根目录下

var fs = require('fs');
var path = require('path');

//解析需要遍历的文件夹，看文件目录结构
var filePath = path.resolve('./src');
let fileTextList = path.resolve(__dirname, './language/zh.js')

//调用文件遍历方法
fileDisplay(filePath);
let textObj = {} //生成js对象
function fileDisplay(filePath) {
  //根据文件路径读取文件，返回文件列表
  fs.readdir(filePath, function(err, files) {
    if (err) {
      console.warn(err)
    } else {
      //遍历读取到的文件列表
      files.forEach(function(filename) {
        //获取当前文件的绝对路径
        var filedir = path.join(filePath, filename);
        //根据文件路径获取文件信息
        fs.stat(filedir, function(eror, stats) {
          if (eror) {
            console.warn('获取文件stats失败');
          } else {
            var isFile = stats.isFile(); //是文件
            var isDir = stats.isDirectory(); //是文件夹
            if (isFile) {
              //执行替换
            }
            if (isDir) {
              fileDisplay(filedir); //递归，如果是文件夹，就继续遍历该文件夹下面的文件
            }
          }
        })
      });
    }
  });
}

第三步 正则全局替换文字

 replaceText(filedir){
     if (filedir.indexOf('.vue') !== -1) {
       let fileText = fs.readFileSync(filedir, 'utf-8') //读取文件text
       //正则替换中文汉字+字符
       let data = fileText.match(/[\u4e00-\u9fa5]+[\u3002\uff1b\uff0c\uff1a\u201c\u201d\uff08\uff09\u3001\uff1f\u300a\u300b]?[\u4e00-\u9fa5]+/g)
       if(data){
          data.map(item => {
            //生成随机字符串
            let randomStr = randomString(10)
               fileText = fileText.replace(new RegExp(item, 'g'), '{{$t("' + randomStr + ')}}')
               textObj[randomStr] = item
             })
             fs.writeFile(filedir, fileText, { encoding: 'utf8' }, err => {})
          }
    }
 }
 
 //生成随机字符函数
 function randomString(len) {
　　len = len || 16;
　　var $chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz123456789';
　　var maxPos = $chars.length;
　　var str = '';
　　for (i = 0; i < len; i++) {
　　　　str += $chars.charAt(Math.floor(Math.random() * maxPos));
　　}
　　return str;
}
第四步 把生成json输出

注意因为是递归执行的，所以偷了个懒用定时器直接写了

/ setTimeout(() => {
//   fs.writeFile(fileTextList, JSON.stringify(textObj), {
//     encoding: 'utf8'
//   }, err => {})
// }, 30000)
结尾

只是很简单的读取文件，正则替换，但是写的时候还是有很多问题，包括表单绑定，js模板等正则匹配还是差点意思，本来想上传到npm的，考虑到使用的局限性也就没有传，隔了很久有空才写的文章，共勉。

avatar
文章
阅读
粉丝