I'm trying to write a library that can be both required and imported.'ve found different approaches online, which are as follows:

{
  "main": "mylib-cjs.js",
  "module": "mylib-esm.js"
}

and

{
  "exports": {
    "import": "mylib-esm.js",
    "require": "mylib-cjs.js"
  }
}

What are the pros and the cons of both approaches, and how do they differ?