Question

我正在尝试将Material的快餐栏与ES5 JavaScript结合使用。这样，我将无法使用ES6的import功能。因此，我通过link href='...'和script src='...'引用CSS文件和JS文件。

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

Snackbar.aspx：722未捕获的参考错误：未定义MDCSnackbar

这是我的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？

Answer 1

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

从没有ES6的模块导入类

1 个答案: