如何将Babel转译代码转为常规JS？React类转函数组件插件问题

使用babel-plugin-transform-react-class-to-function插件将React类组件转换为函数组件时，插件输出的是Babel转译后的ES5代码，但希望得到像插件GitHub README中展示的原生ES6+简洁代码。

示例 #

输入的类组件：

import PropTypes from 'prop-types';
import { Component } from 'react';

export class HelloWorld extends Component {
  static propTypes = {
    className: PropTypes.string,
  };

  render() {
    const { className } = this.props;
    return <div className={className}>Hello world!</div>;
  }
}

当前输出（转译后的ES5代码）：

import PropTypes from 'prop-types';
import { Component } from 'react';

export var HelloWorld = function (_Component) {
  _inherits(HelloWorld, _Component);

  function HelloWorld() {
    _classCallCheck(this, HelloWorld);

    return _possibleConstructorReturn(this, _getPrototypeOf(HelloWorld).apply(this, arguments));
  }

  _createClass(HelloWorld, [{
    key: "render",
    value: function render() {
      var className = this.props.className;
      return React.createElement("div", {
        className: className
      }, "Hello world!");
    }
  }]);

  return HelloWorld;
}(Component);

HelloWorld.propTypes = {
  className: PropTypes.string
};

期望输出：

import PropTypes from 'prop-types';
import { Component } from 'react';

export const HelloWorld = ({ className }) => <div className={className}>Hello world!</div>;

HelloWorld.propTypes = {
  className: PropTypes.string,
};

• 调整Babel转译目标环境：在@babel/preset-env配置中设置支持ES6+语法的目标环境（如现代浏览器），避免Babel将箭头函数、解构等语法转译为ES5。例如在babel.config.json中：

  {
    "presets": [
      ["@babel/preset-env", { "targets": { "chrome": "80", "edge": "80" } }],
      "@babel/preset-react"
    ],
    "plugins": ["transform-react-class-to-function"]
  }
  

• 单独运行插件转换：使用babel-cli单独执行该插件，不加载其他转译插件，确保输出原生ES6+代码：

  npx babel --plugins transform-react-class-to-function src/your-component.js
  

• 更新插件版本：确保使用最新版的babel-plugin-transform-react-class-to-function，旧版本可能存在输出格式问题。
• 调整插件执行顺序：在Babel配置中，将transform-react-class-to-function放在@babel/preset-env等转译插件之前执行，避免类组件先被转译为ES5再转换为函数组件。

内容的提问来源于stack exchange，提问作者Aditya Sangave