如何从svelte:head导出变量到HTML区域 实现Svelte离线使用roslibjs

解决方案 #

方案1：直接npm导入使用（推荐）

roslib本身支持npm安装调用，不需要强行放到<head>里加载，只需要避开服务端渲染阶段执行即可：

1. 先执行安装命令：npm install roslib
2. 在组件的onMount生命周期中动态导入库使用，onMount只会在客户端执行，不会触发服务端渲染的报错：

<script>
import { onMount } from 'svelte';

let rosInstance;

onMount(async () => {
  // 动态导入npm安装的roslib
  const ROSLIB = await import('roslib');
  // 执行你的业务逻辑
  rosInstance = new ROSLIB.ROS({
    url: 'ws://你的ROS服务地址:9090'
  });
});
</script>

<!-- 页面中正常使用相关变量 -->
<p>连接状态：{rosInstance?.isConnected ? '已连接' : '未连接'}</p>

方案2：使用静态文件引入

如果你坚持用预构建的js文件，不要直接引用node_modules路径，调整如下：

1. 找到node_modules/roslib/build/roslib.js文件，复制到项目根目录的static文件夹下（SvelteKit打包时会把static目录的文件原封不动输出到构建产物）
2. 在<svelte:head>中引入静态资源：

<svelte:head>
  <script src="/roslib.js"></script>
</svelte:head>

3. 使用时在onMount中访问全局挂载的对象即可：

<script>
import { onMount } from 'svelte';

onMount(() => {
  const rosInstance = new window.ROS({
    url: 'ws://你的ROS服务地址:9090'
  });
});
</script>

你之前操作的错误原因 #

• <svelte:head>内的<script>标签运行在全局上下文，和组件的script作用域完全隔离，内部声明的变量默认挂载到window对象，组件内要访问需要写window.a，不推荐这种写法会造成全局变量污染。
• 直接引用node_modules路径的资源仅在开发环境生效，打包时node_modules不会被纳入构建产物目录，所以部署后会找不到资源。

内容的提问来源于stack exchange，提问作者hot and a flop