如何在 CRA 项目中使用 Preact Signals

Question

我有一个 Create React App 项目，我正在尝试按照此

docs

使用 useSignal，但信号的值未渲染。 （就像

x.value

不渲染）。

我已经跑了：

npm i @preact/signals-react
npm i --save-dev @ preact/signals-react-transform

并在根目录中添加了一个

babel.config.js

文件：

module.exports = {
plugins: [["module:@preact/signals-react-transform"]],
}

我的App.js文件：

import { useSignal } from '@preact/signals-react'

function App() {
    const ob = useSignal({ x: 0 })

    return (
        <button
            onClick={() => {
                ob.value = { x: ob.value.x + 1 }
                console.log(ob.value)
            }}
        >
            Value: {ob.value.x}
        </button>
    )
}

export default App

Answer 1

CRA 不允许在不弹出的情况下自定义 Babel 配置。您可能更愿意使用react-app-rewired。

---

详细步骤如下：

安装

react-app-rewired

作为开发依赖项以及

customize-cra

和所需的 babel 插件 (

@preact/signals-react-transform

):

npm i react-app-rewired customize-cra @preact/signals-react-transform -D

将

react-scripts

 中脚本中的 

react-app-rewired

 替换为 

package.json

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

创建

config-overrides.js

文件：

const { addBabelPlugins, override } = require('customize-cra')
module.exports = override(...addBabelPlugins('module:@preact/signals-react-transform'))

使用

npm start

运行您的应用程序。 🥳