2016-03-27 81 views
0

簡單的問題是,是否可以編寫一個Babel插件接收原始文件內容,並在將任何內容由Babel解析爲AST之前將已編譯的字符串返回給Babel?巴貝爾插件pre-AST編譯?

背景

我創建需要編寫一個HTML模板JS在服務器上,並在瀏覽器中的多態性作出反應的應用程序。

我用React Templates創建平行視圖文件一起反應組件文件,比如這個:

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模塊(see loader)完成的編譯。

問題是,如果我使用ReactDomServer.renderToString在服務器上進行渲染(而不是Webpack編譯),上面的impport調用顯然不會導入已編譯的模板。

是否有可能與Babpack做類似於Webpack的事情,即在它被解析爲AST之前編譯一個文件?

另一種方法是編寫一個任務,在服務器運行之前編譯模板文件,然後導入編譯後的文件。這個解決方案留下了很多難題。

回答

1

babel-plugin-webpack-loaders很可能是您在這種情況下最好的選擇。

+0

非常有趣。我會給反應模板加載器一個鏡頭,並接受答案,如果我得到它的工作。 –

+0

看起來像這個現在是有限的幾個插件。我很好奇,看看我們是否能爲一般情況下工作。這是我創建的問題:https://github.com/istarkov/babel-plugin-webpack-loaders/issues/62 –