Babel插件pre-AST编译?

时间:2016-03-27 23:50:51

标签: webpack babeljs react-templates

简单的问题,是否有可能编写一个接收原始文件内容的Babel插件,并在Babel解析任何这些内容到AST之前将编译后的字符串返回给Babel?

背景

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

我使用React Templates创建并行视图文件以及react组件文件,例如:

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

这对我很有用,因为我经常需要让设计师访问组件模板。然后在我的compnent文件中:

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

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

这对客户端很好,因为我用webpack编译。现有的Webpack加载器将采用html内容并使用React模板转换为Javascript。但是,使用webpack,您可以直接访问文件内容,这样您就可以捎带React Templates模块(see loader)完成的编译。

问题是,如果我在服务器上使用ReactDomServer.renderToString进行渲染(而不是Webpack编译),上面的impport调用显然不会导入已编译的模板。

是否可以使用类似于Webpack的Babel做一些事情,即在将文件解析为AST之前编译文件?

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

1 个答案:

答案 0 :(得分:1)

在这种情况下,

babel-plugin-webpack-loaders可能是你最好的选择。