ES6（babel + webpack）類方法中的靜默錯誤

Question

問題 ：

我使用一個webpack捆綁包來定位和運輸ES6。

我想在沒有try / catch塊的情況下捕獲錯誤。 我如何獲得此消息，原因是什么讓異常保持沉默？ 這個問題不僅在constructor（）方法中存在。 類的任何方法都會像這樣默默地發出錯誤

import React from 'react';
class TestComponent extends React.Component {
    constructor(props) {
        super(props);
        /*
            Try/catch block works fine.
            "test is not defined(…)" 
        */
        try {
            test.fake(1);
        } catch (e) {
            console.error(e);
        }
        // Line below should theoretically throw exception but it does not 
        test.fake(1);
    }
    render() {
        return <div>TEST</div>
    }
}
export default TestComponent;   

這是我的webpack.config

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    devtool: 'cheap-module-eval-source-map',
    //devtool: 'eval',
    entry: [
        'webpack-dev-server/client?http://localhost:3000',
        'webpack/hot/only-dev-server',
        './src/js/main'
    ],
    output: {
        filename: 'app.js',
        path: path.join(__dirname, 'dist'),
        publicPath: '/assets/'
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new ExtractTextPlugin('app.css', {
            allChunks: true
        }),
        new webpack.DefinePlugin({
            __DEV_TOOLS__: true
        }),
        new HtmlWebpackPlugin({
            title: 'Redux Boilerplate',
            filename: 'index.html',
            template: 'index.template.html'
        })
    ],
    resolve: {
        root: path.resolve('./src/js')
    },
    module: {
        loaders: [
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass')
            }, {
                test: /\.js$/,
                loaders: ['babel'],
                exclude: /node_modules/
            }
        ]
    },
    cssnext: {
        browsers: 'last 2 versions'
    }
};

Answer 1

Webpack會編譯而不編譯您的代碼。 當您對上述內容進行反編譯時，沒有語法問題或缺少要求，因此webpack只需通過babel運行該代碼並將其編譯到EC5。 您可能想要尋找在編譯后實際執行代碼的加載程序或插件。 更好的是，將webpack與gulp或karma結合使用，以獲得完整的解決方案。 我們使用這樣的東西。 https://github.com/webpack/karma-webpack