迁移到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"
    }
  }
}

但在构建之后我收到错误h is not defined

如何迁移到preact以获得通用反应应用

Answer 1

  

但是在构建之后我得到一个错误“h未定义”

您已将transform-react-jsx插件添加到您的babel配置中。

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

这告诉babel如何转换你的JSX代码。要使其工作，函数h必须在范围内，这意味着您需要在使用JSX的每个文件中导入它。

import { h } from 'preact';

您可以使用preact-compat并将react和react-dom别名替换为preact-compat，而不是必须更改使用React的所有代码，正如您所做的那样，要么使用babel-plugin-module-resolver或使用webpack。有了它，您可以在代码中使用react和react-dom，preact-compat为您完成剩下的工作。

为了使其正常工作，您必须从babel配置中删除["transform-react-jsx", { "pragma":"h" }]。