个人中心
gpt4 book ai didi

How to convert babel transpiled code into normal js(如何将babel编译的代码转换为普通的js)

转载 作者：bug小助手 更新时间：2023-10-22 13:50:51 26 4
gpt4 key购买 nike



I am using plugin called babel-plugin-transform-react-class-to-function
 for conversion of react class to functional component. It is converting the given input into transpiled babel code but I want the original plain code as specified in the readme of given plugin's github. How can I do that>

我正在使用名为babel-plugin的插件将react类转换为函数，以将react类别转换为函数组件。它将给定的输入转换为已编译的babel代码，但我想要给定插件的github的自述文件中指定的原始纯代码。我该怎么做>


Ex : Given input
enter image description here

例如：给定输入，在此处输入图像描述


Provided output.
enter image description here

提供的输出。在此处输入图像描述


Required output

所需输出


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

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

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

更多回答
优秀答案推荐

You need an extra Babel plugin:

你需要一个额外的Babel插件：



e.g.

例如。


babel.config.json:

babel.config.json：


{
  "plugins": [
    "@babel/plugin-syntax-jsx",
    "babel-plugin-transform-react-class-to-function"
  ]
}

In:

在：


index.jsx:

index.jsx：


import PropTypes from 'prop-types';
import React, { 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>;
    }
}

Command for compiling:

用于编译的命令：


npx babel ./index.jsx -d ./

Out:

输出：


import PropTypes from 'prop-types';
import React, { Component } from 'react';
const HelloWorld = ({
  className
}) => {
  return <div className={className}>Hello world!</div>;
};
HelloWorld.propTypes = {
  className: PropTypes.string
};
export { HelloWorld };

package versions:

软件包版本：


"react": "^18.2.0",
"react-dom": "^18.2.0",
"@babel/cli": "^7.22.15",
"@babel/core": "^7.22.17",
"@babel/plugin-syntax-jsx": "^7.22.5",
"babel-plugin-transform-react-class-to-function": "^1.2.2",
"prop-types": "^15.8.1"

更多回答

26 4 0
文章推荐： How to write/read hardware by ExtEscape in WDDM 2.0?(如何在WDDM 2.0中使用ExtEscape编写/读取硬件？)
文章推荐： R: Is there an equivalent to Stata's codebookout command?(R： 有类似Stata的codebookout命令吗？)
文章推荐： nodemailer authentication issues(nodemailer身份验证问题)
文章推荐： Sideloaded appinstaller not referencing appinstaller on server when checking for updates(在检查更新时，侧加载的appinstaller未引用服务器上的appnstaller)
bug小助手
个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章
滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com