1

Webpack、Babel、React を使用した Hello World の例があります。Chrome DevTools でブレークポイントを設定すると、Chrome はインポートされたすべてのシンボルが現在のスコープで未定義であると表示します。

コードを実行すると、期待どおりに動作します。React は「Hello, World!」を正常にレンダリングします。問題は、Chrome が間違ったスコープを認識していることです。

編集:これは、Webpack が変数の名前を変更するために発生します。より快適にデバッグできるように、変数名を保存するにはどうすればよいですか?

私のwebpack構成は以下の通りです。

var path = require('path');
var webpack = require('webpack');
var BrowserSyncPlugin = require('browser-sync-webpack-plugin');

var public_dir = __dirname + '/public';

module.exports = {
    entry: './behavior/house/entry.jsx',

    cache: true,
    debug: true,
    devtool: 'source-map',

    output: {
        path: __dirname + '/public',
        filename: 'behavior.js',
        sourceMapFilename: 'behavior.js.map'
    },

    resolve: {
        extensions: ['', '.js', '.jsx'],
        root: [
            path.resolve('./behavior/house'),
            path.resolve('./behavior/vendor')
        ]
    },
    devServer: {
        contentBase: public_dir,
        filename: 'behavior.js',
        host: '0.0.0.0',
        colors: true,
        noInfo: true
    },
    plugins: [
        new BrowserSyncPlugin({
            host: 'localhost',
            port: 3000,
            server: { baseDir: [public_dir] }
        })
    ],
    module: {
        preLoaders: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'source-map'
            }
        ],
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                cacheable: true,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'react'],
                    retainLines: true,
                    cacheDirectory: true
                }
            }
        ]
    }
};
4

1 に答える 1

1

私もそれに気づきました。スコープ内の変数のリストを見ると、インポートは_Reactまたはのように表示されます_react2。

すべてのファイルを一緒にバンドルするときに、webpack がいくつかの変数の名前を変更しているようです。ソースマップはブレークポイントの同期を維持しますが、コンソールは変数名を es6 ソース コードにマッピングしません。

于 2016-02-22T02:56:31.587 に答える