Share
En el flujo de trabajo moderno de hoy, el código que creamos en nuestros entornos de desarrollo es considerablemente diferente del código de producción, después de ejecutarlo a través de compilación, minificación, concatenación o varios otros procesos de optimización..
Aquí es donde los mapas de origen entran en juego, señalando el mapeo exacto en nuestro código de producción al código original creado. En este tutorial introductorio, tomaremos un proyecto simple y lo ejecutaremos a través de varios compiladores de JavaScript con el fin de jugar con mapas de origen en el navegador.
Los mapas de origen ofrecen una forma independiente del idioma de asignar el código de producción al código original que se creó..
Los mapas de origen ofrecen una forma independiente del lenguaje de asignar el código de producción al código original que se creó en su entorno de desarrollo. Cuando finalmente observamos el código base, generado y preparado para la producción, resulta muy difícil ubicar exactamente dónde se encuentra la asignación de líneas a nuestro código original creado. Sin embargo, durante la compilación, un mapa de origen almacena esta información, de modo que, cuando consultamos una sección de línea, ¡nos devolverá la ubicación exacta en el archivo original! Esto ofrece una gran ventaja para el desarrollador, ya que el código se vuelve legible, e incluso se puede depurar.!
En este tutorial, tomaremos una porción muy simple de código JavaScript y SASS, los ejecutaremos a través de varios compiladores y luego veremos nuestros archivos originales en el navegador con la ayuda de los mapas de origen. Adelante, descargue los archivos de demostración y comencemos.!
Tenga en cuenta que, al escribir este artículo, Chrome (versión 23) admite los mapas de origen de JavaScript e incluso los mapas de origen de SASS. Firefox también debería obtener soporte en un futuro próximo, ya que actualmente se encuentra en una etapa activa de desarrollo. Con esa palabra de precaución fuera del camino, ahora veamos cómo podemos aprovechar los mapas de origen en el navegador!
Primero, debemos habilitar el soporte en Chrome, usando los siguientes pasos simples:
Si desea trabajar junto con este tutorial, descargue la demostración y abra el directorio "inicio". Los archivos y la estructura del directorio son bastante básicos, con algunos JavaScript simples en scripts / script.js. Debes poder abrir index.html e incluso agregar algunos nombres de color CSS o valores hexadecimales para modificar el color de fondo.
$ arbol. ├── index.html ├── scripts │ ├── jquery.d.ts │ ├── script.coffee.coffee │ ├── script.js │ └── script.typescript.ts └── estilos ├─ ─ style.css └── style.sass
Eche un vistazo a los sencillos archivos de script en JavaScript plano, TypeScript o CoffeeScript. Usando varios compiladores de JavaScript, crearemos una versión lista para producción, así como también generaremos los mapas fuente correspondientes..
En las siguientes secciones, usaremos cinco formas diferentes de generar un compilado y minificado script.js, junto con el mapa fuente asociado. Puede elegir probar todas las opciones o simplemente ir con el compilador con el que ya está familiarizado. Estas opciones incluyen:
Closure Compiler, de Google, es una herramienta para optimizar JavaScript. Lo hace analizando su código, eliminando bits irrelevantes y luego reduciendo el resto. Además de eso, también puede generar mapas de origen.
Vamos a usar los siguientes pasos para crear una versión optimizada de script.js, utilizando el compilador de cierre:
Accentsconagua
compiler.jar, al directorio, guiones.guiones, desde la línea de comandos, y ejecute lo siguiente, de modo que se optimice, listo para producción script.closure.js Se creará el archivo: java -jar compiler.jar --js script.js --js_output_file script.closure.js
index.html ahora está vinculado con el archivo recién creado, scripts / script.closure.js, sin comentar la opción A.
Cuando abrimos index.html en el navegador y navegue hasta el Panel de origen en las herramientas del desarrollador, solo la versión optimizada de script.closure.js es referenciado No tenemos manera de establecer una relación con nuestro original, correctamente sangrado. A continuación, creamos el archivo de mapa de origen ejecutando el siguiente comando en el guiones directorio:
java -jar compiler.jar --js script.js --create_source_map script.closure.js.map --source_map_format = V3 --js_output_file script.closure.js
Note que Closure Compiler toma dos opciones., --crear_source_map y --source_map_format, para crear un archivo de mapa de origen, script.closure.js.map, con el mapa de origen versión 3. A continuación, agregue la url del mapa de origen al final del archivo de script compilado, script.closure.js, para que el archivo optimizado contenga la información de ubicación del mapa de origen:
// @ sourceMappingURL = script.closure.js.map
Ahora, cuando veamos el proyecto en el navegador, el directorio de "scripts", en el Panel de origen de las herramientas del desarrollador, mostrará tanto el archivo original como la versión optimizada, script.closure.js. Aunque el navegador, por supuesto, está utilizando el archivo optimizado al que hicimos referencia originalmente en index.html, Los mapas de origen nos permiten crear una conexión con el archivo original..
Además, inténtelo con puntos de interrupción para la depuración, pero tenga en cuenta que las expresiones de observación y las variables aún no están disponibles con los mapas de origen. Con suerte, estarán en el futuro.!
Si ya usa Grunt.js para los procesos de compilación, entonces el complemento Grunt para mapas de origen de JSMin será útil. No solo optimizará su código, sino que también creará el mapa de origen!
Los siguientes pasos demostrarán cómo crear una versión optimizada de script.js con el complemento Grunt JSMin:
grunt.js, Dentro de la raíz del directorio "Inicio": $ npm install -g grunt $ npm ver grunt version npm http GET https://registry.npmjs.org/grunt npm http 200 https://registry.npmjs.org/grunt 0.3.17 $ grunt init: gruntfile
node_modules / grunt-jsmin-sourcemap se creará: $ npm install grunt-jsmin-sourcemap
grunt.js archivo para contener solamente el jsmin-sourcemap tarea - mantener las cosas lo más simples posible. module.exports = function (grunt) grunt.loadNpmTasks ('grunt-jsmin-sourcemap'); grunt.initConfig ('jsmin-sourcemap': all: src: ['scripts / script.js'], dest: 'scripts / script.jsmin-grunt.js', destMap: 'scripts / script.jsmin- grunt.js.map '); grunt.registerTask ('predeterminado', 'jsmin-sourcemap'); ; gruñido; esto ejecutará la tarea jsmin-sourcemap, ya que la tarea predeterminada se indica como tal dentro del archivo grunt.js: $ grunt Ejecutando la tarea "jsmin-sourcemap: all" (jsmin-sourcemap) Hecho, sin errores.
script.grunt-jsmin.js.map, asegurarse de que la fuente es "fuentes": ["script.js"]. script.grunt-jsmin.js, dentro index.html, y abrir en el navegador.Con Grunt y el complemento, jsmin-sourcemap, el proceso de creación creó dos archivos: el archivo de script optimizado con la url de asignación de origen en la parte inferior, así como un mapa de origen. Necesitará ambos para poder verlos todos en el navegador..
UglifyJS2 es otro analizador, minfier y compresor de JavaScript. De manera similar a las dos alternativas anteriores, UglifyJS2 creará un archivo de script optimizado, añadido con una url de asignación de origen, así como un archivo de asignación de origen que contendrá la asignación al archivo original. Para usar UglifyJS, ejecute lo siguiente en la línea de comando del directorio "inicio":
uglify-js, en la zona; un directorio, llamado nocde_module / uglify-js, se creará. $ npm instalar uglify-js $ npm ver uglify-js versión 2.2.3 $ cd scripts /
--mapa fuente y --salida, para nombrar el archivo de salida. uglifyjs --source-map script.uglify.js.map --output script.uglify.js script.js
index.html está correctamente vinculado al guión, script.uglify.js 
Para las tres opciones anteriores, solo requerimos una optimización de un paso, desde el código original hasta el JavaScript optimizado. Sin embargo, para lenguajes como CoffeeScript, necesitamos un proceso de dos pasos: CoffeeScript> JavaScript> JavaScript optimizado. En esta sección, exploraremos cómo crear mapas de origen multinivel con CoffeeScript y el compilador de CoffeeScript Redux.
Desplácese hasta el directorio, "inicio", en la línea de comandos. En los siguientes pasos, asignaremos el archivo de script optimizado a CoffeeScript:
script.coffee.coffee, para crear una versión de JavaScript simple, usando el siguiente comando: $ coffee -c scripts / script.coffee.coffee
$ git clone https://github.com/michaelficarra/CoffeeScriptRedux.git coffee-redux $ cd coffee-redux $ npm install $ make -j test $ cd ...
script.coffee.js.map, que retendrá la información de mapeo del JavaScript generado al archivo de CoffeeScript: $ coffee-redux / bin / coffee --source-map -i scripts / script.coffee.coffee> scripts / script.coffee.js.map
script.coffee.js, tiene la url de mapeo de origen al final con la siguiente línea: // @ sourceMappingURL = script.coffee.js.map
script.coffee.js.map, tiene el archivo de referencia correcto como "archivo": "script.coffee.coffee", y el archivo fuente como "fuentes": ["script.coffee.coffee"] $ cd scripts / $ uglifyjs script.coffee.js -o script.coffee.min.js --source-map script.coffee.min.js.map --in-source-map script.coffee.js.map
script.coffee.min.js.map, tiene el archivo de referencia correcto como "archivo": "script.coffee.min.js", y las fuentes correctas como "fuentes": ["script.coffee.coffee"].
TypeScript, al igual que CoffeeScript, también requiere un proceso de dos pasos: TypeScript> Plain JavaScript> Minified JavaScript. Debido a que el script usa un complemento de jQuery, necesitamos dos archivos de TypeScript, que ya se proporcionan: script.typescript.ts y jquery.d.ts.
Navegue al directorio de "scripts" desde la línea de comandos y ejecute el siguiente comando:
$ tsc script.typescript.ts -sourcemap
El comando anterior creará un nuevo archivo de JavaScript, llamado script.typescript.js, con la url de mapeo de origen en la parte inferior: // @ sourceMappingURL = script.typescript.js.map. Con este comando único, también creará el archivo de mapa, script.typescript.js.map.
Al igual que con el ejemplo de CoffeeScript, el siguiente paso es utilizar UglifyJS.
$ uglifyjs script.typescript.js -o script.typescript.min.js --source-map script.typescript.min.js.map --in-source-map script.typescript.js.map
Finalmente, asegúrese de que index.html enlaces al archivo de script correcto, scripts / script.typescript.min.js, y abrirlo en el navegador!
Más allá de JavaScript, actualmente, Chrome también admite mapas de origen SASS o SCSS. Para la asignación de origen de SASS, modifiquemos algunas configuraciones en Chrome y luego compilemos SASS a CSS con parámetros de depuración:
@media -sass-debug-info que tendrá la información en el nombre de archivo y el número de línea. $ cd styles / $ sass --debug-info --watch style.sass: style.css
Además de simplemente ver el archivo SASS, si está ejecutando LiveReload en segundo plano y realiza cambios en el archivo SASS, la página también se actualizará para reflejar los cambios. Por ejemplo, abramos el proyecto en Firefox e inspeccionemos la página con la extensión Firebug.
Si vemos alguno de los *.mapa archivos, contendrá la información de mapeo del archivo original al archivo optimizado. La estructura de un mapa de origen suele estar en formato JSON, utilizando las especificaciones de la Versión 3. Por lo general, contendrá las siguientes cinco propiedades:
Los mapas de origen todavía están en desarrollo activo, pero ya hay algunos recursos excelentes disponibles en la web. Asegúrese de considerar lo siguiente, si desea obtener más información.
Espero que el recorrido anterior, utilizando compiladores múltiples, haya demostrado el potencial de los mapas de origen. Aunque la funcionalidad actualmente es limitada, con suerte, en el futuro, tendremos capacidad de depuración completa, incluido el acceso a variables y expresiones..
