Webpack+PUG环境下使用nice-select2报错NiceSelect未定义求助

云原生阿岚

2026-7-7

问题：Webpack+PUG环境接入nice-select2提示'NiceSelect is not defined'

我在Webpack+PUG环境中尝试接入nice-select2插件，已将dist文件夹中的css和js文件添加到项目并完成引入，同时按照文档编写了初始化代码，但控制台提示'NiceSelect is not defined'错误。

现有代码

CSS引入（PUG）

link(rel='stylesheet' href=require('../assets/css/nice-select2.css'))

JS引入（PUG）

script(src=require('../assets/js/nice-select2.js'))

初始化代码

NiceSelect.bind(document.getElementById("a-select"), {searchable: true, placeholder: 'select', searchtext: 'zoek', selectedtext: 'geselecteerd'});

可能的原因及解决方法

Webpack模块处理问题
nice-select2的JS文件是UMD模块，Webpack环境下直接用script标签引入可能不会自动挂载到全局window对象。建议改用ES模块导入：
1. 移除PUG中的script(src=require('../assets/js/nice-select2.js'))
2. 在你的业务JS文件中导入并初始化：
```
import NiceSelect from '../assets/js/nice-select2.js';

NiceSelect.bind(document.getElementById("a-select"), {
  searchable: true,
  placeholder: 'select',
  searchtext: 'zoek',
  selectedtext: 'geselecteerd'
});
```
路径解析错误
检查../assets/js/nice-select2.js的相对路径是否正确，Webpack是相对于当前文件解析路径的。如果控制台出现404错误，说明文件没加载成功，调整路径即可。

初始化时机不对
确保初始化代码在DOM加载完成后执行，避免DOM元素未就绪或JS文件未加载完成就执行代码：

document.addEventListener('DOMContentLoaded', function() {
  NiceSelect.bind(document.getElementById("a-select"), {
    searchable: true,
    placeholder: 'select',
    searchtext: 'zoek',
    selectedtext: 'geselecteerd'
  });
});