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

インストール

モジュールをプロジェクトにインストールするには、npmを使用します。

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

注意: このパッケージは、長期サポートステータスのNode.jsバージョンを必要とします（アクティブLTSまたはメンテナンスLTSリリースを確認）。古いバージョンとは互換性がありません。

使用法

Babelプラグインのドキュメントを参照してください。Babelプラグインの使用経験がない場合。

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

注意: @wordpress/babel-plugin-import-jsx-pragmaは、@wordpress/babel-preset-default（WordPress開発のデフォルトプリセット）にv4.0.0から含まれています。このプリセットを使用している場合は、Babel設定にこのプラグインを含めるべきではありません。

オプション

たとえば、`````react`````パッケージを使用している場合、次の設定を使用することをお勧めします:  
``````bash
// .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

タイプ: 文字列

JSXプラグマによって使用されるスコープ内に必要な変数の名前。React.createElementのデフォルトプラグマの場合、React変数はスコープ内に存在する必要があります。

scopeVariableFrag

タイプ: 文字列

<></> Fragment JSXのためにスコープ内に必要な変数の名前。名前付き<Fragment />要素

は、Fragmentがスコープ内にあることを期待し、インポートを追加しません。

source

タイプ: 文字列

不足している場合にスコープ変数をインポートするモジュール。

isDefault

タイプ: ブール

scopeVariableがソースモジュールのデフォルトインポートであるかどうか。これはscopeVariableFragには影響しません。

このパッケージへの貢献

これはGutenbergプロジェクトの一部である個別のパッケージです。このプロジェクトはモノレポとして整理されています。特定の目的を持つ複数の自己完結型ソフトウェアパッケージで構成されています。このモノレポ内のパッケージはnpmに公開され、WordPressや他のソフトウェアプロジェクトで使用されています。

このパッケージやGutenberg全体への貢献について詳しく知りたい場合は、プロジェクトの主要な貢献者ガイドをお読みください。