如何将 create-react-app 转换为 Preact？

Posted 2023-02-16

【中文标题】如何将 create-react-app 转换为 Preact？

【英文标题】：How to convert create-react-app to Preact?

【发布时间】：2020-01-25 20:37:34

【问题描述】：

根据 Preact 文档，要将 React 应用程序转换为 Preact，您必须为 webpack 起别名：

  "resolve": 
    "alias": 
      "react": "preact-compat",
      "react-dom": "preact-compat"
    
  

create-react-app 将 webpack 隐藏在 react-scripts 依赖项下，你怎么能做到这一点？

谢谢！

【问题讨论】：

我猜你必须在这个配置进入 webpack 时弹出。如果您刚开始，他们建议您使用preact-cli 来启动项目

@Rikin 谢谢！我认为弹出不是一种选择，因为这会将所有内容都带入我的项目并使其不可升级。但是 preact-cli 是一个有趣的选项，希望它能通过 preact-compact 支持 react 组件。

【参考方案1】：

Preact CLI 允许您在没有任何模块捆绑器的情况下创建 preact 应用程序。这是为 Preact 应用创建启动器的推荐工具。

npx preact-cli create default my-project
# Go into the generated project folder
cd my-project
# Start a development server
npm run dev

注意使用 Preact 8.x 的模板。最新版本（截至 21 年 7 月 25 日）是 Preact X（Preact 版本 10.x）。默认模板使用 Preact X。

如果您想使用 create-react-app 制作 Preact 应用，您可以使用此解决方法（记录在 here）：

npx create-react-app my-app --scripts-version @just-boris/preact-scripts
cd my-app
# The dependencies used by `create-react-app` are still pointing to
# react, so under root application folder it's required to run:
npm uninstall react react-dom
npm install preact
# `preact-compact` is bundled with `preact` under `preact/compact` in 
# Preact X, but if you are using an older version run this:
# npm install preact-compact

这也可以用纱线来完成。

Preact official docs Section on how to upgrade from Preact 8.x to Preact X

根据我的经验，使用第二种方法创建的应用程序可以无缝启动。但是，我没有尝试导入任何复杂/高级的 React 组件。 我在将此类组件移植到使用 preact-cli 创建的 Preact 应用程序时遇到问题。如果需要，我会再试一次并提供更多详细信息。

【讨论】：

我认为使用@just-boris/preact-scripts的解决方案有点矫枉过正并且有一定的缺点（例如，基本上维护一个单独的create-react-app）。

【参考方案2】：

我认为最优雅的解决方案是使用customize-cra。这样您就可以避免弹出或维护create-react-app 的单独分支。

首先需要安装customize-cra:

yarn add customize-cra react-app-rewired --D

然后，转到 package.json，将您的 scripts 更改为以下内容（此步骤很关键，但在 customize-cra 的文档中没有明确提及）：

  "scripts": 
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  ,

转到项目的根目录，创建一个名为 config-overrides.js 的文件，其内容如下（假设您使用的是 Preact X）：

const  override, addWebpackAlias  = require('customize-cra');

module.exports = override(
  addWebpackAlias(
    'react': 'preact/compat',
    'react-dom': 'preact/compat'
  )
);

运行yarn start...然后瞧！

【讨论】：

我用craco 覆盖了CRA，它可以工作，谢谢！！

公平警告，custom-cra 在撰写此评论时的最后一次更新是 7 个月前，并且 react-scripts 4.0.0 已经发布了很长一段时间，这打破了这个解决方案。