Javascript 使用gulp与webpack流和babel加载程序转换jsx

我正在用Wordpress建立一个网站，我正在尝试使用gulp、webpack stream和babel loader将JSX转换为JS（我成功地使用gulp将CSS转换为sass，所以我删除了该代码）

每当我在终端中运行gulp命令来转换JSX时，我在生成的Javascript文件中会得到以下错误输出：

!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){"use strict";n.r(t);n(1);console.log("ugh")},function(e,t){console.log("test running")}]);

我无法确定是因为缺少重要的软件包，还是因为我的gulp命令出现了其他问题，才导致出现此错误

这是我的package.json的依赖项

{
  "devDependencies": {
    "@babel/core": "^7.11.4",
    "@babel/preset-env": "^7.11.0",
    "@babel/register": "^7.10.5",
    "@wordpress/browserslist-config": "^2.7.0",
    "autoprefixer": "^9.8.6",
    "babel-loader": "^8.1.0",
    "babelify": "^10.0.0",
    "browserify": "^17.0.0",
    "browserslist": "^4.14.0",
    "gulp": "^4.0.2",
    "gulp-concat": "^2.6.1",
    "gulp-postcss": "^8.0.0",
    "gulp-sass": "^4.1.0",
    "gulp-sourcemaps": "^2.6.5",
    "gulp-terser": "^1.4.0",
    "webpack-stream": "^6.1.0"
  },
  "browserslist": [
    "extends @wordpress/browserslist-config"
  ]
}

这是我的gulpfile.babel.js文件：

// load gulp
  import gulp from 'gulp';

// utility
  import sourcemaps from 'gulp-sourcemaps';

// css-related
  import sass from 'gulp-sass';
  import postcss from 'gulp-postcss';
  import autoprefixer from 'autoprefixer';

// js-related
  import webpack from 'webpack-stream';


// project
  const paths = {
    scripts: {
      src: 'src/scripts/bundle.js',
      dest: './build/js/'
    }
  }


// enable javasript
export const scripts = (done) => {
  return gulp.src( paths.scripts.src )
    .pipe( webpack({
      // module: {
      //   rules: [
      //     {
      //       test: /\.js$/,
      //       use: {
      //         loader: 'babel-loader',
      //         options: {
      //           presets: ['@babel/preset-env']
      //         }
      //       }
      //     }
      //   ]
      // },
      output: {
        filename: 'bundle.js'
      }
    }) )
    .pipe( gulp.dest( paths.scripts.dest ) );
    done();
}

我注释掉了webpack模块项，因为我消除了它不起作用的可能原因。当我注释掉webpack时，代码“起作用”，因为它将文件复制到构建文件夹中

下面是包含JSX的bundle.js文件

console.log('ugh');

import './components/test';

let x = 0;

下面是test.js包含的内容

console.log("test running");

我在终端内部也收到了以下信息：

(node:13196) [DEP0097] DeprecationWarning: Using a domain property in MakeCallback is deprecated. Use the async_context variant of MakeCallback or the AsyncResource class instead.
[22:53:54] Version: webpack 4.44.2
Built at: 10/20/2020 10:53:54 PM
    Asset        Size  Chunks             Chunk Names
bundle.js  1020 bytes       0  [emitted]  main
Entrypoint main = bundle.js

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
[22:53:54] Finished 'scripts' after 1.69 s

我对使用node、npm和gulp是完全陌生的，我一直在尽我所能地遵循教程，试图让它发挥作用，但每个教程要么都是旧的，要么最终在目标文件中出现了垃圾代码。我也是唯一的开发者和设计师，我迫切需要一些反馈/帮助。我将永远感谢任何能够帮助我使其正常工作的人，我很高兴提供任何额外的信息，以便解决这个问题