如何导入 jQuery 然后在导入后的其他模块中使用它？

Question

所以我不确定我所问的那样是否可行。

我有一个 Gulp 任务，我们 gulp-bro 导入模块并混合它们。

function restaurantScripts() {
    return gulp.src(paths.restaurant.scripts.src)
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(bro({
            transform: [
              babelify.configure({ presets: ['es2015'] }),
              [ 'uglifyify', { global: true } ]
            ]
        }))
        .pipe(rename({
            basename: 'restaurant',
            suffix: '.min'
        }))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest(paths.restaurant.scripts.dest));
}

指向的 src 看起来像这样：

import './modules/bootstrap.js'
import './modules/navbar.js'
...

在 bootstrap.js 中，我导入 jQuery 和我的其他供应商。

window.$ = window.jQuery = require('jquery')
window.toastr = require('toastr')
...

在那之前没问题，我可以在我的网站上使用 jQuery

但这就是它不再起作用的地方。当我像 navbar.js 这样调用我的个人模块时，它看起来像这样：

var navbar = document.getElementsByClassName('nav-bot')[0];
var sticky = navbar.offsetTop;

function navbarSticky() {
    if (window.pageYOffset >= sticky) {
        navbar.classList.add("sticky")
    } else {
        navbar.classList.remove("sticky");
    }
}

window.onscroll = function() {
    navbarSticky()
};

它不再工作告诉我:

TypeError: navbar is undefined

很明显我在那里遗漏了一些东西。我想也许我没有权利像这样加载我自己的模块。但如果不是，请问这样做的好方法是什么？

Answer 1

您的错误显示 "navbar is undefined"，是否有可能您尝试使用 getElementsByClassName 获取的元素在执行此代码时不存在？首先在控制台中尝试运行这个 "document.getElementsByClassName('nav-bot')[0];"。

如何导入 jQuery 然后在导入后的其他模块中使用它？

How to import jQuery then use it in other module imported after it?

javascript

browserify

gulp