Question

我在这里报告了我在这里也报告的内容：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>，就可以了。

有人可以帮助我吗？谢谢。

Answer 1

在main.js中只需编写该导入：

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

Answer 2

import 'nouislider'中的main.js将变量noUiSlider导入到那个文件中。

默认情况下，它不将其导出到您的window对象中。当您包含CDN中的脚本时，它确实导出到window中，这就是它在那里工作的原因。

您可以：

将滑块初始化代码移至main.js
在window.noUiSlider = noUiSlider中添加main.js

noUiSlider ES6导入

2 个答案: