跳至主要内容

@babel/plugin-transform-react-inline-elements

注意​

当与 @babel/plugin-transform-runtime 一起使用时，polyfill（默认情况下包括 Symbol）会被特别限定范围，以避免污染全局作用域。这会破坏与 React 的配合使用，因为它将无法访问该 polyfill，并导致您的应用程序在旧版浏览器中失败。

即使指定了 ['@babel/plugin-transform-runtime', { helpers: true, polyfill: false }]，它仍然可能会中断，因为 helpers 是预编译的。

在这种情况下，我们建议在应用程序的入口点导入/请求 @babel/polyfill，并使用带有 useBuiltIns 选项的 @babel/preset-env 来仅包含您的目标环境所需的 polyfill。或者，您也可以单独导入/请求 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",
 * });
 */

Deopt

JavaScript
// The plugin will still use React.createElement when `ref` or `object rest spread` is used
<Foo ref="bar" />
<Foo {...bar} />

安装​

npm install --save-dev @babel/plugin-transform-react-inline-elements

用法​

babel.config.json
{
  "plugins": ["@babel/plugin-transform-react-inline-elements"]
}

通过 CLI​

Shell
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"],
});

参考​