Bigcommerce Stencil：Javascript Windows Safari 和 IE 中的错误 "Object doesn't support property or method 'assign'"

Question

不确定发生了什么，但此错误导致页面无法显示。

错误消息指向我的 bundle.js 文件（带有 webpack、babel 等的模板包），特别是 stencil-utils 包中的 Object.assign() 方法。这是 @bigcommerce/stencil-utils/src/lib/request.js

的第 27 行

这是产生错误的代码部分。

const defaultOptions = {
    method: 'GET',
    remote: false,
    requestOptions: {
        formData: null,
        params: {},
        config: {},
        template: [],
    },
};
const options = Object.assign({}, defaultOptions, opts);
const data = options.requestOptions.formData ? options.requestOptions.formData : options.requestOptions.params;
const headers = {
    'stencil-config': options.requestOptions.config ? JSON.stringify(options.requestOptions.config) : '{}',
    'stencil-options': '{}',
};

知道是什么原因造成的吗？

Answer 1

碰巧您使用的是 Object.assign 方法，并非所有浏览器都支持该方法。 Internet Explorer 和 Safari（Windows）不再正式更新。

总之，这个page里面有一个Object.assign的polyfill。您可以在代码的顶部应用它。

这是我自己的 polyfill，它可以选择性地避免创建 objects/arrays 引用（使用任何其他接口的对象除外，例如 Image，等等...）。

typeof Object.assign !== "function" &&

(function() {

    /**
     * Return main instance of value.
     * @param {...} value
     * @returns 
     */
    function getMainInstance(value) {
        // get instance in this format: [object Instance]
        var ic = Object.prototype.toString.call(value);
        // returns string between '[object ' and ']'
        return ic.substring(ic.indexOf(" ") + 1, ic.lastIndexOf("]")).toLowerCase();
    }


    Object.assign = function(target) {

        /* check if target isn't a object */
        if (typeof target !== "object") target = {};

        /* last target path */
        var lastPath = target;

        /* list containing target paths */
        var locations = [];

        /* consume specific array/object */
        function consume(source) {
            /* iterate each property to copy */
            for (var i in source) {
                var instance = getMainInstance(source[i]);
                if (instance === "object" || instance === "array") {
                    lastPath =
                    lastPath[i] =
                    locations[locations.length] = (instance === "array" ? [] : {})

                    consume(source[i]);

                } else {
                    lastPath[i] = source[i];
                }
            }

            var len = -- locations.length;
            lastPath = locations[--len] || target;

        }

        for (var i = 1, source; source = arguments[i]; i++) {
            if (typeof source === "object") consume(source);
        }

        return target;
    };

})();

Bigcommerce Stencil：Javascript Windows Safari 和 IE 中的错误 "Object doesn't support property or method 'assign'"

Bigcommerce Stencil: Javascript Error "Object doesn't support property or method 'assign'" in Windows Safari and IE

javascript

bigcommerce