14

I'm using babel with gulp and create a simple DOM library in ES6. But after running and when i'm going to use it, I got the Object.assign is not a function in chrome console.

this is the gulp code

gulp.task('scripts', function() {
    return gulp.src(src + 'js/*.js')
      .pipe(babel())
      .pipe(concat('main.js'))
      .pipe(gulp.dest(dest + 'js'));
});

this is the class file

class DOM {
    constructor( selector ) {
        var elements = document.querySelectorAll(selector);

        this.length = elements.length;

        Object.assign(this, elements);
    }

    ...

}

const dom = selector => new DOM(selector);

and I'm using it in client side like dom('#elId');

TIJ
  • 2,771
  • 3
  • 19
  • 32
  • Where is that error coming from? All the code you show is from the gulp (node?) script, but your error if from Chrome. Show the relevant code – Amit Aug 01 '15 at 17:43
  • Please, do not use `concat` on Babel output. JS files are modules, they are not meant to be concatenated together. Use a bundler like browserify w/ babelify so you get the proper module behavior. – loganfsmyth Aug 01 '15 at 17:58
  • error is coming from the browser. – TIJ Aug 01 '15 at 17:59

2 Answers2

28

As I suspect you already know, Google Chrome uses V8, which supports ECMAScript 5th edition. Object.assign is introduced in ECMAScript 6th edition.

In order to use these additions, you need to include the ES6 polyfill provided by Babel:

This will emulate a full ES6 environment. [...]

Available from the browser-polyfill.js file within a babel-core npm release. This needs to be included before all your compiled Babel code. You can either prepend it to your compiled code or include it in a <script> before it.

Community
  • 1
  • 1
Jacob Budin
  • 9,753
  • 4
  • 32
  • 35
13
  1. Install babel-core:

$ npm install babel-core --save-dev

  1. Import polyfill module into your js:

import 'babel-core/polyfill';

  1. Use babel to compile your code!
Amo Wu
  • 2,507
  • 2
  • 18
  • 22