如何使用 webpack/babel 预解析 JS 模板字符串？答案

【问题标题】：How to use webpack/babel to preparse JS template strings?如何使用 webpack/babel 预解析 JS 模板字符串？
【发布时间】：2017-06-28 15:44:43
【问题描述】：

比如说，我想创建一个rot13 模板标签。你可以这样使用它：

 let secret = rot13`This is a secret.`;

现在我可以在 JavaScript 中实现这个标签，但我想预先解析它，以便我编译的包实际上包含：

 let secret = "Guvf vf n frperg.";

我该怎么做？我是否必须创建一个 Babel 插件才能连接到他们的解析器？那会是什么样子？

现在，如果我希望 Webpack 也输出一个名为 rotated_strings.txt 的文件，其中包含所有这些已转换字符串的列表，该怎么办？我如何收集它们？即，我如何让 Babel 和 Webpack 进行通信，以便 Babel 可以进行内联转换，但以某种方式通知 Webpack 生成这个额外的文件？

【问题讨论】：

我不认为 babel 能够为你执行rot13，它的目的是从一件事转换到另一件事。看看指数转换器插件，它会将x ** y 转换为Math.pow(x, y)，它实际上并没有预编译：github.com/babel/babel/tree/master/packages/…
@Xotic750 我知道这是可能的，无论是哪种方式。 Apollo 和 Relay 为 gql 执行此操作，我认为有一对为 css 等执行此操作。 Babel 可以转换模板标签，我只是想在一个非常具体的标签周围放一些特殊的逻辑。
不是很健壮，但这是证明可以做到的起点...astexplorer.net/#/gist/89a6bdce0165d2661385828d9d85a7e0/…
实际上你显然想用一个字符串节点替换整个文字，但我不太了解 Babel，我有火车可以赶上：p 希望你/其他人能得到剩下的路。
@mpen 你不需要想太多。您需要将该插件包含在您在 .js 文件中使用的 Babel (.babelrc) 中。我猜你的所有 js 上都有一个 eslint 和 Babel 加载器

标签： javascript webpack babeljs

【解决方案1】：

试试下面的。
https://astexplorer.net/#/gist/89a6bdce0165d2661385828d9d85a7e0/4d745f3e8b5bfd25ba919cff567f27055d9e3a75

我已经建立在 Joe Clay 在 cmets 中创建的内容的基础上。
目前，此控制台会在最后记录所有已更改的内容
在 cmets 中，我已经写了你可以在你将它移动到在你的项目构建环境中使用后替换它的内容（假设它是 Node）

PS：我已经使用 cmets 中的同步 API 快速演示了它，您可能应该切换到 Async API

更新：当你在 Babel 插件中写这个时，一定要不要设置准熟属性，而是使用path.replaceWith(t.stringLiteral(cooked))

【讨论】：

这很好，但我仍然想挂接到 Webpack API 并 emit 额外的文件。
这个line 明确告诉我它不起作用。他们仅使用源字符串和选项调用babel-core。所以它没有执行此操作的 webpack 上下文！
你需要编写一个加载器，自己需要babel-core 并使用你的插件运行 Babel.transform。然后你就有了转换后的代码，还可以访问 webpack 的上下文。
如果您可以创建一个所有这些都存在的小型设置。我会尽力告诉你我在说什么。
我想我明白了。感谢您的提示。假期回来后我会回到这个:-)