5

我有一个通用的反应应用程序,其中服务器端内置在 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 应用程序

4

1 回答 1

5

但是在构建之后我得到一个错误“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或使用 webpack 所做的那样。有了它,您可以在您的代码中使用and并为您完成其余的工作。preact-compatbabel-plugin-module-resolverreactreact-dompreact-compat

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

于 2017-02-16T15:16:19.343 回答