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

Question

我有一个Vue应用程序，它使用Webpack 3作为bundler。该应用程序包含自定义翻译标签({% trans %}...{% endtrans %}作为Jinja2风格的模板(，这些标签作为绑定的一部分(使用替换字符串加载器(转换为$(...)，而vuex-i18n需要绑定。

是否有一种方法可以提取所有$t()字符串作为绑定到文件中的一部分，以便可以翻译该文件？由于替换字符串加载程序需要首先处理文件，我希望这个翻译提取器集成在webpack.conf文件中(作为module.rules数组的一部分(？有没有什么东西可以完成这项工作，或者有人能提供一些关于如何编写这样一个"加载器"的帮助？

Answer 1

如果$t()是一个函数的调用，你可以编写一个webpack插件，它将挂接解析器并跟踪所有调用，然后使用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的源代码作为参考，在这里阅读它的作用。