用于自动注入作为 React JSX Transform 插件 的 pragma 的导入的 Babel 转换插件。

JSX 仅仅是函数调用的语法糖，通常在使用 React 时为 React.createElement。因此，它要求此转换所引用的函数必须存在于 JSX 出现的文件的上下文中。在一个典型的 React 项目中，这意味着必须在任何存在 JSX 的文件中导入 React。

Babel Plugin Import JSX Pragma 通过在存在 JSX 的地方自动引入必要的导入来自动化这一过程，使您能够在代码中使用 JSX，而无需担心确保转换后的函数在作用域内。它尊重现有的导入语句以及作用域变量声明。

安装

使用 npm 将模块安装到您的项目中。

npm install @wordpress/babel-plugin-import-jsx-pragma

注意：此软件包需要具有长期支持状态（检查 Active LTS 或 Maintenance LTS 版本）的 Node.js 版本。它与旧版本不兼容。

用法

如果您还没有使用 Babel 插件的经验，请参阅 Babel 插件文档。

在您的 Babel 配置中将 @wordpress/babel-plugin-import-jsx-pragma（和 @babel/plugin-transform-react-jsx）包含为插件。如果不同时包含两者，遇到 JSX 令牌时将收到错误。

// .babelrc.js
module.exports = {
    plugins: [
        '@wordpress/babel-plugin-import-jsx-pragma',
        '@babel/plugin-transform-react-jsx',
    ],
};

注意：从 v4.0.0 开始，@wordpress/babel-plugin-import-jsx-pragma 已包含在 @wordpress/babel-preset-default（WordPress 开发的默认预设）中。如果您正在使用此预设，则不应在 Babel 配置中包含此插件。

选项

由于 @babel/plugin-transform-react-jsx 插件提供自定义 pragma 的选项，因此有相应的选项可用于自定义生成的导入。

例如，如果您使用的是 react 软件包，您可能希望使用以下配置：

// .babelrc.js
module.exports = {
    plugins: [
        [
            '@wordpress/babel-plugin-import-jsx-pragma',
            {
                scopeVariable: 'createElement',
                scopeVariableFrag: 'Fragment',
                source: 'react',
                isDefault: false,
            },
        ],
        [
            '@babel/plugin-transform-react-jsx',
            {
                pragma: 'createElement',
                pragmaFrag: 'Fragment',
            },
        ],
    ],
};

scopeVariable

类型： String

JSX pragma 所需的作用域变量的名称。对于默认的 React.createElement pragma，React 变量必须在作用域内。

scopeVariableFrag

类型： String

<></> Fragment JSX 所需的变量名称。命名元素 <Fragment />
期望 Fragment 在作用域内，并且不会添加导入。

source

类型： String

当缺少范围变量时，从中导入该变量的模块。

isDefault

类型： Boolean

scopeVariable 是否是源模块的默认导入。请注意，这对
scopeVariableFrag 没有影响。

为此软件包做出贡献

这是 Gutenberg 项目的一部分单个软件包。该项目组织为一个 monorepo。它由多个自包含的软件包组成，每个软件包都有特定的用途。这些 monorepo 中的软件包发布到 npm 并被 WordPress 以及其他软件项目使用。

要了解有关为此软件包或整个 Gutenberg 做出贡献的更多信息，请阅读项目的主要 贡献者指南。