Отладка с помощью 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, которая у меня есть:

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

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

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

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

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

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

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

безрезультатно.

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

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

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

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

Любые предложения будут очень признательны

Ответ 1

Это проблема с исходными картами Javascript, которые в настоящее время не поддерживают отображение имен символов и babel, что изменяет имена 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, преобразование родного Babel.

Вы можете использовать это с помощью webpack или node. Типичная конфигурация может быть:

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

Модуль babel-preset-es2015-webpack является fork стандартного предустановленного es2015, который не включает модульное преобразование, потому что вы хотите использовать альтернативную версию. Это работает и для node. Эти модули используются в .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'

Полученный код не изменит имена импорта, поэтому отладка с исходными картами предоставит вам доступ к символам.

Ответ 2

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

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

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

Ответ 3

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

отладчик;

в файлах javascript/ typescript даже в файлах фрейма angular или vue2 like *.vue

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