迁移到预动作to

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以获得通用的react应用程序

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到preact-compat，就像正确地使用babel-plugin-module-resolver或webpack一样。这样，您就可以在代码中使用react和react-dom，而preact-compat则为您做剩下的工作。

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