El año pasado publiqué una serie de entradas en las que explicaba un proceso para estructurar y crear una librería TypeScript. Explicando al final de esta un proceso para crear con Webpack un único archivo JavaScritp con toda la librería. Lo que nos permite usar el código creado en navegador y otros proyectos JavaScritp. El único problema de este archivo es que perdemos las definiciones de tipos, por lo que si usamos este archivo en otro proyecto TypeScript no tendremos las definiciones de tipos de nuestras funciones. Algo que nos puede complicar el desarrollo. En esta entrada vamos a ver como crear un único archivo de tipos de una librería TypeScript gracias a un plugin de Webpack.
Instalación del plugin de Webpack: npm-dts-webpack-plugin
En esta ocasión vamos a continuar con el proyecto tslane que está disponible en la cuenta de GitHub de Analytics Lane. Para obtener más detalle de cómo se estrujar este proyecto se puede consultar la serie de entradas con las que se creó.
Una vez descargado el proyecto procederemos a instalar con npm el plugin de Webpack npm-dts-webpack-plugin, para lo que solamente deberemos escribir en la terminal, dentro de la carpeta del proyecto, el siguiente comando:
npm install npm-dts-webpack-plugin --save-dev
En el caso de que nos acabemos de descargar la plantilla, este comando también instalará el resto de las dependencias del proyecto.
Configuración del npm-dts-webpack-plugin
Una vez instalado el plugin solamente tendremos que abrir el archivo webpack.config.js en la raíz del proyecto en importar el mismo. Para lo que simplemente agregaremos al principio del archivo la siguiente línea.
const NpmDtsPlugin = require('npm-dts-webpack-plugin')Una vez hecho esto iremos a la configuración de los plugins y agregaremos una instancia de la clase que hemos importado, algo similar a lo que se muestra en la siguiente línea
plugins: […, new NpmDtsPlugin()]
Ahora, cuando compilamos el proyecto se creará un único archivo index.d.ts con las definiciones del mismos.
Modificar el nombre de archivo con las definiciones
Es posible que no nos interese que el archivo se llame index.d.ts o se guarde en la raíz del proyecto. Algo que tienen fácil solución ya que se le puede pasar al constructor NpmDtsPlugin un objeto con la propiedad output en la que se puede indicar el nombre del archivo, por ejemplo
plugins: […, new NpmDtsPlugin({ output: './dist/tslane.d.ts' })]Conclusiones
En esta entrada hemos visto cómo crear de un único archivo de tipos de una librería TypeScript de la que hemos creado un bundle con Webpack. Aunque lo mejor es usar la librería como un módulo, esta solución también nos permite aprovechar las ventajas de TypeScript.
El proyecto completo, con los cambios que se ha introducido en esta entrada, se pueden descargar desde el repositorio de GitHub.
Deja una respuesta