升级Gulp后，javascript引发语法错误“导入声明只能出现在模块的顶层”

Question

我有一个gulpfile.js，可以监视文件夹中的文件更改。一切正常，直到我从Gulp 3.9.1升级到4.0.2.。

这是我的gulp任务，捆绑了js文件

var gulp = require("gulp"),
    concat = require("gulp-concat"),
    filter = require('gulp-filter'),
    rename = require('gulp-rename'),
    uglify = require('gulp-uglify-es').default,
    merge = require("merge-stream");

gulp.task("min:js", function () {
    var tasks = [];

    var task = gulp.src(['path_1/**/*.js', 'path_2/**/*.js'], { base: "." })
            .pipe(filter('**/*.js'))
            .pipe(concat('output.js'))
            .pipe(gulp.dest("."))
            .pipe(uglify())
            .pipe(rename({ suffix: '.min' }))
            .pipe(gulp.dest("."));

    tasks.push(task);

    return merge(tasks);
});

该任务生成以下代码

// More Js code...
import { setTimeout } from "timers";

'use strict';
// more js code.....

但是行import { setTimeout } from "timers";抛出以下错误

SyntaxError：导入声明只能出现在模块

如何解决此错误？

Answer 1

上述问题可能是由于尝试将setTimeout导入为模块引起的。

setTimeout是标准的javascript函数，无需显式导入。因此，删除导入语句可以解决此问题。

如果以上步骤不能解决问题，则可以尝试以下操作：

向包含模块的HTML脚本标签添加type =“ module”属性。

<script type="module" src="my-module.js"></script>