如何在Svelte项目中使用vite插件$env或$lib别名

Question

我正在使用 Svelkit 项目。 从 Sveltkit 导入模块时，经常使用 $lib 和 $env 等路径别名。

但是，当使用 Sveltkit 项目中未包含的单独 vite 插件时，我想在导入环境变量或 js 文件时使用 Sveltkit 中使用的别名，例如 $env 或 $lib。

以下是我尝试过的，但不起作用。

我做错了什么？

vite.config.js

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import path from 'path';
import socketHandler from './src/lib/server/socketHandler/socketHandler.js';

const webSocketServer = {
    name: 'webSocketServer',
    configureServer(server) {
        if (!server.httpServer) return;
        socketHandler(server.httpServer);
    }
}

export default defineConfig({
    plugins: [sveltekit() , webSocketServer()],
        resolve: {
            alias: {
              '$lib': path.resolve(__dirname, './src/lib'),
              '$env': path.resolve(__dirname, '.'),
            },
          },
    
});

socketHandler.js

import { Server } from 'socket.io';
import login from '$lib/login.js';
import {DB_PASSWORD} from '$env/static/private';
import disconnect from '$lib/disconnect.js';
// other imports...

global.userCode = {};

export default function socketHandler(server) {
    const db_pass=DB_PASSWORD;
    const io = new Server(server);

    const onConnection = (socket) => {

        reconnect(io, socket); 
        disconnect(io, socket);
        login(io, socket); 
        orderRequest(io, socket);
        // ...
    }
    
    io.on("connection", onConnection);
}

npm run dev

failed to load config from C:\home\lcare_renewal\vite.config.js
error when starting dev server:
Error [ERR_MODULE_NOT_FOUND]: Cannot find package '$lib' imported from C:\home\lcare_renewal\vite.config.js.timestamp-1727503166699-f59eaa69482cd.mjs
    at new NodeError (node:internal/errors:405:5)
    at packageResolve (node:internal/modules/esm/resolve:890:9)
    at moduleResolve (node:internal/modules/esm/resolve:939:20)
    at defaultResolve (node:internal/modules/esm/resolve:1132:11)
    at nextResolve (node:internal/modules/esm/loader:163:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:835:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:77:40)
    at link (node:internal/modules/esm/module_job:76:36)

Answer 1

要将 Vite 中的

$lib

和

$env

别名与独立 JavaScript 文件一起使用，您可以使用

vite-node

。

详情请参阅此答案。