Question

我为要创建的食品跟踪器创建的Food类存在问题。可以在一个文件中正常工作，但在另一个文件中却不能。

这是课程：

import uuidv4 from 'uuid/v4'
import moment from 'moment'
import { throwIfNotAString, throwIfNotANumber } from './functions'

class Food {
    constructor(id, ean, createdAt, updatedAt, brand, name, calories, protein, carbohydrate, fat, saturatedFat, multipleUnsaturatedFat, basicUnsaturatedFat, transFat, cholesterol, natrium, potassium, fibers, sugar, portion, portionUnit, portionAmount, names, brands) {
        const timestamp = moment().valueOf()
        this._id = id || uuidv4()
        this._ean = ean || null
        this.createdAt = createdAt || timestamp
        this.updatedAt = updatedAt || timestamp
        this._brand = brand.trim()
        this._name = name.trim()
        this._calories = calories
        this._protein = protein
        this._carbohydrate = carbohydrate
        this._fat = fat
        this._saturatedFat = saturatedFat || null
        this._multipleUnsaturatedFat = multipleUnsaturatedFat || null
        this._basicUnsaturatedFat = basicUnsaturatedFat || null
        this._transFat = transFat || null
        this._cholesterol = cholesterol || null
        this._natrium = natrium || null
        this._potassium = potassium || null                             // Kalium
        this._fibers = fibers || null                                   // Ballaststoffe
        this._sugar = sugar || null
        this._portion = portion || null                                 // e.g. 100
        this._portionUnit = portionUnit || null                         // e.g. 'g'
        this._portionAmount = portionAmount || 1                                         
        this._names = names || []
        this._names.push(this._name)
        this._brands = brands || []
        this._brands.push(this._brand)
    }

    get id() {
        return this._id
    }

    get ean() {
        return this._ean
    }

    get brand() {
        return this._brand
    }

    get name() {
        return this._name
    }

    get calories() {
        return this._calories
    }

    get macronutrients() {
        return {
            protein: this._protein,
            carbohydrate: this._carbohydrate,
            fat: this._fat
        }
    }

    set ean(value) {
        if (typeof value === 'number') {
            this._ean = value
            this.updatedAt = moment().valueOf()
        } else if (typeof value !== 'number') {
            throwIfNotANumber('EAN')
        }
    }

    set brand(value) {
        if (typeof value === 'string') {
            this._brand = value.trim()
            this._brands.push(this._brand)
            this.updatedAt = moment().valueOf()
        } else if (typeof value !== 'string') {
            throwIfNotAString('Brand')
        }
    }

    set name(value) {
        if (typeof value === 'string') {
            this._name = value.trim()
            this._names.push(this._name)
            this.updatedAt = moment().valueOf()
        } else if (typeof valule !== 'string') {
            throwIfNotAString('Name')
        }
    }

    set calories(value) {
        if (typeof value === 'number') {
            this._calories = value
            this.updatedAt = moment().valueOf()
        } else if (typeof value !== 'number') {
            throwIfNotANumber('Calories')
        }
    }

    set protein(value) {
        if (typeof value === 'number') {
            this._protein = value
            this.updatedAt = moment().valueOf()
        } else if (typeof value !== 'number') {
            throwIfNotANumber('Protein')
        }
    }

    set carbohydrate(value) {
        if (typeof value === 'number') {
            this._carbohydrate = value
            this.updatedAt = moment().valueOf()
        } else if (typeof value !== 'number') {
            throwIfNotANumber('Carbohydrate')
        }
    }

    set fat(value) {
        if (typeof value === 'number') {
            this._fat = value
            this.updatedAt = moment().valueOf()
        } else if (typeof value !== 'number') {
            throwIfNotANumber('Fat')
        }
    }

    set portion(value) {
        if (typeof value === 'number') {
            this._portion = value
            this.updatedAt = moment().valueOf()
        } else if (typeof value !== 'number') {
            throwIfNotANumber('Portion')
        }
    }
}

export { Food as default }

我将其默认导出。

我在index.js文件中使用了它，并且它可以正常工作。这是摘录：

import Food from './food'

[...]

const food = new Food(null, null, null, null, brandName, foodName, calories, protein, carbohydrate, fat)

console.log(food) // instance will be logged -> Works as expected
console.log(Food) // Class will be logged -> Works as expected

所以直到这里一切都按预期工作。另外，我想在另一个名为functions.js的文件中使用此类，以将存储在本地存储中的数据再次传递到该文件中（因为否则，由于逻辑消失了，我的getter和setter不能正常工作）。在这里，它不再起作用了。

这是摘录：

import Food from './food'

console.log(Food) // logs 'undefined' -> is not working as expected

const newFood = new Food(null, null, null, null, 'Schöller', 'Eis', 200, 15, 45, 10)
console.log(newFood) // logs this:
/*
TypeError: _food2.default is not a constructor[Weitere Informationen] functions.js:239:16
./src/functions.js
functions.js:239:16
__webpack_require__
bootstrap:19
./src/food.js
food.js:3
__webpack_require__
bootstrap:19
./src/index.js
index.js:1
__webpack_require__
bootstrap:19
0
http://127.0.0.1:8080/scripts/index-bundle.js:37929:18
__webpack_require__
bootstrap:19
<anonym>
bootstrap:68
<anonym>
http://127.0.0.1:8080/scripts/index-bundle.js:1:11
*/

文件的组织方式如下：

我的webpack.config.js如下：

const path = require('path')

module.exports = {
    entry: {
        index: ['babel-polyfill', './src/index.js'],
        editFood: ['babel-polyfill', './src/editFood.js'],
        editMeal: ['babel-polyfill', './src/editMeal.js']
    }, 
    output: {
        path: path.resolve(__dirname, 'public/scripts'),
        filename: '[name]-bundle.js'
    },
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/, // Regular Expression
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['env'],
                    plugins: ['transform-object-rest-spread']
                }
            }
        }]
    },
    devServer: {
        contentBase: path.resolve(__dirname, 'public'),
        publicPath: '/scripts/'
    },
    devtool: 'source-map'
}

我做了一些关于使用webpack导入的研究，据我所知，我正确地导入了它。只是为了确保我尝试过对出口进行命名，但结果相同。我在这里想念什么？此外，我发现了有关错误消息的一些类似问题，但它们与正确导入功能有关。我希望有人能给我提示吗？

TypeError：_food2.default不是构造函数

0 个答案: