reactjs - 迁移到preactjs

我有一个通用的 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
如何为通用React应用程序迁移到preact

最佳答案

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

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

这告诉babel如何转换您的JSX代码。为此，功能h需要在范围内，这意味着您需要将其导入使用JSX的每个文件中。

import { h } from 'preact';

无需更改所有使用React的代码，您可以使用preact-compat或webpack来使用react并将别名react-dom和preact-compat都别名为babel-plugin-module-resolver，就像您正确所做的那样。这样，您就可以在代码中使用react和react-dom，而preact-compat可以为您完成其余工作。

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

关于reactjs - 迁移到preactjs，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42276609/