Web应用引入npm库shieldbow遇错，求服务端部署解决方案

为什么客户端直接引入会报错 #

1. 浏览器原生ES模块不支持shieldbow这种裸模块名，只能识别相对/绝对路径，因此第一个错误提示要求路径以/、./或../开头。
2. 即便指定了node_modules里的路径，shieldbow是为Node.js环境开发的CommonJS模块，导出结构与浏览器ES模块不兼容，且依赖Node.js内置的网络、文件系统等模块，浏览器没有这些运行环境，所以无法在客户端直接执行。

服务端实现方案（以Express为例） #

1. 搭建服务端项目

• 创建服务端文件夹并初始化项目：

  mkdir shieldbow-server && cd shieldbow-server
  npm init -y
  npm install express shieldbow dotenv
  

• 新建.env文件存储RIOT API密钥（避免硬编码泄露）：

  RIOT_API_KEY=你的RIOT开发者平台API密钥
  

2. 编写服务端API代码（server.js）

const express = require('express');
const { Client } = require('shieldbow');
require('dotenv').config();

const app = express();
const PORT = process.env.PORT || 3001;

// 初始化Shieldbow客户端
const client = new Client({
  apiKey: process.env.RIOT_API_KEY
});

// 允许跨域（前端与服务端端口不同时需要）
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET');
  next();
});

// 示例接口：根据召唤师名称获取信息
app.get('/api/summoner/:name', async (req, res) => {
  try {
    const summoner = await client.summoners.fetchByName(req.params.name, 'na1');
    res.json(summoner);
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

app.listen(PORT, () => {
  console.log(`服务端运行在 http://localhost:${PORT}`);
});

3. 前端调用服务端接口

前端通过fetch请求服务端API，示例代码：

async function fetchSummoner(name) {
  try {
    const response = await fetch(`http://localhost:3001/api/summoner/${name}`);
    if (!response.ok) throw new Error('请求失败');
    const summonerData = await response.json();
    // 处理返回的召唤师数据
    console.log(summonerData);
  } catch (err) {
    console.error(err);
  }
}

// 调用示例
fetchSummoner('你的召唤师名称');

全栈框架简化方案（以Next.js为例） #

如果使用Next.js这类全栈框架，可直接在API路由中使用shieldbow，无需单独搭建服务端：

1. 安装依赖：npm install shieldbow dotenv
2. 创建pages/api/summoner/[name].js：

import { Client } from 'shieldbow';
require('dotenv').config();

export default async function handler(req, res) {
  const { name } = req.query;
  if (!name) return res.status(400).json({ error: '缺少召唤师名称参数' });

  const client = new Client({
    apiKey: process.env.RIOT_API_KEY
  });

  try {
    const summoner = await client.summoners.fetchByName(name, 'na1');
    res.status(200).json(summoner);
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
}

3. 前端调用内部API：

async function getSummoner(name) {
  const response = await fetch(`/api/summoner/${name}`);
  const data = await response.json();
  console.log(data);
}

注意事项 #

• 绝对不要在前端代码中直接写入RIOT API密钥，必须通过服务端环境变量管理，防止密钥泄露。
• 所有shieldbow的业务操作都放在服务端执行，前端仅负责请求结果接收与页面展示。

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