Babel
plugin-debug-label
Jotai 基于对象引用而不是 key(如 Recoil)。 这意味着原子没有标识符。 要识别原子,可以将 debugLabel
添加到原子,这可以在 React devtools 中找到。
但是,如果要为每个原子添加一个 debugLabel
,这很快就会变得很麻烦。
这个 babel
插件根据其标识符向每个原子添加一个 debugLabel
。
该插件转换此代码:
export const countAtom = atom(0);
进入:
export const countAtom = atom(0);countAtom.debugLabel = "countAtom";
还根据文件命名处理默认导出:
// countAtom.tsexport default atom(0);
其中转化为:
// countAtom.tsconst countAtom = atom(0);countAtom.debugLabel = "countAtom";export default countAtom;
使用
babel
配置文件:
{"plugins": ["jotai/babel/plugin-debug-label"]}
您还可以将原子名称提供给插件:
{"plugins": [["jotai/babel/plugin-debug-label", { "customAtomNames": ["customAtom"] }]]}
可以在下面找到示例。
plugin-react-refresh
这个插件增加了对 Jotai 原子的 React Refresh 的支持。 这确保在使用 React Refresh 开发时不会重置状态。
使用
babel
配置文件:
{"plugins": ["jotai/babel/plugin-react-refresh"]}
您还可以将原子名称提供给插件:
{"plugins": [["jotai/babel/plugin-react-refresh", { "customAtomNames": ["customAtom"] }]]}
可以在下面找到示例。
preset
Jotai 附带了一个 babel
,其中包含为 Jotai 创建的插件。
使用
使用 babel
配置文件:
{"presets": ["jotai/babel/preset"]}
您还可以将原子名称提供给 presets:
{"presets": [["jotai/babel/preset", { "customAtomNames": ["customAtom"] }]]}