Babel Plugin pre-AST 编译？

Posted 2023-02-16

【中文标题】Babel Plugin pre-AST 编译？

【英文标题】：Babel Plugin pre-AST compiling?

【发布时间】：2016-07-15 05:20:12

【问题描述】：

简单的问题，是否可以编写一个 Babel 插件，在 Babel 将任何内容解析为 AST 之前，接收原始文件内容并将编译后的字符串返回给 Babel？

背景

我正在创建一个多态 React 应用程序，它需要在服务器和浏览器中将 html 模板编译为 JS。

我使用React Templates 在 react 组件文件旁边创建并行视图文件，例如：

components/layout/layout.component.js
components/layout/layout.template.html

这对我很有用，因为我经常需要让设计人员访问组件模板。然后在我的组件文件中：

import template from './layout.template.html';

class Layout extends React.Component 
  // code
  render()
    return template.call(this);
  

这在客户端工作得很好，因为我用 webpack 编译。现有的 Webpack 加载器将获取 html 内容并使用 React 模板转换为 javascript。但是，使用 webpack，您可以直接访问文件内容，因此您可以搭载 React 模板模块 (see loader) 完成的编译。

问题是，如果我使用ReactDomServer.renderToString在服务器上渲染（不是Webpack编译的），上面的import调用显然不会导入编译好的模板。

是否可以用 Babel 做一些类似于 Webpack 的事情，即在将文件解析为 AST 之前对其进行编译？

另一种方法是编写一个任务，在服务器运行之前编译模板文件，然后导入编译的文件。这个解决方案留下了很多麻烦。

【参考方案1】：

babel-plugin-webpack-loaders 在这种情况下可能是你最好的选择。

【讨论】：

非常有趣。我会用反应模板加载器试一试，如果我让它工作，我会接受答案。

似乎现在仅限于几个插件。我很想知道我们是否可以使它适用于一般情况。这是我创建的问题：github.com/istarkov/babel-plugin-webpack-loaders/issues/62