Question

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

我的文件结构（仅包含相关内容）

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

我的gulpfile.js中的bundle任务使用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

当然，浏览器会阻止变量在全局范围内泄漏。如果您希望全球可用，则应明确将其附加到全局范围：

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

1 个答案: