运行“gulp”命令时出现“错误 [ERR_REQUIRE_ESM]”

Question

我是新手Gulp，正在尝试自动化某些任务。这是我的环境设置：npm version: 8.1.0、node version 17.0.1和gulp CLI version 2.3.0gulp version 4.0.2

这是我的gulpfile.js：

// list of dependencies ( things require to run the below funcitions)
const { src, dest, watch, series } = require('gulp');
const sass = require('gulp-sass');
const prefix = require('gulp-autoprefixer');
const minify = require('gulp-clean-css');
const terser = require('gulp-terser');
const imagemin = require('gulp-imagemin');
const imagewebp = require('gulp-webp');



// create functions


// SCSS
function compilescss() {
    return src('src/scss/*.scss')
        .pipe(sass())
        .pipe(prefix('last 2 versions'))
        .pipe(minify())
        .pipe(dest('/dist/css'))
}


// JS
function jsmin(){
    return src('src/js/*.js')
        .pipe(terser())
        .pipe(dest('dist/js'))
}

// images
function optimizeimg() {
    return src('src/img/*.{jpg,png}')
        .pipe(imagemin([
            imagemin.mozjpeg({quality: 80, progressive: true}),
            imagemin.optipng({optiminzationLevel: 2})
        ]))
        .pipe(dest('dist/img'))
}


// webp images
function webpImage() {
    return src('dist/img/*.{jpg, png}')
        .pipe(imagewebp())
        .pipe('dist/img')
}


// create watchlist
function watchTask(){
    watch('src/scss/*.scss', compilescss);
    watch('src/js/*.js', jsmin);
    watch('src/img/*.{jpg,png}', optimizeimg);
    watch('dist/img/*.{jpg,png}', webpImage);
}



// default gulp
exports.default = series(
    compilescss,
    jsmin,
    optimizeimg,
    webpImage,
    watchTask
);

当我尝试gulp在终端中运行命令时。我收到类似错误 -Error [ERR_REQUIRE_ESM]: require() of ES Module E:\Projects\portfolio\node_modules\gulp-imagemin\index.js from E:\Projects\portfolio\gulpfile.js not supported.

我尝试过类似的解决方案 - 添加type:"module"package.json 并代替require()使用import，但我无法使其工作。那么我该如何解决这个问题呢？谢谢！

Answer 1

gulp-imagemin 8.0.0 及更高版本现在仅适用于 ESM。您可以将 gulp-imagemin 降级到 7.1.0，这是 commonjs，它应该可以正常工作。

该软件包现在是纯ESM。请阅读这个。

https://github.com/sindresorhus/gulp-imagemin/releases/tag/v8.0.0

Answer 2

转向类似的事情可能会起作用：

import gulp from 'gulp';
const { src, dest, watch, series } = gulp;
import dartSass from 'sass';
import gulpSass from 'gulp-sass';
const sass = gulpSass(dartSass);
import prefix from 'gulp-autoprefixer';
import minify from 'gulp-clean-css';
import terser from 'gulp-terser';
import imagemin from 'gulp-imagemin';
import imagewebp from 'gulp-webp';

我制作了一个指南：Moving gulpfile from CommonJS (CJS) to ECMAScript Modules (ESM)