使用Webpack导入NPM安装的Html5Sortable ES6模块失败问题

我明白你现在的困扰——用Webpack打包ES6代码时，明明装了html5sortable，导入后编译也过了，但浏览器就是报错说sortable找不到，换成<script>标签又正常。这问题其实出在ES模块的导入方式不对，咱们一步步来解决：

1. 先把导入语句改对 #

你现在写的import 'html5sortable/dist/html5sortable.es.js';只是让Webpack把这个模块打包进去，但没把模块里的sortable函数拿到你的代码作用域里。ES模块不会像全局脚本那样自动把变量挂到window上，所以得显式把它导进来：

// 替换原来的导入，把sortable函数赋值给变量
import sortable from 'html5sortable/dist/html5sortable.es.js';

export default class InputBoxPane {
  // 其他代码不变
  SetupDraggable() {
    // 现在直接用这个导入的sortable就行
    sortable('.input-element-container', {
      forcePlaceholderSize: true,
      placeholderClass: 'ph-class',
      hoverClass: 'bg-maroon yellow'
    });
  }
}

2. 万一还是不行？查下模块的导出方式 #

如果上面的写法还是报错，你可以去node_modules/html5sortable/dist/html5sortable.es.js文件末尾看看它是怎么导出的：

• 如果是export default sortable;，那上面的默认导入就没问题
• 如果是export { sortable };这种命名导出，就得改成：

  import { sortable } from 'html5sortable/dist/html5sortable.es.js';
  

3. 给Webpack配置加个小保险（可选） #

你的Webpack配置整体没大问题，但可以显式声明一下要解析的文件扩展名，避免Webpack找不到模块。在配置里加个resolve字段：

module.exports = {
  // ... 其他已有配置
  resolve: {
    extensions: ['.js', '.json', '.scss', '.handlebars']
  }
};

为啥<script>标签就行？ #

因为你用<script>引入的是html5sortable的UMD版本，它会自动把sortable挂到全局的window对象上，所以你能直接调用。但ES模块版本是严格遵循模块规范的，不会污染全局作用域，必须通过导入才能拿到函数引用。

内容的提问来源于stack exchange，提问作者MSOACC