Depuración con webpack, ES6 y Babel

Question

Depuración con webpack, ES6 y Babel

Esto parece algo que debería haber sido relativamente simple de lograr, pero por desgracia.

Tengo la clase ES6:

'use strict';

export class BaseModel {  
    constructor(options) {
        console.log(options);
    }
};

Y el módulo raíz que lo usa:

'use strict';

import {BaseModel} from './base/model.js';

export let init = function init() {
    console.log('In Bundle');
    new BaseModel({a: 30});    
};

Mi objetivo es:

pase lo anterior a través de Babel, para obtener el código ES5
empaquete los módulos con webpack
ser capaz de depurar el resultado

Después de alguna prueba, esta es la configuración de webpack que tengo:

{
    entry: {
        app: PATH.resolve(__dirname, 'src/bundle.js'),
    },
    output: {
        path: PATH.resolve(__dirname, 'public/js'),
        filename: 'bundle.js'
    },        
    devtool: 'inline-source-map',
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel'
            }
        ]        
    }
}

Esto parece ser trabajando, hasta cierto punto.

Entonces, puedo hacer eso:

Puedo hacer clic en F11 e introducir el código, pero no puedo evaluar BaseModel:

Que anula un poco el propósito (o uno de los propósitos) de la depuración.

He intentado añadiendo source-map-loader en varios orden con babel-loader:

{
    test: /\.js$/,
    loader: "source-map-loader"
}

En vano.

Nota al margen 1: si abandono webpack y solo compilo mis módulos con mapas de origen a través de Babel en, digamos, Sistema.js:

babel src/ --out-dir public/js/ --debug --source-maps inline --modules system

todo funciona correctamente.

Nota al margen 2: esto ?sourceMaps=true no parece hacer nada en absoluto, ya que, si elimino la configuración del mapa de origen de webpack, no se conservan ni generan mapas de origen. Uno esperaría que los mapas de origen iniciales, producidos por Babel, se conservaran en los archivos resultantes. No.

Cualquier sugerencia sería muy apreciada

58

javascript ecmascript-6 webpack debugging babeljs

Author: ZenMaster, 2015-08-25

Source

3 answers

Necesitará usar los nombres de las variables compiladas, no los originales. Los mapas de origen solo permiten que el navegador muestre el código fuente que corresponde al código compilado; no pueden hacer que el navegador resuelva los nombres de variables originales a partir del código compilado.

Para ver los nombres de las variables compiladas, cambie a la fuente compilada, o mire en el panel Variables de ámbito a la derecha, que le mostrará (como dice en el tin) qué variables existen en el ámbito actual.

IIRC Babel tiende a prefijar los nombres de los módulos con _, por lo que su variable BaseModel probablemente se llame _baseModel o similar.

6

Author: Jordan Running,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-08-25 19:05:19

Tuve un buen éxito al agregar la declaración

Depurador;

En sus archivos javascript/typescript incluso en archivos de marco de angular o vue2 como *.vue

Así que incluso si el archivo se convierte, cambia o cambia de nombre o sus asignaciones de ruta a la URL no funcionan, el depurador seguirá el paso de todos modos.

1

Author: 1P0,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-12-20 19:45:46

score 21 · Accepted Answer

Este es un problema con los mapas fuente de Javascript, que actualmente no admiten nombres de símbolos de asignación, y babel, que cambia los nombres de los módulos import-ed al compilar a CommonJS desde la sintaxis del módulo ES2105.

Babel hace esto para apoyar plenamente el hecho de que los módulos ES2015exportan enlaces resolviendo todas las referencias a las importaciones siempre que se utilicen en código, en lugar de en el momento de la importación.

Si no está escribiendo módulos que dependen de la exportación enlaces (como es probable, ya que en realidad no podría hacer esto con CommonJS), entonces puede preferir preservar los nombres de variables al transpilar ES2015. Creé una alternativa a la transformación nativa del módulo babel commonjs para Babel 6 que preserva los nombres de las variables: babel-plugin-transform-es2015-modules-commonjs-simple. Este es un reemplazo drop-in para babel-plugin-transform-es2015-modules-commonjs, la transformada nativa de babel.

Puede usar esto con webpack o node. Una configuración típica podría ser:

npm install --save-dev babel-preset-es2015-webpack
npm install --save-dev babel-plugin-transform-es2015-modules-commonjs-simple

El module babel-preset-es2015-webpack es una bifurcación del preset estándar es2015 que no incluye la transformación del módulo, porque desea usar la versión alternativa. Esto también funciona para node. Estos módulos se utilizan en .babelrc:

{
    "presets": [
        "es2015-webpack"
    ],
    "plugins": [
        "transform-runtime",
        ["transform-es2015-modules-commonjs-simple", {
            "noMangle": true
        }]
    ]
}

transform-runtime por lo general, es una buena idea incluir en cualquier proyecto sustantivo para evitar la repetición adicional del código generado. Configuración típica del módulo en webpack.config.js:

module: {
    loaders: [
        {
            loader: "babel-loader",
            include: [path.resolve(__dirname, "src")]                
        }
    ]
},
devtool: '#inline-source-map'

El código resultante no cambiará los nombres de las importaciones, por lo que la depuración con mapas de origen le proporcionará con acceso a símbolos.