时间戳

首页 > 解决方案 > noUiSlider ES6 导入

ecmascript-6 - noUiSlider ES6 导入

问题描述

我也在这里报告我在这里报告的内容：https ://github.com/leongersen/noUiSlider/issues/971 。

我已经按照官方回购https://github.com/leongersen/noUiSlider#webpack中的建议安装了带有 ES6 导入（无 webpack）的 noUiSlider 。

所以这就是我所拥有的。

// main.js
import 'nouislider';

//index.html

<html>

<body>

  <div id="slider"></div>

  <script src="js/bundle.js"></script>

  <script>
    var slider = document.getElementById('slider');

    noUiSlider.create(slider, {
      start: [20, 80],
      connect: true,
      range: {
        'min': 0,
        'max': 100
      }
    });
  </script>

</body>

</html>

但它不起作用，在控制台中我有以下消息

Uncaught ReferenceError: noUiSlider is not defined.

如果我插入<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/13.1.4/nouislider.min.js"></script>而不是<script src="js/bundle.js"></script>它的工作原理。

有人能帮我吗？谢谢。

标签： ecmascript-6importnouislider

解决方案

在 main.js 中只写那个导入：

import * as noUiSlider from 'nouislider/distribute/nouislider.js';

推荐阅读