从没有 ES6 的模块导入类答案

【问题标题】：Import class from module without ES6从没有 ES6 的模块导入类
【发布时间】：2019-08-20 13:42:09
【问题描述】：

我正在尝试将 Material 的小吃栏与 ES5 JavaScript 一起使用。通过这样做，我不能使用 ES6 的 import 功能。因此，我通过link href='...'和script src='...'引用了CSS文件和JS文件。

使用var snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar')) 声明变量时，我收到错误：

Snackbar.aspx:722 Uncaught ReferenceError: MDCSnackbar is not defined

这是我的 HTML：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="../_catalogs/masterpage/Custom/snackbar/node_modules/@material/snackbar/dist/mdc.snackbar.min.css">
  <script src="../_catalogs/masterpage/Custom/snackbar/node_modules/@material/snackbar/dist/mdc.snackbar.min.js"></script>
</head>

<body>

  <div class="mdc-snackbar">
    <div class="mdc-snackbar__surface">
      <div class="mdc-snackbar__label" role="status" aria-live="polite">
        Can't send photo. Retry in 5 seconds.
      </div>
      <div class="mdc-snackbar__actions">
        <button type="button" class="mdc-button mdc-snackbar__action">Retry</button>
      </div>
    </div>
  </div>

</body>

<script>
  var snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));
</script>

</html>

如何在不使用 ES6 的 import 功能的情况下“导入” MDCSnackbar？

【问题讨论】：

我认为你应该为 Material-UI 使用 CDN 而不是静态文件。见this

标签： javascript material-design

【解决方案1】：

您可以按照他们的文档Material-ui cdn中的说明使用 CDN 版本，这里是 material-ui cdn 示例的github example。

【讨论】：