웹팩, ES6 및 Babel로 디버깅

웹팩, 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});    
};

내 목표는 :

1. 위의 내용을 Babel을 통해 전달하여 ES5 코드를 얻습니다.
2. 웹팩으로 모듈 포장
3. 결과를 디버깅 할 수있다

몇 가지 평가판 후 이것은 내가 가지고있는 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

• 모두 제대로 작동합니다.

Side note 2: this ?sourceMaps=true doesn't seem to do anything at all, since, if I remove source map configuration from webpack - no source maps are preserved/generated at all. One would expect the initial, Babel-produced, source maps to be preserved in the resulting files. Nope.

Any suggestions would be greatly appreciated

---

This is an issue with Javascript source maps, which don't currently support mapping symbol names, and babel, which changes the names of import-ed modules when compiling to CommonJS from ES2105 module syntax.

Babel does this to fully support the fact that ES2015 modules export bindings by resolving all references to imports whenever they are used in code, instead of at import time.

If you aren't writing modules that depend on exporting bindings (as is likely, since you couldn't actually do this with CommonJS), then you may prefer to preserve variable names when transpiling ES2015. I created an alternative to the native babel commonjs module transform for Babel 6 that preserves variable names: babel-plugin-transform-es2015-modules-commonjs-simple. This is a drop-in replacement for babel-plugin-transform-es2015-modules-commonjs, the native babel transform.

You can use this with webpack or node. A typical config might be:

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

The module babel-preset-es2015-webpack is a fork of the standard es2015 preset that does not include the module transform, because you want to use the alternate version. This works for node also. These modules are used in .babelrc:

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

transform-runtime is usually a good idea to include in any substantive project to avoid extra repetition of generated code. Typical module config in webpack.config.js:

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

The resulting code won't change the names of imports, so debugging with source maps will provide you with access to symbols.

---

You'll need to use the compiled variable names, not the originals. Source maps only allow the browser to display the source code that corresponds to the compiled code; they can't make the browser resolve original variable names from the compiled code.

To see the compiled variable names, either switch to the compiled source, or look in the Scope Variables pane on the right, which will show you (like it says on the tin) what variables exist in the current scope.

IIRC Babel은 모듈 이름에 접두사를 붙이는 경향이 _있으므로 BaseModel변수가 호출 _baseModel되거나 유사합니다.

---

나는 진술을 추가하여 좋은 성공을 거두었습니다.

디버거;

* .vue와 같은 angular 또는 vue2의 프레임 워크 파일에서도 javascript / typescript 파일에서

따라서 파일이 변환되거나 변경되거나 이름이 변경되거나 URL에 대한 경로 매핑이 작동하지 않더라도 디버거는 계속 진행됩니다.

참고 URL : https://stackoverflow.com/questions/32211649/debugging-with-webpack-es6-and-babel