尝试使用 imagemin-webp 将图像转换为 webp 但无法正常工作

Question

我在网站上找到了将 png、jpg 转换为 webp 的代码，但它对我不起作用。我在 /images/ 文件夹中有两个 jpg 文件

const imagemin = require("imagemin"),
  webp = require("imagemin-webp");
const outputFolder = "./images/webp";
const produceWebP = async () => {
  await imagemin(["images/*.png"], {
    destination: outputFolder,
    plugins: [
      webp({
        lossless: true,
      }),
    ],
  });
  console.log("PNGs processed");
  await imagemin(["images/*.{jpg,jpeg}"], {
    destination: outputFolder,
    plugins: [
      webp({
        quality: 65,
      }),
    ],
  });
  console.log("JPGs and JPEGs processed");
};
produceWebP();

当我运行节点index.js我拍下你在照片中看到的信息

Answer 1

这里的问题在 Error [ERR_REQUIRE_ESM]: Must use import to load ES Module.

NodeJS 中有两种类型的模块：CommonJS and ECMAScript modules (ESM)。

CommonJS 使用 const webp = require("imagemin-webp") 语法。

而 ESM 使用 import webp from "imagemin-webp" 语法来实现相同的结果。

您的 index.js 是 CommonJS，imagemin npm module 是 ESM，当您尝试使用 require() 调用导入 ESM 模块时出现错误。

对此有两种可能的解决方案：

将您的 index.js 从 CommonJS 转换为 ESM（首选）
使用异步 import() 调用而不是 require() 从 CommonJS 导入 ESM 模块

第一个（也是首选）选项 是将您的代码转换为 ESM：

将 index.js 重命名为 index.mjs（.mjs 扩展名表示 ESM 语法）
将所有 require() 次调用更改为 import something from 'library' 次调用
运行等于 node index.mjs

index.mjs:

// using ES import syntax here
import imagemin from "imagemin";
import webp from "imagemin-webp";
// the rest of the file is unchanged
const outputFolder = "./images/webp";
const produceWebP = async () => {
    await imagemin(["images/*.png"], {
        destination: outputFolder,
        plugins: [
            webp({
                lossless: true,
            }),
        ],
    });
    console.log("PNGs processed");
    await imagemin(["images/*.{jpg,jpeg}"], {
        destination: outputFolder,
        plugins: [
            webp({
                quality: 65,
            }),
        ],
    });
    console.log("JPGs and JPEGs processed");
};
produceWebP();

第二个选项 是使用异步 import() 调用从 NodeJS docs.

中指示的 CommonJS 模块导入 ESM 模块

它不是首选，因为 import() 是异步的，我想使用 await 来获得像 await import() 这样的结果，但这又需要在另一个内部调用async 函数。

index.js:

const outputFolder = "./images/webp";
const produceWebP = async () => {
    // Load ESM modules using import(),
    // it returns a Promise which resolves to
    // default export as 'default' and other named exports.
    // In this case we need default export.
    const imagemin = (await import("imagemin")).default;
    const webp = (await import("imagemin-webp")).default;
    await imagemin(["images/*.png"], {
        destination: outputFolder,
        plugins: [
            webp({
                lossless: true,
            }),
        ],
    });
    console.log("PNGs processed");
    await imagemin(["images/*.{jpg,jpeg}"], {
        destination: outputFolder,
        plugins: [
            webp({
                quality: 65,
            }),
        ],
    });
    console.log("JPGs and JPEGs processed");
};
produceWebP();

P.S. 请注意，ESM 可以导出多个条目（默认和命名导出），而 CommonJS 只能导出一个条目。

尝试使用 imagemin-webp 将图像转换为 webp 但无法正常工作

trying to convert images to webp with imagemin-webp but not working

javascript

imagemin-webp