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未定义

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

Answer 1

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

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

1 个答案: