对应的文档在 https://shadow-cljs.github.io/docs/UsersGuide.html#npm
如果想自己尝试的话, 下载这个项目的代码: https://github.com/minimal-xyz/minimal-shadow-cljs-importing-npm
教程
shadow-cljs 可以通过 npm 直接安装, 得到一个 shadow-cljs
命令. 然后再命令行启动的时候会尝试读取一个 shadow-cljs.edn
配置文件. 这个配置文件里不需要额外的配置来开启 npm 模块的支持, 默认就有的. 关于 shadow-cljs 的用法请自行搜索.
{:source-paths ["src"]
:builds {:client {:output-dir "target/"
:asset-path "./"
:target :browser
:modules {:client {:entries [app.main]}}
:devtools {:after-load app.main/reload!
:http-root "target"
:http-port 8080}}}}
例子里面用下面几个模块:
yarn add dayjs shortid lodash
JavaScript 当中使用这几个模块的 ES6 import 语法是这样:
import dayjs from "dayjs"
import shortid from "shortid"
import lodash from "lodash"
import {isString} from "lodash"
ClojureScript 里 shadow-cljs 支持的语法差不多:
(ns app.main
(:require ["dayjs" :as dayjs]
["shortid" :as shortid]
["lodash" :as lodash]
["lodash" :refer [isString]]))
JavaScript 调用代码的写法是这样:
console.log(dayjs())
console.log(shortid.generate())
console.log(isString("a string"))
console.log(lodash.isObject("a string"))
ClojureScript 里调用也差不多. 就是要注意一下 lodash/isObject
的写法, 里面用的是 /
, 因为 lodash
被作为 namespace 使用了.
(.log js/console "dayjs" (dayjs))
(.log js/console "shortid" (.generate shortid))
(.log js/console "lodash" (isString :a-keyword) (lodash/isObject {}))
文档上能看到更加详细的写法 https://shadow-cljs.github.io/docs/UsersGuide.html#npm
前面的例子是基于浏览器运行的, 同样的代码在 Node.js 欢迎应该也是适用的, 这里选的几个模块跟平台没有关系. 不过 shadow-cljs.edn
的配置需要改成 :target :node-script
, 而且文件相关的配置也要改, 具体看后面的例子: https://github.com/minimal-xyz/minimal-shadow-cljs-nodejs
更多
-
CommonJS 方案
也有一种方案是把 ClojureScript 编译到 CommonJS 格式的代码, 然后 Webpack 就能对编译或的文件进行打包了, 这个方案验证了是可行的. 不过实际操作使用两个环境会比较麻烦, 而且 Webpack 对 ClojureScript 没有专门的优化, 其实还是需要 shadow-cljs 这边多处理一下, 具体看以前的记录了: https://clojureverse.org/t/beginner-guide-to-compile-clojurescript-to-commonjs-and-use-webpack/523/2 -
官方解决方案
最近官方也更新了一套方案, 可以将模块用 Webpack 打包, 然后在 ClojureScript 编译工具当中配置引入, 步骤相对来说比较多, 看一下教程: https://clojureverse.org/t/new-guide-clojurescript-with-webpack/2275/17 .
现在的话处理 npm 模块就方便多了, 如果遇到问题, 反馈一下, shadow-cljs 那边也会很快修复.