Javascript 尝试使用imagemin webp将图像转换为webp，但不起作用

我在一个网站上找到了一个将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();

当我运行node index.js时，我会记录您在照片中看到的消息

---

这里的问题在于

错误[ERR\u REQUIRE\u ESM]：必须使用导入来加载ES模块

NodeJS中有两种类型的模块：和

CommonJS使用

const webp=require（“imagemin webp”）

语法

而ESM使用

从“imagemin webp”导入webp

语法来实现相同的结果

您的

index.js

是CommonJS，是ESM，当您尝试使用

require（）

调用导入ESM模块时，会出现错误

有两种可能的解决方案：

• 将您的

  index.js

  从CommonJS转换为ESM（首选）
• 使用异步

  import（）

  调用而不是

  require（）

  从CommonJS导入ESM模块

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

• 将

  index.js

  重命名为

  index.mjs

  （

  .mjs

  扩展名表示ESM语法）
• 将所有

  require（）

  调用更改为

  import something from'library'

  calls
• 将其作为

  节点索引.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();

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();

第二个选项是使用异步

import（）

调用从CommonJS模块导入ESM模块，如NodeJS中所示

它不是首选的，因为

import（）

是异步的，我想使用

await

获得类似

await import（）

的结果，但这反过来需要在另一个

async

函数中调用

index.js

：

// 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();

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();

附言。

---

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

这是最好的解释！非常感谢你！