Javascript 如何从HTML或JSX中提取所有字符串常量？

编辑：我最终自己制作了一个名为：D的babel插件CLI工具

---

我正在尝试将现有的react应用程序从英语翻译成另一种语言。JSX中的所有字符串常量都是硬编码的。有没有一种简单的方法可以提取所有字符串常量并将它们转储到

.json

文件中

下面是我正在尝试做的一个例子

// Original js file
class Component1 extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      // ...
    }
  }

  render(){
    return(
      <div>
        Some Text
        <p>
          Some more text
          <a href="/some/route">
            Some link
          </a>
        </p>
      </div>
    )
  }
}

新组件

// After the strings are extracted
import STRINGS from strings.json

class Component1 extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      // ...
    }
  }

  render(){
    return(
      <div>
        {STRINGS[this.props.language].TEXT1}
        <p>
          {STRINGS[this.props.language].TEXT2}
          <a href="/some/route">
            {STRINGS[this.props.language].TEXT3}
          </a>
        </p>
      </div>
    )
  }
}

//提取字符串后
从STRINGS.json导入字符串
类Component1扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
// ...
}
}
render（）{
返回(
{STRINGS[this.props.language].TEXT1}

{STRINGS[this.props.language].TEXT2}

)
}
}

您需要使用javascript抽象语法树解析器。一个流行的是，另一个是。如果您使用的是acorn，那么您需要

acornjsx

插件

下面是一个示例，它给出了您想要的JSON文件（尽管它对每个函数都这样做。如果您想更具体一些，可以将其范围扩展到渲染函数）：

返回：

{
  "ENGLISH": {
    "TEXT1": "Some Text",
    "TEXT2": "Some more text",
    "TEXT3": "Some link",
    "TEXT4": "",
    "TEXT5": ""
  }
}

---

创建一个新的javascript文件更为复杂，但它需要在AST周围添加逻辑，然后从中重新生成javascript文件。（一旦您选择了要使用的工具，可能就值得问一个单独的问题）

如果没有现成的库来执行此操作。也许我应该做一个：）一年后，我面临着同样的问题。所以，我最终制作了自己的巴别塔插件：D

const fs = require('fs');
const acorn = require('acorn-jsx-walk');
const walk = acorn.default;
const { MethodDefinition, Literal } = acorn.base;

const file = fs.readFileSync('./file.js', 'utf8');

const strings = [];

walk(file, {
  Literal({ value }) {
    strings.push(value.trim());
  }
});

const ENGLISH = strings.reduce((acc, item, i) => {
  acc[`TEXT${i+1}`] = item;
  return acc;
}, {});

console.log(JSON.stringify({ ENGLISH }, null, 2));

{
  "ENGLISH": {
    "TEXT1": "Some Text",
    "TEXT2": "Some more text",
    "TEXT3": "Some link",
    "TEXT4": "",
    "TEXT5": ""
  }
}