noUiSlider ES6 导入

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 'nouislider' 将变量 noUiSlider 导入 that 文件。

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

您可以：

将滑块初始化代码移至 main.js
在main.js

window.noUiSlider = noUiSlider

Answer 2

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

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

noUiSlider ES6 导入

noUiSlider ES6 import

import

ecmascript-6

nouislider