迁移到 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';

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

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

迁移到 preactjs

Migrating to preactjs

reactjs

webpack

babeljs

preact