如何从一个CommonJS模块导入一个ESM的Javascript文件？Gulp错误：[ERR_REQUIRE_ESM]

Question

如何从一个CommonJS模块导入一个ESM的Javascript文件？Gulp错误：[ERR_REQUIRE_ESM]

6

我的项目完全是使用CommonJS模块编写的，我没有计划更改它。问题在于，gulp使用时必须使用一个ESM库。

出现此情况的文件：

const { dest, src } = require('gulp')
const imagemin = require('gulp-imagemin') // This is a ESM. Compiler gives error [ERR_REQUIRE_ESM]


const images = () => {
    // We have specific configs for jpeg and png files to try
    // to really pull down asset sizes
    return src('./src/images/**/*')
        .pipe(
            imagemin(
                [
                    imagemin.mozjpeg({ quality: 60, progressive: true }),
                    imagemin.optipng({ optimizationLevel: 5, interlaced: null })
                ],
                {
                    silent: true
                }
            )
        )
        .pipe(dest('./dist/images'))
}

module.exports = images

这是Node报告的错误

Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users\Lucas\Documents\repos\nexus-materiales\node_modules\gulp-imagemin\index.js from C:\Users\Lucas\Documents\repos\nexus-materiales\gulp-tasks\images.js not supported.
Instead change the require of index.js in C:\Users\Lucas\Documents\repos\nexus-materiales\gulp-tasks\images.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (C:\Users\Lucas\Documents\repos\nexus-materiales\gulp-tasks\images.js:2:18)
    at Object.<anonymous> (C:\Users\Lucas\Documents\repos\nexus-materiales\gulpfile.js:4:16)
    at async Promise.all (index 0) {
  code: 'ERR_REQUIRE_ESM'
}

那么，如果这是一个ESM（ECMAScript模块），我该如何使用commonJS来包含这个文件呢？这种情况可能吗？

- Lucas David Ferrero

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- GOTO 0 · Accepted Answer

要从CommonJS代码导入ES模块，请使用动态导入。

ES模块导入是异步的：在创建gulp流之前，必须确保gulp-imagemin已经成功导入。这可以通过gulp.series来实现。

const { dest, series, src } = require('gulp');
let imagemin;

const images = series(
    async () => {
        imagemin = await import('gulp-imagemin');
    },
    () => src('./src/images/**/*')
        .pipe(
            imagemin.default(
                [
                    imagemin.mozjpeg({ quality: 60, progressive: true }),
                    imagemin.optipng({ optimizationLevel: 5, interlaced: null })
                ],
                {
                    silent: true
                }
            )
        )
        .pipe(dest('./dist/images'))
);

请注意，我使用imagemin.default来访问gulp-imagemin的默认导出，因为它是动态导入的。