Material Design + Gulp-MDC无法读取_.getTabElements_处的null属性'querySelectorAll'

Question

我正在用gulp与babel，browserify和uglify转换SASS和JS。现在，我正在尝试使用“材料设计选项卡”栏，但我认为我做错了什么。

CSS加载正常，但是JS坏了，并显示了当前消息：

未捕获到的TypeError：无法读取 .getTabElements

处为null的属性'querySelectorAll'

"devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "@babel/register": "^7.5.5",
    "@material/tab-bar": "^3.1.0",
    "autoprefixer": "^9.6.1",
    "babelify": "^10.0.0",
    "browserify": "^16.3.0",
    "del": "4.1.1",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^6.1.0",
    "gulp-babel": "^8.0.0",
    "gulp-clean-css": "^4.2.0",
    "gulp-rename": "^1.4.0",
    "gulp-sass": "^4.0.2",
    "gulp-sourcemaps": "2.6.5",
    "gulp-uglify": "3.0.2",
    "vinyl-buffer": "^1.0.1",
    "vinyl-source-stream": "^2.0.0"
  }

export function scripts(done) {
  paths.scripts.jsFiles.map(function (entry) {
    return browserify({
      entries: [paths.scripts.jsFolder + entry]
    })
    .transform("babelify", { presets: ["@babel/preset-env"] })
    .bundle()
    .pipe(source(entry))
    .pipe(rename({ extname: '.min.js' }))
    .pipe(buffer())
    .pipe(sourcemaps.init({ loadMaps: true }))
    .pipe(uglify())
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest(paths.scripts.dest))
  });
  done();
}

import { MDCTabBar } from '@material/tab-bar';
const tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));

<div class="fullWidth visible-submenu">
  <div class="container visible-submenu__container">
    <div class="mdc-tab-bar" role="tablist">
        <div class="mdc-tab-scroller">
            <div class="mdc-tab-scroller__scroll-area">
                <div class="mdc-tab-scroller__scroll-content">
                    <button class="mdc-tab mdc-tab--active" role="tab" aria-selected="true" tabindex="0">
                        <span class="mdc-tab__content">
                            <span class="mdc-tab__text-label">Blog Home</span>
                        </span>
                        <span class="mdc-tab-indicator mdc-tab-indicator--active">
                            <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
                        </span>
                        <span class="mdc-tab__ripple"></span>
                    </button>
                    <button class="mdc-tab mdc-tab--active" role="tab" aria-selected="true" tabindex="0">
                        <span class="mdc-tab__content">
                            <span class="mdc-tab__text-label">How To</span>
                        </span>
                        <span class="mdc-tab-indicator mdc-tab-indicator--active">
                            <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
                        </span>
                        <span class="mdc-tab__ripple"></span>
                    </button>
                    <button class="mdc-tab mdc-tab--active" role="tab" aria-selected="true" tabindex="0">
                        <span class="mdc-tab__content">
                            <span class="mdc-tab__text-label">Inspirations</span>
                        </span>
                        <span class="mdc-tab-indicator mdc-tab-indicator--active">
                            <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
                        </span>
                        <span class="mdc-tab__ripple"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
  </div>
</div>

问题可能出在可转换的类声明上，但是我不知道我在做什么错。