SyntaxError：不能在 gulp 中的模块外部使用导入语句

Question

嗨，我将尝试学习 gulp，但一开始我在简单的 hello world 中出现错误。 有谁能够帮我？

我的 gulp 版本是： CLI 版本 3.9.0 本地版本 4.0.2

my.babelrc 文件：

{
  "presets": [ "@babel/preset-env" ]
}

我的 gulpfile.babel.js 文件：

export const hello = (done) => {
  console.log('hello');
  done();
}

我的 package.json 文件：

  "name": "meatheme",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "directories": {
    "lib": "lib"
  },
  "scripts": {
    "start": "gulp",
    "build": "gulp build --prod",
    "bundle": "gulp bundle --prod"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.12.3",
    "@babel/preset-env": "^7.12.1",
    "@babel/register": "^7.12.1",
    "babel-loader": "^8.1.0",
    "browser-sync": "^2.26.13",
    "del": "^5.1.0",
    "gulp": "^4.0.2",
    "gulp-clean-css": "^4.3.0",
    "gulp-if": "^3.0.0",
    "gulp-imagemin": "^7.1.0",
    "gulp-rename": "^2.0.0",
    "gulp-replace": "^1.0.0",
    "gulp-sass": "^5.0.0",
    "gulp-sourcemaps": "^2.6.5",
    "gulp-uglify": "^3.0.2",
    "gulp-wp-pot": "^2.5.0",
    "gulp-zip": "^5.0.2",
    "sass": "^1.43.4",
    "vinyl-named": "^1.1.0",
    "webpack-stream": "^5.2.1",
    "yargs": "^15.4.1"
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.1",
    "jquery": "^3.5.1",
    "normalize.css": "^8.0.1",
    "slick-carousel": "^1.8.1"
  }
}

当我运行 gulp 时，你好在终端中看到这个。

[16:47:07] Failed to load external module babel-core/register
[16:47:07] Failed to load external module babel/register
/home/mehdi/Work/Meacodes/Mea template/mea0.1/gulpfile.babel.js:16
import gulp from 'gulp';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:915:16)
    at Module._compile (internal/modules/cjs/loader.js:963:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Liftoff.handleArguments (/usr/local/lib/node_modules/gulp/bin/gulp.js:116:3)
    at Liftoff.execute (/usr/local/lib/node_modules/gulp/node_modules/liftoff/index.js:203:12)
    at module. Exports (/usr/local/lib/node_modules/gulp/node_modules/flagged-respawn/index.js:51:3)

你知道我的问题在哪里吗？