当我使用 gulp 和 browserify 时，我的 javascript 模块不工作

Question

当我使用 gulp 和 browserify 连接 javscript 文件时，我的 javascript 模块不工作。

这是我的模块。

LastestPost.js

var PostBox = require('../objects/PostBox');

var LastestPosts = (function() {
    var btnLeft;
    var btnRight;

    var postBoxs = (function() {
        var arr = new Array();
        for (var i=0; i<4; i++) {
            var post_box = new PostBox();
            arr.push(post_box);
        }
        return arr;
    })();

    var index = 0;
    var lastIndex;


    return({
        initDOM: function($) {
            btnLeft = $('#btn-lastest-previous');
            btnRight = $('#btn-lastest-next');
            /* some codes */
        },
        initIndex: function() {
            if (index == 0) {
                /* some codes */
            }
            else if (index == lastIndex) {
                /* some codes */
            }
            else {
                /* some codes */
            }
        },
        getLastIndex: function() {
             $.get('/lastestposts-getlastindex', function(data) {
                lastIndex = data;
             });
        },
        updatePostBox: function() {
            var parameter = { index: index };

            $.get('/lastestposts-getindex', parameter, function(data) {
                /* some codes */
            });
        },
        increaseIndex: function() {
            if (index < lastIndex) {
                index++;
             }
         },
        decreaseIndex: function() {
            if (index > 0) {
                index--;
            }
         },
        getLeftBtn: function() {
             return btnLeft;
        },
        getRightBtn: function() {
            return btnRight;
        }
    });
 })();

 module.exports = LastestPosts;

Main.js

var LastestPosts = require('./module/LastestPosts');

$(document).ready(function() { 
    LastestPosts.initDOM($);
    LastestPosts.getLastIndex();
    LastestPosts.updatePostBox();
    LastestPosts.initIndex();

    (LastestPosts.getRightBtn()).click(function() {
        LastestPosts.increaseIndex();
        LastestPosts.initIndex();
        LastestPosts.updatePostBox();
    });
    (LastestPosts.getLeftBtn()).click(function() {
        LastestPosts.decreaseIndex();
        LastestPosts.initIndex();
        LastestPosts.updatePostBox();
    });
});

btnLeft 和 btnRight 点击正常，但 LastestPosts.increaseIndex() 和 LastestPosts.initIndex() 不工作。

在使用 gulp 和 browserify 之前，我像这样导入每个 javascript 文件。

<script src="./js/objects/PostBox.js"></script>
<script src="./js/module/Lastestposts.js"></script>
<script src="./js/main.js"></script>

这很好用，但是在我用 gulp 和 browserify 连接 javascript 文件后，我的 javascript 模块不起作用...

这是我的 gulp 设置。

gulp.task('build-js', function () {
    return browserify('./public/src/js/main.js')
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('./public/dist/js'));
});

请帮助这个小学生，对不起我糟糕的英语水平。我英语不好:'(

Answer 1

此问题经常出现在 'unclean' 行内注释中。

例如：

/*console.log('this will work');*/

/*

console.log('this might not work when minified');
*/

尝试删除所有评论并再次缩小代码。

Answer 2

不确定您到底哪里出了问题，但问题归结为终端中的这个错误 -

express deprecated res.send(status): Use res.sendStatus(status) instead app.js:107:9

这意味着最终问题出在这个特定函数没有返回 lastIndex:

getLastIndex: function() {
    $.get('/lastestposts-getlastindex', function(data) {
        lastIndex = data;
    });
},

如果您将 res.send(4) 修改为 res.send({lastIndex: 4}); 并将 getLastIndex() 修改为

getLastIndex: function() {
    $.get('/lastestposts-getlastindex', function(data) {
        lastIndex = data.lastIndex;
    });
},

不确定为什么它之前可以工作 - 但目前你的 lastIndex 私有变量 undefined 破坏了一切 - 这就是原因。

当我使用 gulp 和 browserify 时，我的 javascript 模块不工作

My javascript module is not working when I used gulp and browserify

javascript

node.js

module

gulp

browserify