Fuente de Mapas 101 | Envato Tuts+

() translation by (you can also view the original English article)

En moderno flujo de trabajo de hoy, el código que nos autor en nuestros entornos de desarrollo es considerablemente diferente del código de la producción, después de ejecutar a través de la compilación, minification, concatenación o varios otros procesos de optimización.

Esto es donde los mapas fuente entran en juego, señalando la asignación exacta en nuestro código al código original de autor. En este tutorial de introducción, a tomar un proyecto simple y recorren varios compiladores de JavaScript a los efectos de jugar con los mapas de fuente en el navegador.

¿Qué Fuente de Mapas?

Fuente mapas ofrecen una forma independiente del lenguaje de asignación de código al código original que fue escrito.

Fuente mapas ofrecen una forma independiente del lenguaje de asignación de código al código original que se creó en el entorno de desarrollo. Cuando finalmente nos fijamos en la base de código, generado y preparados para la producción, se convierte en muy difícil localizar exactamente dónde está la asignación de línea de nuestro código original del autor. Sin embargo, durante la compilación, un mapa de la fuente almacena esta información, para que, cuando consulta una sección de línea, devolverá la ubicación exacta en el archivo original a nosotros! Esto ofrece una gran ventaja para el programador, el código, entonces se convierte en legible - e incluso depurable!

En este tutorial, voy un poco muy simple de código JavaScript y SASS, ejecutar a través de varios compiladores y ver nuestros archivos originales en el navegador con la ayuda de mapas de fuente. ¡Seguir adelante y descargar los archivos de la versión parcial de programa y vamos a empezar!

Navegadores

Tenga en cuenta que, mientras escribía este artículo, Chrome (versión 23) soporta JavaScript Fuente Mapas e incluso Mapas de Fuente SASS. Firefox también debe ganar soporte en el futuro, como lo es actualmente en una fase activa de desarrollo. Con esa palabra de la precaución de, ahora veamos cómo podemos tomar ventaja de los mapas de fuente en el navegador!

Mapas de Fuente en Chrome

Primero, debemos habilitar el soporte en Chrome, siguiendo estos simples pasos:

Herramientas para desarrolladores de Chrome abierto: Ver-> desarrollador-> herramientas para desarrolladores
Haga clic en la corona de "Configuración" en la esquina inferior derecha
Seleccione a "General" y seleccione "Activar mapas de fuente"

Programa de instalación

Si desea trabajar junto con este tutorial, descarga la demo y abra el directorio "Inicio". Los archivos y la estructura de directorios es bastante básica, con algunos JavaScript simple en scripts/script.js. Usted debe ser capaz de abrir index.html e incluso añadir algunos nombres de los colores CSS o valores hexadecimales para modificar el color de fondo.


$ tree
.
├── index.html
├── scripts
│   ├── jquery.d.ts
│   ├── script.coffee.coffee
│   ├── script.js
│   └── script.typescript.ts
└── styles
    ├── style.css
    └── style.sass

Echa un vistazo a través de los archivos de comandos simples en JavaScript, mecanografiado o CoffeeScript. Usando varios compiladores de JavaScript, va crear una versión lista para producción, así como generar los correspondientes mapas de fuente.

En las secciones siguientes, utilizamos cinco maneras diferentes para generar un script.js compilado y miniaturizada, junto con el mapa de la fuente asociada. Usted puede optar por probar todas las opciones, o simplemente ir con el compilador que ya está familiarizado con. Estas opciones incluyen:

Opción A: Closure Compiler

Closure Compiler, por Google, es una herramienta para la optimización de JavaScript. Lo hace analizando el código, quitando pedacitos de irrelevantes y luego minifying el resto. Además de eso, también puede generar mapas de fuente.

Vamos a usar los pasos siguientes para crear una versión optimizada de script.js, utilizando el compilador de cierre:

Descargar el Closure compiler más reciente.
Transferencia del archivo, compiler.jar, al directorio, scripts.
Desplácese hasta el directorio, scripts, desde la línea de comandos y ejecute el siguiente, por lo que se creará un archivo optimizado, listo para la producción script.closure.js:
1
2

java -jar compiler.jar --js script.js --js_output_file script.closure.js
Asegurar que index.html está ahora vinculado con el archivo recién creado, scripts/script.closure.js, por descomentando opción A.

Cuando abra index.html dentro del navegador y navegue al Panel de fuente en las herramientas de desarrollador, sólo la versión optimizada de script.closure.js se hace referencia; no tenemos manera de hacer una relación de nuestra original, correctamente indentado. Vamos a crear a continuación el archivo de mapa de fuente ejecutando el siguiente comando en el directorio de scripts:

1
2	java -jar compiler.jar --js script.js --create_source_map script.closure.js.map --source_map_format=V3 --js_output_file script.closure.js

Aviso que Closure Compiler en dos opciones,-create_source_map y --source_map_format, para crear un mapa de fuente del archivo, script.closure.js.map, con la versión del mapa de fuente 3. A continuación, añada la dirección url de mapeo de la fuente al final de la secuencia de comandos compilada del archivo, script.closure.js, para que el archivo optimizado contiene la información de ubicación del mapa fuente:

1
2	//@ sourceMappingURL=script.closure.js.map

Ahora, cuando consideramos que el proyecto en el explorador, el directorio "scripts", en el Panel de origen de las herramientas de desarrollador, mostrará tanto el original archivo así como la versión optimizada, script.closure.js. Aunque el navegador claro está utilizando el archivo optimizado que nos hace referencia originalmente en index.html, mapas de fuente nos permiten crear una conexión con el archivo original.

Además, probar con puntos de interrupción para depurar, pero tenga en cuenta que ver expresiones y variables aún no están disponibles con los mapas de la fuente. ¡Que sean en el futuro!

Opción B: GruntJS Task de JSMin

Si ya utilizas Grunt.js para procesos de fabricación, entonces el plugin Grunt para fuente de mapas JSMin va a venir bien. No sólo optimizar el código, sino que también creará el mapa fuente!

Los pasos siguientes demostrará cómo crear una versión optimizada de script.js con el plugin de JSMin ronco:

Grunt.js de instalar e iniciar un gruntfile, grunt.js, dentro de la raíz del directorio "Inicio":


$ npm install -g grunt
$ npm view grunt version
npm http GET https://registry.npmjs.org/grunt
npm http 200 https://registry.npmjs.org/grunt
0.3.17
$ grunt init:gruntfile

Instalar el Grunt plugin grunt-jsmin-sourcemap; cuando lo haga, un directorio llamado node_modules/grunt-jsmin-sourcemap se creará:
1
2

$ npm install grunt-jsmin-sourcemap

Edite el archivo grunt.js recién creado para contener sólo la tarea sourcemap jsmin - para mantener las cosas tan simples como sea 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('default', 'jsmin-sourcemap');
};

Volver a la línea de comandos y ejecute grunt; Esto ejecutará la tarea jsmin sourcemap, como la tarea predeterminada se indica como tal dentro del archivo grunt.js:
1
2

$ grunt
3

Running "jsmin-sourcemap:all" (jsmin-sourcemap) task
4
5

Done, without errors.
En el mapa fuente recién creado archivo, script.grunt-jsmin.js.map, asegurarse de que la fuente es "sources":["script.js"].
Descomente la opción B para enlazar con el archivo recién creado, script.grunt-jsmin.js, dentro de index.html y abrir en el navegador.

Con ronco y el plugin, jsmin sourcemap, el proceso de compilación creado dos archivos: el archivo de script optimizado con la url de la asignación de fuente en la parte inferior, así como un mapa de la fuente. Se necesita ambas para ver todos ellos en el explorador.

Opción C: UglifyJS

UglifyJS2 es otro JavaScript parser, minfier y compresor. Similar a las dos alternativas anteriores, UglifyJS2 creará un archivo de script optimizado, con un origen de asignación de dirección url, así como un archivo fuente que contiene la asignación al archivo original. Para utilizar UglifyJS, ejecute lo siguiente en la línea de comandos del directorio "Inicio":

Instalar el módulo de la nueva gestión pública, uglify-js, localmente; se creará un directorio, llamado nocde_module/uglify-js.
1
2

$ npm install uglify-js
3

$ npm view uglify-js version
4

2.2.3
5

$ cd scripts/
Dentro del directorio "scripts", podrá ejecutar el comando para crear una versión optimizada, así como un archivo de código fuente con las opciones, --source-map y --output, a nombre del archivo de salida.
1
2

uglifyjs --source-map script.uglify.js.map --output script.uglify.js script.js
Por último, asegúrese de que index.html está correctamente vinculado a la escritura, script.uglify.js

Opción D: CoffeeScript Redux

Para las tres opciones anteriores, sólo se requiere una optimización de un solo paso, el código original de JavaScript optimizado. Sin embargo, para los idiomas como CoffeeScript, necesitamos un proceso de dos pasos: CoffeeScript > JavaScript > Optimización JavaScript. En esta sección, exploraremos cómo crear fuentes de mapas Multi-Level con CoffeeScript y el compilador de CoffeeScript Redux.

Paso 1: CoffeeScript a Simple JavaScript

Desplácese hasta el directorio, "Inicio", en la línea de comandos. En los siguientes pasos, asignará el archivo script optimizado a la CoffeeScript:

Instalar CoffeeScript como paquete global npm package
Compilar el archivo CoffeeScript, script.coffee.coffee, para crear una versión simple de JavaScript, utilizando el siguiente comando:
1
2

$ coffee -c scripts/script.coffee.coffee

Instalar CoffeeScript Redux:


$ git clone https://github.com/michaelficarra/CoffeeScriptRedux.git coffee-redux
$ cd coffee-redux
$ npm install
$ make -j test
$ cd ..

A continuación, crearemos un archivo de mapa de origen, script.coffee.js.map, que contendrá la información de la cartografía desde el JavaScript generado hacia el archivo CoffeeScript:
1
2

$ coffee-redux/bin/coffee --source-map -i scripts/script.coffee.coffee > scripts/script.coffee.js.map
Asegúrese de que el archivo de JavaScript generado, script.coffee.js, tiene la url de la asignación de la fuente al final con la siguiente línea:
1
2

//@ sourceMappingURL=script.coffee.js.map
Asegúrese de que el archivo de mapa de origen, script.coffee.js.map, tiene el archivo correcto de referencia como "file":"script.coffee.coffee" y el archivo de origen como "sources":["script.coffee.coffee"]

Paso 2: JavaScript Plano a JavaScript Minimizado

Por último, vamos a utilizar UglifyJS nuevo minify el JavaScript generado, así como crear un mapa de la fuente. Esta vez, tendrá en un mapa de la fuente para que podamos devolver al archivo original de CoffeeScript. Ejecute el siguiente comando en el directorio "scripts":
1
2

$ cd scripts/
3

$ uglifyjs script.coffee.js -o script.coffee.min.js --source-map script.coffee.min.js.map --in-source-map script.coffee.js.map
Por último, asegúrese de que el archivo de mapa de origen, script.coffee.min.js.map, tiene el archivo correcto de referencia como "file":"script.coffee.min.js" y las fuentes correctas como "sources":["script.coffee.coffee"].

Opción E: TypeScript

TypeScript, al igual que CoffeeScript, también requiere de un proceso de dos pasos: TypeScript > JavaScript simple > Minified JavaScript. Porque el script usa un plugin de jQuery, necesitamos dos archivos de TypeScript, que ya son: script.typescript.ts y jquery.d.ts.

Paso 1: TypeScript a JavaScript

Desplácese hasta el directorio "scripts" de la línea de comandos y ejecute el siguiente comando:

1
2	$ tsc script.typescript.ts -sourcemap

El comando anterior crea un nuevo archivo de JavaScript, llamado script.typescript.js, con la url de la asignación de fuente en la parte inferior: / / @ sourceMappingURL=script.typescript.js.map. Con este comando solo, también creará el archivo de mapa, script.typescript.js.map.

Paso 2: JavaScript en JavaScript Minimizado

Como con el ejemplo de CoffeeScript, el siguiente paso es utilizar UglifyJS.

1
2	$ 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 a la escritura correcta del archivo, scripts/script.typescript.min.js y abren en el navegador!

Fuentes de Mapas para SASS

Más allá de JavaScript, en la actualidad, Chrome soporta también SASS o fuente SCSS mapas. Para la asignación de fuente SASS, vamos a modificar unas cuantas opciones en cromo y luego compilar SASS a CSS con parámetros de depuración:

Antes de cambiar cualquier configuración, tenga en cuenta que, tras inspeccionar un elemento de las herramientas para desarrolladores, sólo nos mostrará la referencia de archivo CSS. Esto no es demasiado útil.
Vaya a chrome://flags/.
Permiten experimentos de herramientas para desarrolladores.
Abrir herramientas Dev > ajuste > experimentos > Compruebe "Apoyo para SASS".
Compilar SASS con los parámetros de depuración de seguimiento en el directorio de "estilos". Esto anteponga a cada conjunto de reglas de CSS con @media-sass-depuración-info que la información sobre el nombre del archivo y el número de línea.
1
2

$ cd styles/
3

$ sass --debug-info --watch style.sass:style.css
Asegúrese de reiniciar las herramientas de desarrollador y actualice la página.
Ahora, cuando inspeccione un elemento, podemos acceder al archivo original de SASS!

Más allá de simplemente ver el archivo SASS, si ejecuta el LiveReload en el fondo y realizar cambios en el archivo SASS, la página también se actualizará para reflejar los cambios. Por ejemplo, vamos a abrir el proyecto en Firefox y revise la página, utilizando la extensión Firebug.

Información Dentro de una Fuente de Mapa

Si consideramos que cualquiera de los archivos *.map, contendrá la información de asignación del archivo original en el archivo optimizado. La estructura del mapa fuente es normalmente en el formato JSON, utilizando las especificaciones de la Versión 3. Generalmente contiene las siguientes cinco características:

versión: número de versión del mapa de fuente - típicamente "3."
archivo: Nombre del archivo optimizado.
fuentes: Nombres de los archivos originales.
nombres: Símbolos utilizados para la asignación.
asignaciones: asignación de datos.

Recursos Adicionales

Fuentes de Mapas están todavía bajo desarrollo activo, pero ya hay algunos excelentes recursos disponibles en la web. Asegúrese de considerar lo siguiente, si desea aprender más.

Introducción a JavaScript Fuentes de Mapas por Ryan Seddon, HTML5 Rocks
El Punto de Desempate Episodio 3: JavaScript Fuentes de Mapas por el Equipo de Desarrolladores de Google
El Punto de Desempate Episodio 2: Fuentes de Mapas SASS por el Equipo de Desarrolladores de Google
Wiki Fuentes de Mapas en lenguajes, herramientas, artículos sobre Fuentes de Mapas
Fuentes de Mapas multi Nivel con CoffeeScript y TypeScript por Ryan Seddon
Propuesta de Fuentes de Mapas 3

Conclusión

Espero que el tutorial anterior, usando varios compiladores, ha demostrado el potencial de las fuentes de mapas. Aunque la funcionalidad es actualmente limitada, que, en el futuro, tendremos capacidad de depuración completo, incluido el acceso a las variables y expresiones.

1
2	$ grunt
3	Running "jsmin-sourcemap:all" (jsmin-sourcemap) task
4
5	Done, without errors.

1
2	uglifyjs --source-map script.uglify.js.map --output script.uglify.js script.js

1
2	$ coffee -c scripts/script.coffee.coffee

1
2	$ coffee-redux/bin/coffee --source-map -i scripts/script.coffee.coffee > scripts/script.coffee.js.map