关于在 ClojureScript 当中引入依赖 document 对象的包(笔记)

一般前端代码崔主要是为了在浏览器环境运行,
在有服务端渲染的需求的时候,也会兼容一下代码的加载,
比如同一个 React 组件,同样可以用于服务端渲染,
而其中涉及到浏览器 API 的代码,可以选择不执行,经典的:

if (typeof window != undefined) {
  // do something
}

如果是 ClojureScript 当中遇到此类的代码,也类似:

(if (exists? js/window)
  (comment "do soemthing"))

问题

这一次是我引用了一个 https://alertifyjs.org/ 的模块,
这个 js 模块没有处理好. 对,我是从 ClojureScript 引用了 js 模块,
然后,在 shadow-cljs 打包完成运行的时候遇到了这样的问题,

ReferenceError: document is not defined

如果是 js,我在 require("alertify.js") 的写法前面加 if 就好了.
虽然对于 import 语法不能用 if,但是打包工具一般都支持 CommonJS 的.
而在 ClojureScript 当中问题比较明显,因为 ns 是个 Macro,
意味着代码在执行之前会被代码再进行处理,我是不能随便加 if 的,

(ns app.main
  (:require ["alertify.js" :as alertify]))

至少在我没搞清楚 ns 到底展开称为什么样的代码的情况下..

解决方案

于是我想到说用 shadow-cljs 对 js 模块做重定向的功能的做法,
我在打包 :node-script 这个执行脚本的时候,不要使用 alertify.js 的代码了,
转而使用一个空的 js 文件,这样就不会去访问 document 然后出错.
参考文档上的用法,应该是这样写的:

:page {:target :node-script
       :output-to "target/page.js"
       :js-options {:resolve {"alertify.js" {:target :file
                                             :file "entry/alert-ssr.js"}}}
       :main app.page/main!
       :devtools {:after-load app.page/main!}}}}

:js-options 是生效的地方,我把模块指向了一个本地的文件.

不过实际使用遇到的问题,问了作者,他在 :node-script 这个环境没开这个选项,
https://clojureverse.org/t/ho...
然后升级到了 2.3.22 版本就支持了,所以就搞定了.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!