@babel/plugin-transform-react-inline-elements
備考
@babel/plugin-transform-runtimeと併用して使用すると、ポリフィル（デフォルトではSymbolを含む）は、グローバルスコープを汚染しないように特別に限定されます。Reactではそれらのポリフィルにアクセスできないので、レガシーブラウザでアプリケーションが失敗する原因になります。
['@babel/plugin-transform-runtime', { helpers: true, polyfill: false }]が指定されていても、ヘルパーがプリコンパイルされているので破損する可能性があります。
この場合は、@babel/polyfillをアプリケーションのエントリポイントにインポート/要求し、useBuiltInsオプションを指定した@babel/preset-envを使用してターゲットに必要なポリフィルのみを含めることをお勧めします。あるいは、core-js/modules/es6.symbol自体をインポート/要求することもできます。
この変換は本番でのみ有効にする必要があります（例：コードをミニファイする直前）。実行時パフォーマンスを向上させますが、警告メッセージが曖昧になり、 propTypesを含む開発モードで実行される重要なチェックがスキップされます。
サンプル
入力
JavaScript
<Baz foo="bar" key="1" />
出力
JavaScript
babelHelpers.jsx(
Baz,
{
foo: "bar",
},
"1"
);
/**
* Instead of
*
* React.createElement(Baz, {
* foo: "bar",
* key: "1",
* });
*/
デオプティマイズ
JavaScript
// The plugin will still use React.createElement when `ref` or `object rest spread` is used
<Foo ref="bar" />
<Foo {...bar} />
インストール
- npm
- Yarn
- pnpm
npm install --save-dev @babel/plugin-transform-react-inline-elements
yarn add --dev @babel/plugin-transform-react-inline-elements
pnpm add --save-dev @babel/plugin-transform-react-inline-elements
使用方法
設定ファイルを使用する（推奨）
babel.config.json
{
"plugins": ["@babel/plugin-transform-react-inline-elements"]
}
CLI経由
シェル
babel --plugins @babel/plugin-transform-react-inline-elements script.js
Node API経由
JavaScript
require("@babel/core").transformSync("code", {
plugins: ["@babel/plugin-transform-react-inline-elements"],
});