reactjs - 迁移到 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 以获得通用 React 应用

Answer 1

But after building i get an error "h is not defined"

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

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

这告诉 babel 如何转译你的 JSX 代码。为此，函数 h 需要在作用域内，这意味着您需要将它导入到使用 JSX 的每个文件中。

import { h } from 'preact';

您可以使用 preact-compat 并为 react 和 react-dom 指定别名，而不必更改所有使用 React 的代码到 preact-compat，就像你正确地使用 babel-plugin-module-resolver 或 webpack 一样。这样，您就可以在代码中使用 react 和 react-dom，而 preact-compat 会为您完成剩下的工作。

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