插件定义 PostCSS 配置 JS 文件中 require VS empty object ({}) 的区别？

Question

有点直截了当的问题，在PostCSS 文档中似乎没有非常明确的答案。 我注意到在PostCSS 使用指南中，他们使用 require 语句定义了postcss.config.js文件插件，如下所示：

// postcss.config.js
module.exports = {
  plugins: [
    require('precss'),
    require('autoprefixer')
  ]
}

然而，其他 PostCSS 示例，例如来自PostCSS CLI 文档的解释 function 形式的postcss.config.js ，它们对插件使用不同的语法

module.exports = (ctx) => ({
  map: ctx.options.map,
  parser: ctx.options.parser,
  plugins: {
    'postcss-import': { root: ctx.file.dirname },
    cssnano: ctx.env === 'production' ? {} : false,
  },
})

还有其他在线教程也遵循此语法

module.exports = {
  plugins: {
    "postcss-import": {},
    "postcss-preset-env": {}
  }
};

我想我的问题是......为什么插件在一个地方使用require('<name>')数组定义，而在另一个地方使用键控 object 使用空对象作为值{} ？ 有任何功能差异吗？ 这个比那个好吗？

Answer 1

它是新旧语法

（为了向后兼容两者都有效）

推荐的是字符串一，括号内有选项。

例如Next.js 文档说：

不要使用require()来导入 PostCSS 插件。 插件必须作为字符串提供。