web-dev-qa-db-ja.com

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});    
};

私の目標は：

  1. eS5コードを取得するために、Babelを介して上記を渡します
  2. モジュールをwebpackでパックする
  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'
            }
        ]        
    }
}

これはある程度機能しているようです。

だから、私はそれを行うことができます：

devtools breakpoint screenshot

F11をクリックしてコードを入力できますが、BaseModelを評価できません：

erro in console evaluation

これは、デバッグの目的（または目的の1つ）を無効にします。

試してみました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
  • すべて正常に動作します。

enter image description here

サイドノート2：この?sourceMaps=trueは何もしないようです。なぜなら、webpackからソースマップ設定を削除すると、ソースマップは保存/生成されないからです。まったく。最初の、バベルで作成されたソースマップが結果のファイルに保存されることが予想されます。いや。

どんな提案でも大歓迎です

javascriptdebuggingecmascript-6webpackbabeljs
63
ZenMaster

これは 現在シンボル名のマッピングをサポートしていない のJavascriptソースマップ、およびES2105モジュール構文からCommonJSにコンパイルするときにimport- edモジュールの名前を変更するbabelの問題です。 。

Babelは、ES2015モジュール エクスポートバインディング という事実を完全にサポートするためにこれを行います。インポート時ではなく、コードで使用されるときは常にインポートへのすべての参照を解決します。

バインディングのエクスポートに依存するモジュールを作成していない場合（おそらく、CommonJSで実際にこれを行うことができなかったため）、ES2015をトランスコンパイルするときに変数名を保持することをお勧めします。変数名を保持するBabel 6のネイティブbabel commonjsモジュール変換の代替を作成しました： babel-plugin-transform-es2015-modules-commonjs-simple 。これは、ネイティブのbabel変換である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は、代替バージョンを使用するため、モジュール変換をnot含める標準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'

結果のコードはインポートの名前を変更しないため、ソースマップを使用してデバッグすると、シンボルにアクセスできます。

26
Jamie Treworgy

オリジナルではなく、コンパイルされた変数名を使用する必要があります。ソースマップでは、ブラウザはコンパイルされたコードに対応するソースコードのみを表示できます。コンパイルされたコードの元の変数名をブラウザーに解決させることはできません。

コンパイルされた変数名を表示するには、コンパイルされたソースに切り替えるか、右側の[スコープ変数]ペインを確認します。これにより、現在のスコープに存在する変数が表示されます。

IIRC Babelはモジュール名の前に_を付ける傾向があるため、BaseModel変数はおそらく_baseModelまたは類似の名前になります。

6
Jordan Running

私は声明を追加することでいくつかの成功を収めました

デバッガ;

angularまたは* .vueのようなvue2のフレームワークファイルでも、javascript/TypeScriptファイルで

そのため、ファイルが変換、変更、名前変更されたり、URLへのパスマッピングが機能しない場合でも、デバッガーはステップ実行します。

1
1P0