升级Gulp之后，javascript将抛出一个语法错误“导入声明只能出现在模块的顶层”。

Question

我有一个gulpfile.js，它可以监视文件夹中的文件更改。在我从Gulp3.9.1升级到4.0.2之前，一切都很好。在升级Gulp时，我还将node.js升级为最新的v12.17.0

下面是打包js文件的gulp任务

var gulp = require("gulp"),
    concat = require("gulp-concat"),
    filter = require('gulp-filter'),
    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("."));

    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函数，不需要显式导入。因此，删除导入语句可以解决此问题。

如果上述步骤没有解决问题，则可以尝试以下操作：

将type=“模块”属性添加到包含模块的HTML标记中。

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