反应。 ES6。 Babelify（w / Browserify）。导入别名失败

Question

所以

这是班级Foo

class Foo
{
    constructor(bar) {
        this.bar = bar;
    }

    getBar() {
        return this.bar;
    }
}

export default Foo;

在布局组件中，我想将其导入并将其别名为Bar（根据规范https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import）。

import React from 'react';
import {Foo as Bar} from './../Entity/Foo.js';

class Layout extends React.Component {
    constructor(props) {
        super(props);

        this.bar = new Bar('alias test');
    }

    render() {
        console.debug(this.bar.getBar());

        return <p>Hello, world!</p>;
    }
} 

export default Layout;

在gulp构建之后我得到了这个错误。

为什么别名不起作用的任何想法？

PS。 Alias，不起作用，但我仍然可以从类Foo创建对象。 此外，这种解决方法也可以使用

import {Foo as FakeBarEntity} from './../Entity/Foo.js'; const BarEntity = Foo;
import Foo from './../Service/Foo.js'; const BarService = Foo;

但这没什么，但意大利面条代码。

PPS。 Gulp任务

gulp.task('build', function () {
    var b = browserify({
        entries: 'src/Index.jsx',
        extensions: ['.jsx'],
        debug: false
    });

    return b.transform(babelify, {presets: ["es2015", "react"]})
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('dist'));
});