Object.assign is not a function

Question

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');

Answer 1

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.

Answer 2

1. Install babel-core:

$ npm install babel-core --save-dev

2. Import polyfill module into your js:

import 'babel-core/polyfill';

3. Use babel to compile your code!