javascript - React.js - operationStore.getItems 不是函数

Question

使用以下命令运行 Web 应用程序时出现以下错误:node --harmony gulpfile.babel

未捕获类型错误:operationStore.getItems 不是函数

我什至不知道问题出在哪里。这是 gulp 文件以及发生错误的位置。

该代码之前在 index.ejs 文件中声明 app.js 之外的所有内容时有效。但这阻止了我在我需要的服务器端文件中使用 es6。所以我死了，使用 --harmony 标志将允许我使用 es6。但我无法克服使用和谐标志时发生的这个错误。

getItems 对我来说显然是一个函数，发生了什么？

Main.jsx

var Login = require('./auth/LogApp.jsx');
var operationStore = require('./stores/OperationStore.jsx');
var initial = operationStore.getItems();

Gulpfile.babel.js

var gulp = require('gulp');
var LiveServer =  require('gulp-live-server');
var browserSync = require('browser-sync');
var browserify =  require('browserify');
var source = require('vinyl-source-stream');
var babelify = require('babelify');

gulp.task('live-server', function(){
    var server = new LiveServer('server/main.js');
    server.start();
})

gulp.task('bundle',['copy'], function(){
    return browserify({
        entries:'app/main.jsx',
        jquery : 'jquery-browserify',
        debug:true,
    })
        .transform(babelify,
            {
                "presets": ["es2015", "react", "stage-1"],
                "plugins": ["transform-decorators-legacy", "transform-function-bind"],
                extensions: [".jsx", ".js",]
            })
        .bundle()
        .pipe(source('app.js'))
        .pipe(gulp.dest('./.tmp'));
})

gulp.task('copy', function() {
    gulp.src(['app/*.css', 'app/Icons/**/*','app/stores/**/*', 'app/helper/**/*', 'app/dispatcher.js','bundle.js', 'app/helpers/RestHelper.js',
            'app/actions/OperationActionCreator.jsx', 'app/actions/SurgeonActionCreator.jsx',
            'app/actions/PatientActionCreator.jsx','app/actions/ORActionCreator.jsx',
            'node_modules/guid/guid.js','node_modules/jquery/**/*', 'bower_components*/**/*'])
        .pipe(gulp.dest('./.tmp'));
})

gulp.task('serve', ['bundle', 'live-server'], function(){
    browserSync.init(null,{
        proxy:"http://localhost:7777",
        port: 9001
    })
})

gulp.run('serve')

OperationStore.jsx

var operationStore = function() {

    var operations = [];

    var listeners = [];

    var updateOperations = function(helper){
        helper.get("api/operations")
            .then(function(data){
                operations = data;
                triggerListeners(listeners);
            });
    }

    updateOperations(helper);

    function getItems(){
        return operations;
    };

    var addOperationItem = function(operation) {
        operations.push(operation);
        triggerListeners(listeners);
        helper.post("api/operations", operation);
    }

    var deleteOperationItem = function (operation) {
        var index;
        operations.filter(function (_operation, _index) {
            if (_operation.name == operation.name) {
                index = _index;
            }
        });
        operations.splice(operation, 1);
        triggerListeners(listeners);

        //added this
        helper.del('api/operations/'+ operation._id);
    }

    var onChange = function(listener){
        listeners.push(listener);
        return listeners;
    }

    var triggerListeners = function(listeners) {
        listeners.forEach(function(listener) {
            listener(operations);
        })
    }

    var registerEvent = function (event) {
        var split = event.type.split(':');
        if (split[0] === 'operation-item') {
            switch (split[1]) {
                case "add":
                    addOperationItem(event.payload);
                    break;
                case "delete":
                    deleteOperationItem(event.payload);
                    break;
            }
        }
    }

    var dispatchRegister = function(dispatcher) {
        dispatcher.register(registerEvent);
    }

    dispatchRegister(dispatcher);

    return {
        getItems: getItems,
        onChange: onChange,
        addOperationItem: addOperationItem,
        deleteOperationItem: deleteOperationItem,
        triggerListeners: triggerListeners,
        dispatchRegister: dispatchRegister,
        registerEvent: registerEvent,
        updateOperations: updateOperations
    }
}();

Answer 1

我知道这是我错过的一些简单但基本的东西。 OperationStore.jsx 最后需要 module.exports。这是可以使用的新 jsx。

import RangeDate from './../components/src/range_date'

function operationStore(){
    ...
}

module .exports = new operationStore();