奇怪的需求解决方案记录(二)

85 阅读1分钟
1、通过创建自定义事件CustomEvent(),向js文件传递数据;

当遇到封装了插件需要引入到各系统中,但又因为代码框架版本不同,需要传入自定义配置or字段,可考虑以下方法。

     // 创建一个自定义事件
    const tokenReadyEvent = new CustomEvent('zonst-token-ready', {
      detail: {
        message: token,
        extraParams: {
          switchSystemDrawerWidth: 250, // drawer偏移的宽度
        },
      },
    })
    document.dispatchEvent(tokenReadyEvent) // 发送自定义事件
    
    // 接收
    document.addEventListener('zonst-token-ready', function(event: any) {
        // 监听token变化传入
      localStorage.setItem('TOKEN_NAME_SOLID', event.detail.message)
      localStorage.setItem('extraParams', 
    })
2、vite build打包tsx文件为js库时
export default defineConfig({
    ...
    build: {
        lib: {
          entry: "src/components/xxxxx.tsx", // 要打包的文件路径
          name: "xxxx", // 变量名
          formats: ["umd"], // 格式,默认[es, umd]
          fileName: (format) => `name.${format}.js`, // 输出的文件名
        },
        sourcemap: true // 构建后是否生成 source map
      },
      ...
})
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    ...
   }