最近在做nestjs 项目, 发现vite 项目启动的时候打印的网络地址很有用, 就照着vite抄了一下。 效果如下。
image.png

要解决两个问题, 一个是获取局域网地址, 然后还有 console 的颜色控制

获取局域网地址

node 的 os 模块提供了一个 os.networkInterfaces() 方法, 用来获取已分配网络地址的网络接口的对象。(os.networkInterfaces() | Node.js API 文档

image.png

其中有很多对象, 要过滤一下有address 的, 且是ipv4的地址。

export function getServerUrl(port: number, apiPrefix: string): IServerUrls {
    const local: string[] = [];
    const network: string[] = [];
    Object.values(os.networkInterfaces())
        .flatMap((nInterface) => nInterface ?? [])
        .filter((detail) => detail.address && (
            detail.family === 'IPv4' ||
            // @ts-expect-error Node18.0 - 18.3 returns number
            detail.family === 4
        ))
        .forEach((detail) => {
            const protocol = 'http';
            const host = detail.address;
            const url = `${protocol}://${host}:${port}${apiPrefix}`;
            if (detail.address.includes('127.0.0.1')) {
                local.push(url);
            } else {
                network.push(url);
            }
        });
    return {
        local,
        network,
    };
}

console 颜色控制

通过 picocolors 这个 包处理

// url 的端口单独设置一个颜色
const colorUrl = (url: string) =>
        colors.cyan(url.replace(/:(\d+)\//, (_, port) => `:${colors.bold(port)}/`));
    for (const url of serverUrls.local) {
        console.log(`  ${colors.green('➜')}  ${colors.bold('Local')}:   ${colorUrl(url)}`);
    }
    for (const url of serverUrls.network) {
        console.log(`  ${colors.green('➜')}  ${colors.bold('Network')}: ${colorUrl(url)}`);
    }

abigmiu
4 声望0 粉丝