未捕获的类型错误：没有“新”就无法调用类构造函数 ScratchStorage答案

【问题标题】：Uncaught TypeError: Class constructor ScratchStorage cannot be invoked without 'new'未捕获的类型错误：没有“新”就无法调用类构造函数 ScratchStorage
【发布时间】：2019-03-12 13:17:45
【问题描述】：

当我在下面的代码中使用包clipcc-storage 时，控制台抛出了错误Uncaught TypeError: Class constructor ScratchStorage cannot be invoked without 'new'。之前我根据Stack Overflow中的回答禁用了包中的ES6模块转换，但是不起作用。我该怎么办？

ps：包可以在npmjs.com找到

import ScratchStorage from 'clipcc-storage';

import defaultProject from './default-project';

// eslint-disable-next-line no-warning-comments
/**
 * Wrapper for ScratchStorage which adds default web sources.
 * @todo make this more configurable
 */
class Storage extends ScratchStorage {
    constructor () {
        super();
        this.cacheDefaultProject();
    }
    addOfficialScratchWebStores () {
        this.addWebStore(
            [this.AssetType.Project],
            this.getProjectGetConfig.bind(this),
            this.getProjectCreateConfig.bind(this),
            this.getProjectUpdateConfig.bind(this)
        );
        this.addWebStore(
            [this.AssetType.ImageVector, this.AssetType.ImageBitmap, this.AssetType.Sound],
            this.getAssetGetConfig.bind(this),
            // We set both the create and update configs to the same method because
            // storage assumes it should update if there is an assetId, but the
            // asset store uses the assetId as part of the create URI.
            this.getAssetCreateConfig.bind(this),
            this.getAssetCreateConfig.bind(this)
        );
        this.addWebStore(
            [this.AssetType.Sound],
            asset => `static/extension-assets/scratch3_music/${asset.assetId}.${asset.dataFormat}`
        );
    }
    setProjectHost (projectHost) {
        this.projectHost = projectHost;
    }
    setProjectUploadHost (projectUploadHost) {
        this.projectUploadHost = projectUploadHost;
    }
    getProjectGetConfig (projectAsset) {
        return `${this.projectHost}${projectAsset.assetId}.json`;
    }
    getProjectCreateConfig () {
        return {
            url: `${this.projectUploadHost}`,
            withCredentials: true
        };
    }
    getProjectUpdateConfig (projectAsset) {
        return {
            url: `${this.projectUploadHost}${projectAsset.assetId}`,
            withCredentials: true
        };
    }
    setAssetHost (assetHost) {
        this.assetHost = assetHost;
    }
    getAssetGetConfig (asset) {
        return `${this.assetHost}${asset.assetId}.${asset.dataFormat}`;
    }
    getAssetCreateConfig (asset) {
        return {
            // There is no such thing as updating assets, but storage assumes it
            // should update if there is an assetId, and the asset store uses the
            // assetId as part of the create URI. So, force the method to POST.
            // Then when storage finds this config to use for the "update", still POSTs
            method: 'post',
            url: `${this.projectUploadHost}/asset/create/${asset.assetId}?type=${asset.dataFormat}`,
            withCredentials: true
        };
    }
    setTranslatorFunction (translator) {
        this.translator = translator;
        this.cacheDefaultProject();
    }
    cacheDefaultProject () {
        const defaultProjectAssets = defaultProject(this.translator);
        defaultProjectAssets.forEach(asset =>
            this.builtinHelper._store(
                this.AssetType[asset.assetType],
                this.DataFormat[asset.dataFormat],
                asset.data,
                asset.id
            )
        );
    }
}

const storage = new Storage();

export default storage;

【问题讨论】：

标签： javascript

【解决方案1】：

这个问题是由 ES5-ES6 转译问题引起的，你可能需要单独转译 ScratchStorage 和其他代码，取决于你的工具，配置不同，对我来说使用 vue 只需更改 vue.config.js 并添加

transpileDependencies: ['scratch-storage'],

您可以查看this post 了解更多技术信息

【讨论】：