Svelte中如何读写打包变量及复用bundle.js修改参数

1. 在Svelte中读取并更新打包后的变量值 #

要实现打包后能读取和更新变量，核心是把变量或操作方法暴露到全局环境，或通过事件机制交互，常见两种方式：

方式一：挂载到全局window对象 #

在Svelte组件或入口文件里，把需要操作的变量和更新方法绑定到window，让外部网页直接访问：

<!-- App.svelte -->
<script>
  // 定义可外部修改的变量
  let appState = {
    title: '默认标题',
    content: '默认内容'
  };

  // 暴露到全局
  window.mySvelteApp = {
    // 获取当前变量值
    getState: () => ({ ...appState }),
    // 更新变量值
    setState: (newState) => {
      Object.assign(appState, newState);
    }
  };
</script>

<h1>{appState.title}</h1>
<p>{appState.content}</p>

打包后，嵌入的网页可直接操作：

// 读取当前值
console.log(window.mySvelteApp.getState());
// 更新变量
window.mySvelteApp.setState({ title: '新标题', content: '更新后的内容' });

方式二：使用自定义事件传递数据 #

通过浏览器自定义事件机制，实现外部网页与Svelte应用的通信：

<!-- App.svelte -->
<script>
  let message = '默认消息';

  // 监听外部触发的更新事件
  window.addEventListener('update-app-message', (event) => {
    message = event.detail;
  });

  // 暴露读取方法到全局
  window.getAppMessage = () => message;
</script>

<p>{message}</p>

外部网页中触发事件更新或读取值：

// 更新内容
window.dispatchEvent(new CustomEvent('update-app-message', { detail: '来自外部的新消息' }));
// 读取当前值
console.log(window.getAppMessage());

2. 不创建npm包，让bundle具备复用性 #

完全可以实现，只需在打包时预留配置入口，让使用者通过简单的全局操作或标签属性修改变量，推荐三种方案：

方案一：通过script标签的自定义属性传递初始配置 #

在嵌入bundle的script标签上添加data-*属性，Svelte入口文件读取这些属性作为初始配置，同时暴露更新方法：

// main.js（Svelte入口文件）
import App from './App.svelte';

// 获取当前加载的script标签
const currentScript = document.currentScript;
// 解析自定义属性的配置
const initialConfig = currentScript.dataset.appConfig 
  ? JSON.parse(currentScript.dataset.appConfig) 
  : {};

// 初始化应用
const app = new App({
  target: document.body,
  props: initialConfig
});

// 暴露全局更新方法
window.updateAppProps = (newProps) => {
  app.$set(newProps);
};

export default app;

使用者嵌入时，可在script标签配置初始值，之后也能动态更新：

<!-- 用户的网页 -->
<link rel="stylesheet" type="text/css" href="https://.../bundle.css">
<script defer src="https://.../bundle.js" data-app-config='{"title":"自定义标题","content":"用户自定义内容"}'></script>

<!-- 动态更新 -->
<script>
  setTimeout(() => {
    window.updateAppProps({ title: '动态修改后的标题' });
  }, 3000);
</script>

方案二：让使用者提前定义全局配置对象 #

在加载bundle前，让使用者先在全局定义配置对象，Svelte入口读取该对象作为初始值：

<!-- 用户的网页 -->
<script>
  // 使用者提前定义全局配置
  window.myAppConfig = {
    title: '用户预设标题',
    theme: 'dark'
  };
</script>
<link rel="stylesheet" type="text/css" href="https://.../bundle.css">
<script defer src="https://.../bundle.js"></script>

Svelte入口文件读取配置：

// main.js
import App from './App.svelte';

const initialConfig = window.myAppConfig || { title: '默认标题', theme: 'light' };

const app = new App({
  target: document.body,
  props: initialConfig
});

// 暴露更新方法
window.updateMyApp = (newConfig) => {
  app.$set(newConfig);
};

export default app;

方案三：全局暴露配置修改接口 #

直接把配置和更新方法挂到window，使用者无需额外配置，直接调用方法修改：

// main.js
import App from './App.svelte';

let appProps = {
  title: '默认标题',
  content: '默认内容'
};

const app = new App({
  target: document.body,
  props: appProps
});

window.myApp = {
  setProps: (newProps) => {
    Object.assign(appProps, newProps);
    app.$set(appProps);
  },
  getProps: () => ({ ...appProps })
};

export default app;

使用者直接操作全局对象：

// 用户网页中修改
window.myApp.setProps({ title: '自定义标题' });
console.log(window.myApp.getProps());

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