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

Question

我无法 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？它与全局范围或我遗漏的其他内容有关吗？

Answer 1

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

Navigo = require('navigo');

不使用 var 键会将 Navigo var 附加到全局范围，当您浏览它时，您的全局将是 window 并且 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();
}

然后浏览此文件。

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

Navigo not defined when using Browserify with gulp

javascript

node.js

npm

browserify

gulp