He heredado un poco de un sistema heredado que usa Gulp, y estoy tratando de incorporar mecanografiado, esmodules y una mejor gestión de dependencias. Me estoy encontrando con un obstáculo con las bibliotecas de JavaScript que requieren css. En los marcos modernos basados en paquetes web, creo que implementan las importaciones de css en js al inyectar cualquier css importado en el encabezado en una etiqueta de estilo grande. Estoy tratando de hacer algo similar con Gulp.
Me gustaría poder convertir esto:
// src/index.html <html> <head> </head> <body> <input type="text" /> <!-- in src test.bundle.js is actually test.bundle.ts, but gets converted to js by gulp --> <script src="js/test.bundle.js"></script> </body> </html>A esto:
//dist/index.html <html> <head> <!-- This style auto-generated by gulp --> <style>... anything imported from js modules</style> </head> <body> <input type="text" /> <script src="js/test.bundle.js"></script> </body> </html> // src/test.bundle.ts import $ from 'jquery'; import 'jquery-typeahead'; //importing a css/scss file would inject it into the head in a style tag for any html page that brings in this script with <script src="js/test.bundle.js"></script> import 'node_modules/jquery-typeahead/dist/jquery.typeahead.min.css'; ...Si debo repensar mi estrategia, también estoy abierto a eso. El sistema actual no es una aplicación de una sola página con un punto de entrada, por lo que cada página html se carga de forma aislada y Gulp debe tratar cada página como independiente.
Aquí hay un POC que tiene la transpilación de ts funcionando para cada página independiente, pero no una solución funcional para la importación de css: https://codesandbox.io/s/intelligent-dubinsky-oyc41?file=/src/test.bundle.ts