首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何从CommonJS模块导入作为ESM的Javascript文件?一口一口。错误:[ERR_REQUIRE_ESM]

如何从CommonJS模块导入作为ESM的Javascript文件?一口一口。错误:[ERR_REQUIRE_ESM]
EN

Stack Overflow用户
提问于 2022-02-12 15:28:10
回答 1查看 2.7K关注 0票数 4

我的项目是,完全作为CommonJS模块编写,我不打算更改它。问题是,--我在使用gulp时必须使用ESM的库。

出现此情况的文件:

代码语言:javascript
运行
复制
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

这是节点给出的错误。

代码语言:javascript
运行
复制
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的话,如何使用commonJS来包含它呢?这个是可能的吗?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-02-12 16:54:52

若要从CommonJS代码导入ES模块,请使用动态进口

ES模块导入是异步的:在创建gulp流之前,您必须确保gulp导入已经完成。这可以通过gulp.series来实现。

代码语言:javascript
运行
复制
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的默认导出,因为它是动态导入的。

票数 5
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/71093220

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档