为 React JSX 元素添加源码位置

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

信息

此插件已包含在 @babel/preset-react 中。

示例

输入

<sometag />

输出

<sometag __source={ { fileName: 'this/file.js', lineNumber: 10, columnNumber: 1 } } />

从 v7.9.0 版本开始，会输出 columnNumber 属性。

安装

npm

npm install --save-dev @babel/plugin-transform-react-jsx-source

Yarn

yarn add --dev @babel/plugin-transform-react-jsx-source

pnpm

pnpm add --save-dev @babel/plugin-transform-react-jsx-source

Bun

bun add --dev @babel/plugin-transform-react-jsx-source

用法

通过配置文件（推荐）

babel.config.json

{
  "plugins": ["@babel/plugin-transform-react-jsx-source"]
}

通过命令行

Shell

babel --plugins @babel/plugin-transform-react-jsx-source script.js

通过 Node API

JavaScript

require("@babel/core").transformSync("code", {
  plugins: ["@babel/plugin-transform-react-jsx-source"],
});