Estoy trabajando en mi primera biblioteca de TypeScript (en realidad, es incluso mi primera biblioteca de JavaScript) que se usa en el front-end. En esencia, debe exponer una función que recibe un elemento DOM y le agrega otro elemento DOM como elemento secundario.

Me gustaría usar Webpack para agrupar la biblioteca y durante la configuración de la misma y TypeScript me topé con los sistemas de módulos . Y me están confundiendo.

En tsconfig.json puedo definir qué sistema de módulos se debe usar en el código compilado, si entiendo correctamente:

 { "compilerOptions": { "module": "es6" } }

Y en webpack.config.js puedo establecer un objetivo deseado para mi biblioteca usando output.library.type , donde puedo especificar nuevamente un sistema de módulo:

 module.exports = { output: { library: { name: 'my-lib', type: 'umd', } },

Solo necesito que mi biblioteca se pueda instalar a través de npm/yarn:

 $ yarn add my-lib

Y consumible a través de una declaración de importación como esa:

 import { myFunc } from 'my-lib';

Hasta ahora todo bien, con esta configuración parece hacer lo que quiero. Pero no entiendo lo que estoy haciendo aquí. De ahí las preguntas: ¿Cuál es la diferencia entre las dos opciones de configuración del sistema del módulo (la de la configuración de TypeScript y la de la configuración de Webpack)? ¿Y qué configuraciones son apropiadas para mi caso de uso ?