Как правильно создать gulp файл под сборку с babel для es6? сборка переводит класс с require который не работает в браузере

335
26 сентября 2017, 08:51

Здравствуйте. Хочу делать сборку с gulp-babel, вроде как оно пересобирает проект под старый стандарт, но классы пересоздает с каким-то "require", и браузер в консоли выдает ошибку.

вот файл gulp:

'use strict' 
const gulp = require('gulp'); 
const babel = require('gulp-babel'); 
gulp.task('es6', () => { 
	return gulp.src('js/*.js') 
		.pipe(babel({ 
			presets: ['es2015'] 
		})) 
		.pipe(gulp.dest('build')); 
}); 
gulp.task('default', ['es6'],() => { 
	gulp.watch('js/*.js',['es6']) 
});

на выходе получаем 2 файла:

'use strict'; 
 
var _user = require('./user'); 
 
var _user2 = _interopRequireDefault(_user); 
 
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 
 
var user = new _user2.default('oleg'); 
 
user.showName(); 
 
//И юзер  
 
"use strict"; 
 
Object.defineProperty(exports, "__esModule", { 
    value: true 
}); 
 
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 
 
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 
 
var User = function () { 
    function User(name) { 
        _classCallCheck(this, User); 
 
        this.name = name; 
        this.age = 14; 
    } 
 
    _createClass(User, [{ 
        key: "showName", 
        value: function showName() { 
            alert(this.name); 
        } 
    }]); 
 
    return User; 
}(); 
 
exports.default = User;

Что может быть не так?

READ ALSO
как узнать какое событие происходит в данный момент когда ГУГЛ переводчик виджет переводит сайт на другой язык

как узнать какое событие происходит в данный момент когда ГУГЛ переводчик виджет переводит сайт на другой язык

Куда нужно посмотреть чтобы увидеть какое событие происходит в момент перевода страницы?

310
es6-class. Объявление метода через new

es6-class. Объявление метода через new

Новый синтаксис классов позволяет объявлять методы через 'new'?

234
hasAttribute -VS- getAttribute

hasAttribute -VS- getAttribute

Тут есть решённая задача - http://plnkrco/edit/FaKoF0M4QQB1OSdtpClb?p=preview

304