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

【问题标题】：How to import jQuery then use it in other module imported after it?如何导入 jQuery 然后在它之后导入的其他模块中使用它？
【发布时间】：2018-04-19 12:27:41
【问题描述】：

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

我有一个 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: 导航栏未定义

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

【问题讨论】：

您的错误提示“导航栏未定义”，您尝试使用 getElementsByClassName 获取的元素是否可能在执行此代码时不存在？尝试运行此“document.getElementsByClassName('nav-bot')[0];”首先在控制台中。
天哪，就这么简单...我不知道为什么我以前没有那么坚强...
哈哈。 Javascript 可能很棘手 :)

标签： javascript gulp browserify

【解决方案1】：

您的错误显示“导航栏未定义”，您尝试使用 getElementsByClassName 获取的元素是否可能在执行此代码时不存在？尝试运行此“document.getElementsByClassName('nav-bot')[0];”首先在控制台中。

【讨论】：