Svelte3/Rollup迁移Vite后sails.io.js客户端初始化失败求助

核心原因 #

Vite的ES模块解析规则比Rollup更严格，HTML中通过<script>引入的全局变量无法直接通过import io from 'io'的方式被识别为模块，这是导致错误的根本原因。

可行解决方案 #

方案1：直接使用全局window对象（最简单） #

既然已经在/static/libs放置了sails.io.js并通过HTML引入，io会挂载到window全局对象上，直接在代码中使用window.io即可：

修改src/global-state.js：

export var mySocket;
// 直接从window获取全局io对象
const io = window.io;
io.sails.url = 'http://localhost:1337';
mySocket = io.sails.connect();

如果使用TypeScript，可添加全局类型声明（可选）：
在src/env.d.ts中添加：

interface Window {
  io: any; // 可根据实际类型细化
}

方案2：配置Vite识别全局变量（保持原有import写法） #

通过Vite配置将io映射为全局变量，这样可以继续使用import io from 'io'的写法：

1. 安装@rollup/plugin-inject插件：

npm install @rollup/plugin-inject --save-dev

2. 修改vite.config.js：

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import inject from '@rollup/plugin-inject';

export default defineConfig({
  plugins: [
    sveltekit(),
    inject({
      // 将import io from 'io'替换为window.io
      io: ['window', 'io']
    })
  ]
});

3. 保持src/global-state.js原有代码不变即可。

方案3：正确安装并使用npm包（推荐长期维护） #

之前安装sails.io.js后得到undefined，是因为缺少依赖或导入方式错误，正确步骤如下：

1. 安装依赖：

npm install sails.io.js socket.io-client

2. 修改src/global-state.js：

export var mySocket;
import io from 'sails.io.js';
import SocketIOClient from 'socket.io-client';

// 初始化sails.io客户端
const sailsIO = io(SocketIOClient);
sailsIO.sails.url = 'http://localhost:1337';
mySocket = sailsIO.sails.connect();

这种方式不需要手动管理静态文件，依赖由npm维护，更适合现代前端项目架构。

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