问题描述

我正在使用 babel 和 gulp 并在 ES6 中创建一个简单的 DOM 库.但是在运行之后，当我要使用它时，我在 chrome 控制台中得到了 Object.assign is not a function .

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.

这是 gulp 代码

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

这是类文件

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

        this.length = elements.length;

        Object.assign(this, elements);
    }

    ...

}

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

我在客户端使用它，例如 dom('#elId');

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

推荐答案

我怀疑你已经知道，谷歌浏览器使用 V8，支持 ECMAScript 第 5 版.Object.assign 在 ECMAScript 第 6 版中引入.

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

为了使用这些添加，你需要包含 Babel 提供的 ES6 polyfill:

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

这将模拟一个完整的 ES6 环境.[...]

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

可从 babel-core npm 版本中的 browser-polyfill.js 文件获得.这需要包含在所有编译的 Babel 代码之前.您可以将其添加到已编译的代码中，也可以将其包含在 <script> 之前.

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.

这篇关于Object.assign 不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！