代码之家 › 专栏 › 技术社区 › orange

在webpack绑定期间从源文件中提取字符串

translation webpack vue.js

0

orange · 技术社区 · 7 年前

我有一个Vue应用程序,它使用webpack3作为绑定器。应用程序包含自定义翻译标记( {% trans %}...{% endtrans %} 因为以前的模板是Jinja2样式),所以转换为 $(...) 作为捆绑(使用replace string loader)的一部分 vuex-i18n 要求。

有没有办法提取所有 $t() 字符串作为捆绑文件的一部分,以便可以翻译此文件?因为replace字符串加载器需要首先处理文件,所以我希望这个翻译提取器集成在 webpack.conf 文件(作为 module.rules 阵列)?有没有什么东西已经在那里做的工作,或者有人可以提供一些帮助,如何写这样一个“加载器”?

1 回复 | 直到 7 年前

1

0

felixmosh 7 年前

如果 $t() 是一个函数调用,你可以写一个网页包插件,将挂钩 the parser 跟踪所有调用,然后使用 emit hook 将收集的数据写入文件。

compiler.hooks.normalModuleFactory.tap('MyPlugin', factory => {
  factory.hooks.parser.for('javascript/auto').tap('MyPlugin', (parser, options) => {
    parser.hooks.expression.for('$t').tap("MyPlugin", expr => {
       console.log(expr);
    });
  });
});

关于从webpack插件开始的好博客文章: https://medium.com/webpack/the-contributors-guide-to-webpack-part-2-9fd5e658e08c

您可以检查的源代码 providePlugin 作为参考, read here 它的作用。