Question

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

我正在尝试将现有的反应应用从英语翻译成另一种语言。 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>
    )
  }
}

STRINGS.json

{
  "ENGLISH":{
    "TEXT1":"Some Text",
    "TEXT2":"Some more text",
    "TEXT3":"Some link"
  },
  "OTHER_LANGUAGE":{
    "TEXT1":"asfsadfasfd",
    "TEXT2":"sadfsfd",
    "TEXT3":"sdfsdfsfdfd"
  }
}

新组件

// 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>
    )
  }
}

Answer 1

您将要使用javascript抽象语法树解析器。一个受欢迎的是acorn，另一个是espree。如果您使用的是橡子，则需要acorn-jsx插件

这是一个吐出你想要的JSON文件的例子（虽然它是为每个函数做的。如果你想更具体，你可以将它扩展到渲染功能）：

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": ""
  }
}

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

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

1 个答案: