如何将创建-反应-应用程序转换为Preact？

Question

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

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

你怎么能用create-react-app做到这一点，因为这就隐藏了webpack对“反应脚本”的依赖？

谢谢!

Answer 1

还有预演CLI，它允许您创建预动作应用程序，而不需要任何模块绑定器。它是为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的模板。最新版本(截至7/25/21)是Preact X (Preact version 10.x)。默认模板使用Preact X。

如果您想使用create-react-app来制作Preact应用程序，您可以使用这个解决方法(有文档的这里)：

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 8.x升级到Preact X的一节

根据我的经验，用第二种方法创建的应用程序可以无缝地启动。但是，我没有尝试导入任何复杂/高级的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"
    }
  }
}

注意:添加react**，preact**!**后，不要卸载 ** @types/react**，或** @types/react-dom

react仍然是react-scripts运行craco start和朋友所必需的。

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

注:捆绑分析器可能还会报告说你用的是React!

确保再次检查您的输出目录的实际构建大小。