在gulpNode js上不支持ES模块gulpfile.js的require()

Question

gullfile.js

'use strict';
const gulp = require("gulp");
const imagemin = require("gulp-imagemin");
const webp = require("imagemin-webp");
const extReplace = require("gulp-ext-replace");
gulp.task("exportWebP", function() {
let src = "artists/**/*.jpg"; // Where your PNGs are coming from.
let dest = "dist/images"; // Where your WebPs are going.
return gulp.src(src)
.pipe(imagemin([
webp({
quality: 75
})
]))
.pipe(extReplace(".webp"))
.pipe(gulp.dest(dest));
});

软件包.json

{
"type": "module",
"main": "gulpfile.js",
"dependencies": {
"gulp-ext-replace": "^0.3.0",
"gulp-imagemin": "^8.0.0",
"imagemin-webp": "^7.0.0"
},
"devDependencies": {
"gulp": "^4.0.2"
}
}

在这里我运行gulp-js文件，它显示错误

错误[ERR_REQUIRE_ESM]：不支持gulpfile.js中ES模块index.js的REQUIRE()。相反，将gulpfile.js中对index.js的要求更改为动态import()，该动态import在所有CommonJS模块中都可用。在对象处。(gullfile.js:3:18)异步Promise.all(索引0){代码：'ERR_REQUIRE_ESM'}如何解决这个问题。

Answer 1

许多软件包被移到esm模块，无法再使用require导入

将require更改为import

import gulp from "gulp";
import imagemin from "gulp-imagemin";
import webp from "imagemin-webp";
import extReplace from "gulp-ext-replace";

Answer 2

您可以在使用imagmin包的函数中动态导入它。

例如，假设在版本8之前，该函数将如下所示：

function buildSprite() {
return src(location.sprites.source + '*.svg')
.pipe(imagemin.default([
imagemin.svgo({
plugins: [
{
removeViewBox: false,
collapseGroups: false
}
]
})
]))
.pipe(dest(location.sprites.dist));
}

在版本8之后，您的功能将如下所示：

async function buildSprite() {
const imagemin = await import('gulp-imagemin');
return src(location.sprites.source + '*.svg')
.pipe(imagemin.default([
imagemin.svgo({
plugins: [
{
removeViewBox: false,
collapseGroups: false
}
]
})
]));
}