Question

我有一个使用Webpack 3作为捆绑程序的Vue应用程序。该应用程序包含自定义翻译标记（{% trans %}...{% endtrans %}作为以前的Jinja2样式的模板），这些捆绑在一起（使用replace-string-loader）转换为$(...)，vuex-i18n要求。

是否有一种方法可以将所有$t()字符串作为捆绑的一部分提取到文件中，以便可以翻译该文件？由于replace-string-loader需要首先处理文件，因此我希望此翻译提取器集成在webpack.conf文件中（作为module.rules数组的一部分）吗？

有什么可以做的工作了吗？或者有人可以提供一些有关如何编写这样的“加载程序”的帮助吗？

Answer 1

如果$t()是函数的调用，则您可以编写一个Webpack插件，该插件将钩住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的作用。

Webpack捆绑期间从源文件中提取字符串

1 个答案: