返回

大型项目文本提取:高效自动化方法详解

vue.js

从大型项目中提取文本

在软件开发中,项目经常需要支持多种语言。实现多语言支持的关键一步就是从现有代码中提取可翻译的文本。此过程并非小事,尤其是在面对大型、复杂的项目时。手动查找所有文本字符串耗时且容易出错,更明智的方法是采用自动化的解决方案。以下列举几种有效的策略,以帮助你从代码库中提取文本内容。

方案一:使用文本查找工具

最简单直接的方法是利用文本查找工具。大多数现代代码编辑器都具备强大的搜索功能,可以查找指定模式的字符串。

  • 步骤:

    1. 打开项目,确保已安装你选择的代码编辑器(如VS Code,Sublime Text)。
    2. 使用编辑器的全局搜索功能 (例如在VS Code 中使用Ctrl+Shift+FCmd+Shift+F)。
    3. 输入正则表达式 /[">']([^<>{}*&]*)[<'"\{]/g 作为搜索模式, 这个模式将尝试匹配 >", ' 后跟随不是<>{}\*&的内容。 并且以< , > , { or " ‘ 结尾的内容,从而找到HTML文本或者属性里的文本字符串
    4. 设置匹配文件类型:通常,你需要搜索 .vue, .html, 或.js 等文件。 根据你的实际情况进行设置。
    5. 查看结果,筛选出真正需要提取的文本。这个过程可能需要一些手动确认,以过滤掉不相关的结果。
  • 代码示例(VS Code) : 无需直接编写代码,但需要在全局搜索中使用相应的正则搜索式

     /[">']([^<>{}*&]*)[<'"\{]/g
    
  • 解释: 这种方法利用文本搜索工具,能快速定位项目中可能存在的静态文本,但对复杂的字符串(例如含有变量的句子)可能效果不佳,需要人工辅助进行进一步提取和整理。它是一种高效的初始查找方式。

方案二:基于 AST 的静态代码分析

另一种方法是通过抽象语法树 (AST) 分析代码。 AST 代表了代码的结构化版本,这能让你深入到代码的逻辑中,更准确地找到文本字符串。一些代码分析工具 (比如 ESLint 的自定义规则) 或者专用解析器(例如针对 Vue.js 的解析器)可以用来进行此类分析。

  • 步骤 :

    1. 确定你项目所使用的技术栈并寻找相应的 AST 解析器,比如Vue.js 你可以使用vue-template-compiler来解析template标签里的内容。
    2. 编写脚本,使用该解析器遍历项目代码,并提取出静态字符串。这通常需要一定量的编程能力,并且你需要了解 AST 的基本知识。
    3. 将提取出的文本存储到特定格式的文件或数据库中。
    4. 如果使用eslint , 你需要使用 AST 并且创建一个自定义的eslint rule.
  • 代码示例 (Node.js 与 vue-template-compiler)

    const compiler = require('vue-template-compiler');
    const fs = require('fs');
    const path = require('path');


    function extractStrings(template) {
        let strings = [];
        const ast = compiler.compile(template, {outputSourceRange:true}).ast
         if (ast) {
                function traverse(node) {
                    if (node.type === 2) { // 文本节点类型
                        strings.push(node.text);
                     } else if(node.children) {
                        node.children.forEach(child=>traverse(child));
                     }
                   
                }
                  traverse(ast)
            }


           
      return strings
    }

   function processFile(filePath){
    const fileContent = fs.readFileSync(filePath,'utf-8');
    let template=fileContent.match(/<template>(.*)<\/template>/s)?.[1]
    if(!template){
     return []
    }

     return  extractStrings(template)
   }

     function findTextInVueFiles(directory) {
       let allStrings=[];

         fs.readdirSync(directory).forEach(file=>{
         const filePath = path.join(directory,file);

         if(fs.statSync(filePath).isDirectory()){
            findTextInVueFiles(filePath)
        }else if (path.extname(filePath)==='.vue'){
             const extractedString=processFile(filePath)
              allStrings= [...allStrings, ...extractedString];
         }

     })

        return allStrings
}



  // 使用
    const directory= path.resolve('./your_vue_project');
   const  allStrings=findTextInVueFiles(directory)

    console.log(allStrings);

注意: 以上代码是用于遍历vue项目所有vue文件, 获取 template中的文本的。 在实际中,你需要进行代码适配,比如解析js字符串等等

  • 解释 : 这种方法优势在于能更精确地识别文本,并能够处理带有复杂语法结构的内容(如带有表达式的字符串)。 但是,你需要有一定的编程能力才能使用这种方法。它适合大型复杂项目。这种方案可作为第一方案的补充。

方案三:使用专业代码国际化工具

市面上也有专门用于国际化 (i18n) 的工具和库。这些工具可以分析代码并自动提取文本,并将它们放入单独的翻译文件中。使用它们,可以省去编写脚本的麻烦。这些工具通常能整合到 CI/CD 工作流程中,实现翻译过程的自动化。例如i18next,vue-i18n等。

  • 步骤:

    1. 选择合适的 i18n 工具或库(如i18next、vue-i18n)。
    2. 配置该工具,使其可以分析项目代码并提取文本字符串。
    3. 整合到项目中。
  • 代码示例(Vue-i18n示例配置)
    首先,需要安装vue-i18n:

    npm install vue-i18n
    
  • 创建一个i18n配置文件,例如i18n.js :

   import Vue from 'vue';
   import VueI18n from 'vue-i18n';

  Vue.use(VueI18n);

    const messages = {
        en: {
          message: {
            hello: 'hello world',
            helloUser: 'hello {user}',
           product:'product {productName}'
          },

       },
     zh:{
            message:{
               hello:'你好世界',
                helloUser:'你好 {user}',
                product:'商品 {productName}'
            }
       }
   }

    const i18n = new VueI18n({
      locale: 'en', // set locale
      messages,
  });

 export default i18n
  • 使用例子:
<template>
<div>
  {{$t("message.hello")}}
    <p> {{$t('message.helloUser', { user: userName }) }} </p>
      <p> {{$t('message.product', { productName: 'apple' }) }} </p>
</div>

</template>
<script>
export default {
    data(){
       return {
         userName: 'bob'
      }
    }
 }

</script>
  • 在 main.js 引入:
  import i18n from './i18n';
  new Vue({
 i18n,
 render: h => h(App)
 }).$mount('#app')
  • 解释: 这种方法可以方便地提取项目所有可翻译的文本,并允许根据不同语言设置切换内容,极大的提升开发效率。

安全建议: 在进行自动化文本提取时,请务必注意:

  • 仔细检查提取出的文本,确保所有可翻译的字符串都被找到。
  • 避免在文本字符串中硬编码任何敏感数据。
  • 对生成的翻译文件或数据库进行备份。
  • 定期审查提取流程,以确保其保持有效性和精确性。

结语: 从大型项目中提取文本需要耐心和细致。没有绝对完美的解决方案,上述方法都有各自的优点和不足。最理想的做法是根据项目的大小、复杂度和所使用的技术栈,组合运用这些技术手段,从而达到最佳效果。