web-dev-qa-db-fra.com

Débogage avec webpack, ES6 et Babel

Cela semble être quelque chose qui aurait dû être relativement simple à réaliser, mais hélas.

J'ai la classe ES6:

'use strict';

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

et le module racine qui l'utilise:

'use strict';

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

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

Mon objectif est:

  1. passer ce qui précède à travers Babel pour obtenir le code ES5
  2. emballe les modules avec webpack
  3. être capable de déboguer le résultat

Après quelques essais, voici la configuration webpack que j'ai:

{
    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'
            }
        ]        
    }
}

Cela semble fonctionner, dans une certaine mesure.

Donc, je peux faire ça:

devtools breakpoint screenshot

Je peux cliquer sur F11 et entrer le code, mais je ne peux pas évaluer BaseModel:

erro in console evaluation

ce qui annule en quelque sorte le but (ou l'un des buts) du débogage.

J'ai essayé d'ajouter source-map-loader dans un ordre différent avec babel-loader:

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

en vain.

Note 1: si j'abandonne webpack et compile simplement mes modules avec les cartes source via Babel dans, disons, System.js:

babel src/ --out-dir public/js/ --debug --source-maps inline --modules system
  • tout fonctionne correctement.

enter image description here

Note latérale 2: this ?sourceMaps=true ne semble rien faire du tout, car si je supprime la configuration de la carte source de Webpack, aucune carte source n'est conservée/générée. On pourrait s’attendre à ce que les cartes source initiales, produites par Babel, soient conservées dans les fichiers résultants. Nan.

Toute suggestion serait grandement appréciée

javascriptdebuggingecmascript-6webpackbabeljs
63
ZenMaster

Ceci est un problème avec les cartes source Javascript, qui ne supporte pas actuellement les noms de symbole de mappage , et babel, qui modifie le nom des modules import- ed lors de la compilation vers le module CommonJS à partir du module ES2105. syntaxe.

Babel fait cela pour supporter pleinement le fait que les modules ES2015 liaisons d'exportation en résolvant toutes les références aux importations chaque fois qu'elles sont utilisées dans du code, au lieu de les importer.

Si vous n'écrivez pas de modules qui dépendent de l'exportation de liaisons (comme cela est probablement le cas, car vous ne pouvez pas le faire avec CommonJS), vous préférerez peut-être conserver les noms de variables lors de la transposition de ES2015. J'ai créé une alternative à la transformation de module babel commonjs native pour Babel 6 qui conserve les noms de variable: babel-plugin-transformation-es2015-modules-commonjs-simple . Ceci est un remplacement instantané pour babel-plugin-transform-es2015-modules-commonjs, la transformation babel native.

Vous pouvez l'utiliser avec webpack ou node. Une configuration typique pourrait être:

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

Le module babel-preset-es2015-webpack est un fork du préréglage es2015 standard qui n'inclut pas la transformation du module, car vous souhaitez utiliser la version de remplacement. Cela fonctionne pour le noeud également. Ces modules sont utilisés dans .babelrc:

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

transform-runtime est généralement une bonne idée d’inclure tout projet important pour éviter une répétition supplémentaire du code généré. Configuration de module typique dans webpack.config.js:

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

Le code résultant ne changera pas les noms des importations, donc le débogage avec les cartes sources vous donnera accès aux symboles.

26
Jamie Treworgy

Vous devrez utiliser les noms de variable compilés, pas les originaux. Les cartes source permettent uniquement au navigateur d’afficher le code source correspondant au code compilé; ils ne peuvent pas obliger le navigateur à résoudre les noms de variable d'origine à partir du code compilé.

Pour voir les noms de variables compilées, basculez vers la source compilée ou consultez le volet Variables de l'étendue à droite, qui vous indiquera (comme il est dit dans l'étain) les variables présentes dans l'étendue actuelle.

IIRC Babel a tendance à préfixer les noms de modules avec _, votre variable BaseModel s'appelle donc probablement _baseModel ou similaire.

6
Jordan Running

J'ai eu un bon succès en ajoutant la déclaration

débogueur;

dans vos fichiers javascript/TypeScript même dans les fichiers de structure de angular ou vue2 comme * .vue

Ainsi, même si le fichier est converti, modifié ou renommé ou si les mappages de chemin d'accès vers l'URL ne fonctionnent pas, le débogueur continuera quand même.

1
1P0