迁移到 preactjs

Question

我有一个通用的 React 应用程序，其中服务器端内置于 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';

不必更改所有使用 React 的代码，您可以使用preact-compat和react并react-dom为和to 设置别名preact-compat，正如您在babel-plugin-module-resolverwebpack 中所做的那样。有了它，您可以在代码中使用react和 并react-dom为您preact-compat完成其余的工作。

为了让它工作，你必须["transform-react-jsx", { "pragma":"h" }]从你的 babel 配置中删除。