【发布时间】: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 之前对其进行编译?
另一种方法是编写一个任务,在服务器运行之前编译模板文件,然后导入编译的文件。这个解决方案留下了很多麻烦。
【问题讨论】:
标签: webpack babeljs react-templates