插件定义 PostCSS 配置 JS 文件中 require 与空对象 ({}) 之间的区别？

Question

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

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

然而，其他 PostCSS 示例（例如来自解释 的函数形式的PostCSS CLI 文档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 = (ctx) => ({
  map: ctx.options.map,
  parser: ctx.options.parser,
  plugins: {
    'postcss-import': { root: ctx.file.dirname },
    cssnano: ctx.env === 'production' ? {} : false,
  },
})

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

Answer 1

这是新旧语法

（为了向后兼容，两者都适用）

推荐使用字符串一，括号内为选项。

例如Next.js 文档说：

不要用于require()导入 PostCSS 插件。插件必须以字符串形式提供。