Отладка с помощью webpack, ES6 и Babel

Question

Отладка с помощью webpack, ES6 и Babel

это похоже на то, что должно было быть относительно просто достичь, но увы.

у меня есть класс ES6:

'use strict';



export class BaseModel {  

    constructor(options) {

        console.log(options);

    }

};

и корневой модуль, который использует его:

'use strict';



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



export let init = function init() {

    console.log('In Bundle');

    new BaseModel({a: 30});    

};

моя цель-это:

передайте выше через Babel, чтобы получить код ES5

упакуйте модули с webpack

уметь отлаживать результат

после некоторого испытания, это webpack config, который у меня есть:

{

    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'

            }

        ]        

    }

}

это, кажется, работает, в какой-то степени.

Итак, я могу это сделать:

devtools breakpoint screenshot

Я могу нажать F11 и ввести код, но я не могу оценить BaseModel:

erro in console evaluation

который своего рода побеждает цель (или одну из целей) отладки.

я пробовал добавлять source-map-loader в различном порядке с babel-loader:

{

    test: /.js$/,

    loader: "source-map-loader"

}

нет выгода.

Примечание 1: если я откажусь от webpack и просто скомпилирую свои модули с исходными картами через Babel, скажем, в систему.js:

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

все работает правильно.

enter image description here

примечание 2: это ?sourceMaps=true кажется, вообще ничего не делает, так как, если я удалю конфигурацию исходной карты из webpack - никакие исходные карты не сохраняются/не генерируются вообще. Можно было бы ожидать, что начальный, Babel-произведенные, исходные карты, которые будут сохранены в результирующих файлах. Нет.

любые предложения были бы весьма признательны

841 3

javascript babeljs debugging ecmascript-6 webpack

3 ответов:

Comments

Ничего не найдено.

Jamie Treworgy · Accepted Answer · 2016-03-14 14:55:33

это проблема с исходными картами Javascript, которые в настоящее время не поддерживает отображение имен символов, и Вавилон, который меняет имена import-ed модули при компиляции в CommonJS из синтаксиса модуля ES2105.

Babel делает это, чтобы полностью поддержать тот факт, что модули ES2015 экспорт привязки путем разрешения всех ссылок для импорта, когда они используются в коде, а не во время импорта.

если вы не пишете модули это зависит от экспорта Привязок (как, вероятно, так как вы не могли сделать это с CommonJS), то вы можете предпочесть сохранить имена переменных при транспилировании ES2015. Я создал альтернативу собственному преобразованию модуля babel commonjs для Babel 6, которое сохраняет имена переменных:babel-plugin-transform-es2015-modules-commonjs-simple. Это капля-в замене для babel-plugin-transform-es2015-modules-commonjs, родное вавилонское преобразование.

вы можете использовать это с webpack или узел. Типовое значение конфигурация может быть:
npm install --save-dev babel-preset-es2015-webpack
npm install --save-dev babel-plugin-transform-es2015-modules-commonjs-simple
модуль babel-preset-es2015-webpack является вилкой стандартного пресета es2015, который делает не включить модуль преобразования, потому что вы хотите использовать альтернативную версию. Это работает и для узла. Эти модули используются в .babelrc:
{
    "presets": [
        "es2015-webpack"
    ],
    "plugins": [
        "transform-runtime",
        ["transform-es2015-modules-commonjs-simple", {
            "noMangle": true
        }]
    ]
}
transform-runtime обычно это хорошая идея, чтобы включить в любой основной проект, чтобы избежать дополнительного повторения сгенерированного кода. Типичная конфигурация модуля в webpack.config.js:
module: {
    loaders: [
        {
            loader: "babel-loader",
            include: [path.resolve(__dirname, "src")]                
        }
    ]
},
devtool: '#inline-source-map'
в результате код не изменит имена импорта, поэтому отладка с исходными картами предоставит вам доступ к символам.

Jordan Running · Accepted Answer · 2015-08-25 22:05:19

вам нужно будет использовать скомпилированные имена переменных, а не оригиналы. Исходные карты позволяют браузеру отображать только исходный код, соответствующий скомпилированному коду; они не могут заставить браузер разрешать исходные имена переменных из скомпилированного кода.

чтобы увидеть имена скомпилированных переменных, либо переключитесь на скомпилированный источник, либо посмотрите в области переменных справа, которая покажет вам (как говорится на tin), какие переменные существуют в текущем масштаб.

IIRC Babel имеет тенденцию префиксировать имена модулей с _, Так как BaseModel переменная, вероятно, называется _baseModel или аналогичные.

1P0 · Accepted Answer · 2017-12-20 21:45:46

Я имел некоторый хороший успех, добавив заявление

отладчиком;

в ваших файлах javascript / typescript даже в файлах фреймворка angular или vue2, таких как *.vue

поэтому, даже если файл будет преобразован или изменен или переименован, или ваши сопоставления пути к URL-адресу не работают, отладчик все равно сделает шаг.