Vite环境下使用SlickGrid报错：Sortable is not defined

问题原因 #

SlickGrid依赖SortableJS，但它内部期望Sortable是全局可用的变量，而Vite的ES模块环境默认不会将npm包暴露到全局作用域。即使SortableJS已作为依赖存在于node_modules中，也无法被SlickGrid识别，手动安装sortablejs后若不做全局暴露，依然会触发报错。

解决方案 #

方案1：手动将Sortable挂载到全局作用域 #

在导入SlickGrid之前，先导入SortableJS并挂载到window对象：

import Sortable from 'sortablejs';
window.Sortable = Sortable; // 暴露Sortable到全局

import './style.css'
import { SlickDataView, SlickGrid } from 'slickgrid'

// 后续业务代码保持不变

方案2：通过Vite配置自动注入全局变量 #

修改或新建项目根目录下的vite.config.js，配置Rollup的全局变量映射：

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        // 将sortablejs包映射为全局变量Sortable
        globals: {
          'sortablejs': 'Sortable',
        },
      },
    },
  },
});

执行命令确保sortablejs已安装：

npm install sortablejs --save

验证步骤 #

1. 按照上述任一方案修改代码或配置
2. 重启Vite开发服务器
3. 打开浏览器控制台，确认Uncaught ReferenceError: Sortable is not defined错误消失

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