# @freshpaint/babel-plugin-annotate-react 中文文档
规范地址：https://npmcn.com/package/%40freshpaint/babel-plugin-annotate-react/
版本：2\.1\.3
npm 元数据更新时间：2026-06-02T19:46:03.799Z
中文译文更新时间：2026-11-15T13:56:50.082Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40freshpaint/babel-plugin-annotate-react
原文对照：https://npmcn.com/package/%40freshpaint/babel-plugin-annotate-react/?lang=original
项目主页：https://github.com/freshpaint-io/freshpaint-babel-plugin-annotate-react
源码仓库：https://github.com/freshpaint-io/freshpaint-babel-plugin-annotate-react
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：13.7 kB，5 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：0 个
- 首次发布：2021-03-16T19:56:54.718Z
- 最新版本发布：2021-03-16T19:56:55.085Z
- 近 30 天下载量：9650（2026-10-16 至 2026-11-14，npm 官方下载统计）
- 已发布版本数：1（近 12 个月 0 个）
## 中文简介
一个批注回放组件的 Babel 插件, 使其更容易用 Freshpaint 瞄准
## 安装
```sh
npm install @freshpaint/babel-plugin-annotate-react
```
也可以使用：`pnpm add @freshpaint/babel-plugin-annotate-react`、`yarn add @freshpaint/babel-plugin-annotate-react`、`bun add @freshpaint/babel-plugin-annotate-react`
## README
# Babel 插件: 注释反应
[](https://circleci.com/gh/freshpaint-io/freshpaint-babel-plugin-annotate-react)
这是一个Babel插件,它能对具有稳定属性的组件进行注释,可用于使用Freshpaint进行选择. 这在使用生成组件或重排元素动态名称的回放系统时最为有用.
对于网络上的反应,属性是 `data-component`, (中文(简体) ), `data-element`,以及 `data-source-file`。对于反应土著,属性是 `dataComponent`, (中文(简体) ), `dataElement`,以及 `dataSourceFile`。 。 。 .
组件属性名称 `React.Component` 和元素属性名称 `View` 或者说 `Image` 或诸如DOM元素的发射器 `Fragment`。 。 。 .
示例输入 :
```
class HelloComponent extends Component {
render() {
return
Hello world
;
}
}
```
联合来文产出实例:
```
class HelloComponent extends Component {
render() {
return React.createElement("div", {
"data-component": "HelloComponent",
"data-file-source": "hello-component.js"
}, React.createElement("h1", {
null
}, "Hello world"));
}
}
```
最后意见:
```
Hello world
```
要激活原始支持, 您必须在 `native` 类似插件选项 :
```
plugins: [
["@freshpaint/babel-plugin-annotate-react", { native: true }]
]
```
默认情况下, 插件没有注释 `React.Fragment`s 因为它们可能包含也可能不包含一个最终成为HTML元素的孩子.
一个没有儿童因素的例子:
```
const componentName = () => (
Hello, there.
);
```
儿童因素的例子:
```
const componentName = () => (
Some text
Hello, there.
/* This one could be annotated */
Click me
);
```
如果您希望插件尝试对由碎片( 如果存在) 创建的第一个 HTML 元素进行注释, 请设置 `annotate-fragments` 旗帜 :
```
plugins: [
["@freshpaint/babel-plugin-annotate-react", { "annotate-fragments": true }]
]
```
我们有一些样本可以演示这个插件:
- [单页 App](https://npmcn.com/package/%40freshpaint/babel-plugin-annotate-react/samples/single-page-app/)
- [样式组件](https://npmcn.com/package/%40freshpaint/babel-plugin-annotate-react/samples/styled-components/)
- [本地反应](https://npmcn.com/package/%40freshpaint/babel-plugin-annotate-react/samples/react-native-app/)
添加属性的许多逻辑来源于 [变换反应- qa 类](https://github.com/davesnx/babel-plugin-transform-react-qa-classes/) 插件 .
## 常见问题
### @freshpaint/babel-plugin-annotate-react 是什么？
一个批注回放组件的 Babel 插件, 使其更容易用 Freshpaint 瞄准
### 如何安装 @freshpaint/babel-plugin-annotate-react？
在项目目录运行 npm install @freshpaint/babel-plugin-annotate-react，或使用 pnpm add / yarn add / bun add。
### @freshpaint/babel-plugin-annotate-react 支持 TypeScript 吗？
该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/freshpaint\_\_babel-plugin-annotate-react 是否存在。
### @freshpaint/babel-plugin-annotate-react 支持 ESM 还是 CommonJS？
以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。
### @freshpaint/babel-plugin-annotate-react 可以商用吗？
@freshpaint/babel-plugin-annotate-react 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @freshpaint/babel-plugin-annotate-react 的下载量有多少？
根据 npm 官方下载统计，@freshpaint/babel-plugin-annotate-react 在 2026/10/16 – 2026/11/14 这 30 天内被下载 9,650 次，日均约 322 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @freshpaint/babel-plugin-annotate-react 还在维护吗？
最新版本 2\.1\.3 发布于 2021/03/17（5 年前）；至今共发布 1 个版本，其中过去 12 个月发布了 0 个；首次发布于 2021/03/17。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。