2017-02-16 188 views
2

我有一個通用的反應應用程序,其中服務器端建在babel和客戶端軟件包內置在webpack。我已閱讀preact-compact文檔和它表明在.babelrc添加此使用babel建設:遷移到preactjs

{ 
    "plugins": [ 
    [ 
     "transform-react-jsx", 
     { 
     "pragma": "h" 
     } 
    ], 
    [ 
     "module-resolver", 
     { 
     "root": [ 
      "." 
     ], 
     "alias": { 
      "react": "preact-compat", 
      "react-dom": "preact-compat" 
     } 
     } 
    ] 
    ], 
    "presets": [ 
    "react" 
    ] 
} 

而對於webpack

{ 
    "resolve": { 
    "alias": { 
     "react": "preact-compat", 
     "react-dom": "preact-compat" 
    } 
    } 
} 

但是建立後,我得到一個錯誤

如何遷移到preact以獲得通用反應應用程序

回答

4

但建成後我得到一個錯誤「H沒有定義」

您添加transform-react-jsx插件您通天配置。

["transform-react-jsx", { "pragma":"h" }] 

這告訴巴貝爾如何transpile您的JSX代碼。爲了達到這個目的,函數h需要位於範圍內,這意味着您需要將其導入到每個使用JSX的文件中。

import { h } from 'preact'; 

而不必改變所有的代碼,使用反應過來,就可以使用preact-compat和別名都reactreact-dompreact-compat,因爲你做了正確的,無論是與babel-plugin-module-resolver或的WebPack。有了這個,你可以在你的代碼中使用reactreact-dompreact-compat爲你完成剩下的工作。

爲了使其工作,您必須從您的babel配置中刪除["transform-react-jsx", { "pragma":"h" }]

+0

在webpack config中添加別名僅解決客戶端捆綁問題。但是因爲它是一個通用應用程序,所以服務器端渲染代碼以及使用babel捆綁在一起如何解決這個問題 – guru107

+1

好吧,現在我明白了爲什麼你爲babel添加了'module-resolver'插件。你做的正確,你只需要移除'[「transform-react-jsx」,{「pragma」:「h」}]'和'preact-compat'將和webpack一樣。 –

+0

是的@MichaelJungo是對的。 「pragma」:「h」是針對那些直接使用preact的人,而不是通過preact-compat。 –