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

Question

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

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

你怎么能用 create-react-app 做到这一点，因为它隐藏了 webpack 在 react-scripts 依赖下？

谢谢！

Answer 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 的模板。最新版本（截至 2021 年 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

这也可以用纱线来完成。

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

Answer 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...瞧！

Answer 3

或者，您可以使用 craco:

// craco.config.js
module.exports = {
  webpack: {
    alias: {
      "react": "preact/compat",
      "react-dom": "preact/compat"
    }
  }
}

注意：添加preact![=20=后不要卸载react、@types/react或@types/react-dom ]

react 仍然需要 react-scripts 到运行 craco start 和朋友。

@types/* 仍然需要您 IDE 的类型建议。

注意：捆绑包分析器 may still report that you're using React!

确保 double-check 您的输出目录以获得实际构建大小。

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

How to convert create-react-app to Preact?

reactjs

webpack

create-react-app

preact