遷移到preactjs

Question

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

{ 
    "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以獲得通用反應應用程序

Answer 1

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

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

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

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

import { h } from 'preact'; 

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

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