自动创建VSCode扩展的i18n目录

Jarrett Spiker 发表于 Dev

贾勒特·斯派克

我试图了解https://github.com/microsoft/vscode-extension-samples/tree/master/i18n-sample中提供的用于本地化Visual Studio Code扩展的工作流。

我无法弄清楚如何从i18n目录开始创建目录，以及该目录中的字符串键集如何随着时间的推移而得到维护。

README.md中有一行显示“您可以手动创建此文件夹，或者您可以使用vscode-nls-dev工具来提取它。” ...如何使用vscode-nls-dev工具提取出来吗？

我所了解的

我了解您可以使用vscode-nls和包装如下字符串：localize("some.key", "My String")在运行时获取该字符串的本地化版本。

我很确定我知道vscode-nls-dev在构建时使用它来将i18n目录中文件的内容替换为已转译的JavaScript代码，以及创建类似out/extension.nls.ja.json

什么东西少了

当然，这是不期望的：对于file.ts项目中的每个文件，都i18n/lang/out/file.i18n.json为您支持的每个lang创建一个...，然后随着每个字符串的更改，手动保持该文件中的键集为最新。

我假设有一些过程会自动进行：“ localize("key", "String")file.ts中是否存在对file.i18n.json中尚未存在的新密钥的调用？如果是，请添加具有一些未转换值的那些密钥”。那是什么过程？

贾勒特·斯派克

我已经解决了这个问题，参考https://github.com/Microsoft/vscode-extension-samples/issues/74

如果您将Transifex用于翻译器，则可以正常工作。最起码，您需要使用.xlf文件作为翻译文件格式。

我认为最好用一个示例来说明，所以可以说您想在删除i18n文件夹后使示例项目正常工作

步骤1：克隆该项目，然后删除i18n目录
步骤2：修改gulp文件，以便该compile函数还在out目录中生成nls元数据文件。就像是：


    function compile(buildNls) {
        var r = tsProject.src()
        .pipe(sourcemaps.init())
            .pipe(tsProject()).js
            .pipe(buildNls ? nls.rewriteLocalizeCalls() : es.through())
            .pipe(buildNls ? nls.createAdditionalLanguageFiles(languages, 'i18n', 'out') : es.through())
            .pipe(buildNls ? nls.bundleMetaDataFiles('ms-vscode.node-debug2', 'out') : es.through())
            .pipe(buildNls ? nls.bundleLanguageFiles() : es.through())

步骤3：运行gulp build命令。这将在out/目录中生成几个必要的元数据文件
步骤4：创建并运行一个新的gulp函数，将必要的翻译内容导出到xlf文件。就像是：


    gulp.task('export-i18n', function() {
        return gulp.src(['package.nls.json', 'out/nls.metadata.header.json', 'out/nls.metadata.json'])
            .pipe(nls.createXlfFiles("vscode-extensions", "node-js-debug2"))
            .pipe(gulp.dest(path.join('vscode-translations-export')));
    }

步骤5：获取生成的xlf文件。或者，添加一些虚拟值。我找不到/是否有所需文件格式的文档，但这对我有用（对于扩展名）：


    <?xml version="1.0" encoding="utf-8"?>
    <xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
      <file original="package" source-language="en" target-language="ja" datatype="plaintext"><body>
        <trans-unit id="extension.sayHello.title">
          <source xml:lang="en">Hello</source>
          <target>JA_Hello</target>
        </trans-unit>
        <trans-unit id="extension.sayBye.title">
          <source xml:lang="en">Bye</source>
          <target>JA_Bye</target>
        </trans-unit>
      </body></file>
      <file original="out/extension" source-language="en" target-language="ja" datatype="plaintext"><body>
        <trans-unit id="sayHello.text">
          <source xml:lang="en">Hello</source>
          <target>JA_Hello</target>
        </trans-unit>
      </body></file>
      <file original="out/command/sayBye" source-language="en" target-language="ja" datatype="plaintext"><body>
        <trans-unit id="sayBye.text">
          <source xml:lang="en">Bye</source>
          <target>JA_Bye</target>
        </trans-unit>>
      </body></file>
    </xliff>

第6步：假设将该文件放在某个已知位置/path/to/translation.xlf。然后添加/运行另一个新的任务，以导入翻译。就像是：


    gulp.task('i18n-import', () => {
        return es.merge(languages.map(language => {
            console.log(language.folderName)
            return gulp.src(["/path/to/translation.xlf"])
                .pipe(nls.prepareJsonFiles())
                .pipe(gulp.dest(path.join('./i18n', language.folderName)));
        }));
    });