Tengo varios paquetes npm publicados que he actualizado para proporcionar compilaciones commonjs y esm. Algunos de los paquetes pueden ser tanto para el nodo como para el navegador. Todos los paquetes compilados con webpack o rollup. Todos están escritos a máquina y transpilados a un directorio dist .
Creo un archivo commonjs index.js que se parece a esto:
'use strict' if (process.env.NODE_ENV === 'production') { module.exports = require('./react-abortable-fetch.cjs.production.min.js') } else { module.exports = require('./react-abortable-fetch.cjs.development.js') } Establecí el campo main de package.json en el archivo index.js anterior.
También genero un archivo .esm.js para cada paquete y configuro los campos del browser y del module en el archivo esm.js y configuro el type de archivo para que sea module .
El resultado final es algo como esto:
"type": "module", "main": "dist/index.js", "browser": "dist/react-abortable-fetch.esm.js", "module": "dist/react-abortable-fetch.esm.js", "types": "dist/index.d.ts",El problema con este enfoque es que solo los paquetes esm pueden consumirlo (a menos que me equivoque).
¿Cuál es la mejor manera de configurar el archivo package.json para que los paquetes que aún no han dado el salto (y son bastantes) aún puedan consumir el paquete?
La idea es aprovechar las exportaciones condicionales de Node.js para personalizar el comportamiento de importación según cómo importe el módulo ( require o import ).
Para tener dos interfaces diferentes para CommonJS y ESM, puede:
import y require para su biblioteca en la misma aplicación, lo que podría causar comportamientos no deseados e impredecibles)require un módulo ECMAScript cuando tiene await de nivel superior) Por lo tanto, debe configurar CommonJS como un destino de transpilación de TypeScript y luego crear un contenedor ESM (preferiblemente en una carpeta dedicada). Finalmente, asigne los puntos de entrada CommonJS y ESM a los archivos correspondientes en el package.json :
"exports": { "require": "./index.js", "import": "./esm/index.js" }He publicado un proyecto de trabajo mínimo aquí: https://github.com/Guerric-P/demo-commonjs-esm
Para usar las bibliotecas en TypeScript, también necesita un archivo .d.ts aparte de cada archivo JavaScript.