将 Browserify 与 gulp 一起使用时未定义 Navigo答案

【问题标题】：Navigo not defined when using Browserify with gulp将 Browserify 与 gulp 一起使用时未定义 Navigo
【发布时间】：2017-03-08 19:11:53
【问题描述】：

我无法让 Navigo (npm package) 使用 Browserify 和 Gulp

我的文件结构（只包括相关的东西）

-index.html
-build
    -js
        -modules.js
        -routing.js
-js
    -modules.js

我的 gulpfile.js 中的捆绑任务使用 browserify 以便能够在我的实际 routing.js 文件中使用 Navigo

gulp.task('bundlemods', function() {
    var bundleMods = browserify('./js/modules.js')
    .bundle()
    .on('error', console.error)
    .pipe(source('modules.js'))
    .pipe(gulp.dest('./build/js'));
});

哪个输出the following modules.js file

然后在我的 routing.js 中，我只是尝试使用 Navigo，如下所示：

function initRouting() {
    var rootUrl = null;
    var useHash = false;
    var router = new Navigo(rootUrl, useHash);

    router.on(function () {
        runHome();
    })
    .resolve();
}

但是，这会产生错误Uncaught ReferenceError: Navigo is not defined

这也是我的 index.html 文件的外观（再次相关部分）

<!doctype html>
<html>
<head>
/* stuff */
</head>
<body>
    <main>
        /* stuff */
    </main>
    <script src="build/js/modules.js"></script>
    <script src="build/js/routing.js"></script>
    /* other scripts */
</body>
</html>

它仍然未定义的原因是什么？使用 Browserify 生成模块文件后，如何实际使用 Navigo？它与全局范围或我缺少的其他东西有关吗？

【问题讨论】：

发布你的 repo 什么的，好像你不是 requiring 包的正确方式
似乎要求是正确的，但我只是把它搞砸了，没有将它包括在全局范围内。诶诶诶诶诶……

标签： javascript node.js npm gulp browserify

【解决方案1】：

当然，browserify 会防止变量在全局范围内泄漏。如果你想让它在全球范围内可用，你应该明确地将它附加到全局范围：

Navigo = require('navigo');

不使用var 键会将Navigo var 附加到全局范围，当您浏览它时，您的全局将是窗口，并且Navigo 可以在任何地方使用。

如果您不想污染全局范围，那么您可以在 routing.js 中要求它：

var Navigo = require('navigo');
function initRouting() {
    var rootUrl = null;
    var useHash = false;
    var router = new Navigo(rootUrl, useHash);

    router.on(function () {
        runHome();
    })
    .resolve();
}

然后浏览这个文件。

【讨论】：

亲爱的先生，您是我的救星。哇，在让一切正常工作的过程中，我遇到了很多问题，以至于我错过了这么简单的事情。非常感谢！同样令人惊叹的答案可以解释，而不仅仅是将答案推到我的脸上：D
@Clanket，很高兴它有帮助。