Object.assign 不是函数

Question

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

这是gulp代码

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

这是 class 文件

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

Answer 1

我想您已经知道，Google Chrome 使用 V8, which supports ECMAScript 5th edition. Object.assign 是在 ECMAScript 第六版中引入的。

为了使用这些添加，你需要 include the ES6 polyfill 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

安装babel-core：

$ npm install babel-core --save-dev

将 polyfill 模块导入您的 js:

import 'babel-core/polyfill';

使用 babel 编译你的代码！

Object.assign 不是函数

Object.assign is not a function

javascript

ecmascript-6

gulp

babeljs