这是我第一次尝试实现babel transpiler（我正在使用webpack），根据我正在阅读的所有内容，一个简单的输入文件应该提供一个相对简单的输出文件。即使根据this testing site，与我在现实环境中获得的输出相比，我得到的输出非常很简单。

我的输入文件基本上是这样的：

class Gallery extends Component{
    render(){
        console.log(front_end)
        return(
            <div class="gallery-container">
                {front_end.map(e=>{
                    return(
                        <div class='front-end'>
                            {e.name}
                        </div>
                    )
                })}
            </div>
        );
    }
}

ReactDOM.render(<Gallery/>,$('#container')[0])

我在网站上获得的输出当时只有一些功能，然后非常简单

var Gallery =
/*#__PURE__*/
function (_Component) {
  _inherits(Gallery,_Component);

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

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

  _createclass(Gallery,[{
    key: "render",value: function render() {
      console.log(front_end);
      return React.createElement("div",{
        class: "gallery-container"
      },front_end.map(function (e) {
        return React.createElement("div",{
          class: "front-end"
        },e.name);
      }));
    }
  }]);

  return Gallery;
}(Component);

ReactDOM.render(React.createElement(Gallery,null),$('#container')[0]);

当我尝试在实际应用程序中执行相同的操作时，我会得到很长的代码字符串（即使在开发人员模式下也是如此）。

这是我的webpack.config.js：

var path = require('path');

module.exports = {
    module: {
      rules: [
        {
          test: /\.(jsx)$/,exclude: /node_modules/,use: {
            loader: "babel-loader"
          }
        }
      ]
    },entry: {
      gallery: './src/react/presentational/gallery.jsx'
    },output: {
      filename: '[name].js',path: __dirname + '/public/js'
    },resolve: {alias: {root: path.resolve('.')}}
  }  

我的.babelrc：

{
    "presets": ["@babel/react"],}

我尝试实现以下依赖关系的各种组合，然后实现一些组合：

"@babel/core": "^7.7.4","@babel/plugin-transform-react-jsx": "^7.7.4","@babel/preset-env": "^7.7.4","@babel/preset-react": "^7.7.4","babel-loader": "^8.0.6","babel-preset-es2015": "^6.24.1",

我已经尝试了有关如何进行此设置的多个教程，但似乎没有用。需要注意的一件事是，我不是在尝试使用Transpiler编写html，而只是生成react js文件，然后将其导入到pug文件中。 （请注意，我曾考虑过使用type="text/babel"方法直接导入jsx，但这是行不通的，因为我正在import将数据{@ 1}}到js文件中，所以导入pug文件中的文件必须是type="module"。）

更新：屏幕截图