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

Question

我是

Gulp

的新手，并尝试自动化一些任务。这是我的环境设置：

npm version: 8.1.0

、

node version 17.0.1

、

gulp CLI version 2.3.0

和

gulp 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.

我尝试过类似的解决方案 - 在 package.json 中添加

type:"module"

并使用

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';

我做了一个指南：将 gulpfile 从 CommonJS (CJS) 移动到 ECMAScript 模块 (ESM)

Answer 3

根据 node 文档 Node.js 有两个模块系统：CommonJS 模块和 ECMAScript 模块。

您可以通过 .mjs 文件扩展名、package.json“type”字段或 --input-type 标志告诉 Node.js 使用 ECMAScript 模块加载器。在这些情况之外，Node.js 将使用 CommonJS module 加载器。有关更多详细信息，请参阅确定模块系统。

所以基本上使用 es6 语法并将文件扩展名重命名为 .mjs，这样节点就会将此文件视为 ECMA

import gulp from 'gulp';
import imagemin from 'gulp-imagemin';

export default () =>
  gulp
    .src('public/media/**/*')
    .pipe(imagemin())
    .pipe(gulp.dest('dist/public/media'));

Answer 4

（当前）最新的 gulp-imagemin (v8.0.0) 版本是根据 v8.0.0 发行说明的纯 ESM 包。使用 dynamic import 解决此问题的方法已发布到 How to import a Javascript file that is ESM from a CommonJS module?咕噜咕噜。错误：[ERR_REQUIRE_ESM]。

Answer 5

另一种选择： 您需要切换到使用动态 import() 语法而不是 require()。然而，在 gulpfile 中，这可能有点棘手，因为动态导入返回一个承诺，而 Gulp 通常期望事情立即可用。

以下是如何通过 gulp-imagemin 使用动态导入：

let imagemin;
import('gulp-imagemin').then((gulpImagemin) => {
  imagemin = gulpImagemin;
});

const images = () => {
  if (!imagemin) {
    throw new Error('gulp-imagemin not loaded');
  }

  return gulp.src('src/images/**/*')
    .pipe(imagemin())
    .pipe(gulp.dest('dist/images'));
};

exports.images = images;

这样，gulp-imagemin 会在加载 gulpfile 时异步导入，然后在任何任务运行时可用。但请注意，如果您在启动脚本后立即运行 gulp images，gulp-imagemin 可能尚未加载。您应该确保在开始 Gulp 任务之前加载所有导入。

如果您发现这种方法过于复杂或容易出错，另一个解决方案是坚持使用 CommonJS 模块而不是 ES 模块的依赖项版本，正如上面描述的其他一些答案。

Answer 6

我遇到了同样的错误，所以首先查看 gulp 插件的 npm 文档，看看是否有额外的更改。现在也试试这个

const sass = require('gulp-sass')(require('sass'));

而不是

const sass = require('gulp-sass');