ClojureScript 1.10.x 新技能 cljs.main 快速开启

栏目: 编程语言 · Clojure · 发布时间: 6年前

内容简介:翻译自遇到问题, 请用英文反馈至内容:

翻译自 https://github.com/clojure/cl...

遇到问题, 请用英文反馈至 https://clojureverse.org/t/cl...

内容:

  • ClojureScript 编译器
  • 生产环境编译
  • 在 Node.js 环境运行 ClojureScript

    • Node.js REPL
  • 依赖

这个版本基于 macOS 或者 Linux, 需要系统已经依赖 Clojure. Windows 用户请查看英文版.

ClojureScript 编译器

首先创建项目文件:

mkdir hello_world; cd hello_world
mkdir -p src/hello_world; touch src/hello_world/core.cljs

在项目中创建 deps.edn 文件, 其中添加依赖:

{:deps {org.clojure/clojurescript {:mvn/version "1.10.126"}}}

在文件 src/hello_world/core.cljs 中填写代码:

(ns hello-world.core)

(println "Hello world!")

新手需要注意一下, 这里的文件路径, 跟 src/ 这个默认的资源路径, 和 hello-world.core 这个命名空间对应. 同时, 连字符在 Java 世界需要在文件名当中改成 _ . 这个对于新手很容易造成误会.

然后可以启动 ClojureScript 环境了:

clj -m cljs.main -c hello-world.core -r

这个命令将会启动一个浏览器, 同时在命令行打印 "Hello World!", 以及启动一个 REPL. 接下来可以在 REPL 当中尝试运行一些代码:

(inc 1)
(map inc [1 2 3])
(.getElementById js/document "app")

回来看下命令参数, -m 全称是 --main , 调用 Clojure 函数, 这里是 cljs.main 当中的默认的 -main 函数. cljs.main/-main 支持一些其他的参数对应具体的任务, 比如这里 -c 全称 --compile 表示编译. 后面的 -r 全称是 --repl 表示同时启动一个 REPL:

然后试一下更新代码, 刚才那个文件更新成:

(ns hello-world.core)

(println "Hello world!")

;; ADDED
(defn foo [a b]
  (+ a b))
(require '[hello-world.core :as hello] :reload)
(hello/foo 2 3)

正常的话你会看到结果 5 . (注: 然而看上去这里是有 bug 的. 实际运行代码并没有更新成功. 而且报错也没有预期的 .cljs 文件.)

clj -m cljs.main -h

生产环境编译

你注意到生成的 out/ 目录的话, 会发现其中有好几个 M 的文件内容. 这就需要 Google Closure Compiler 来帮助编译优化, 从而得到适合浏览器环境使用的代码. 主要依赖代码压缩和 Dead Code Elimination.

我们先把文件代码恢复到 src/hello_world/core.cljs 之前的:

(ns hello-world.core)

(println "Hello world!")

-O 全称 --optimizations 参数来构建. 默认的构建 level 是 none , 这里我们需要 Google Closure Compiler 全部的优化, 就制定 advanced . 此外 -O 还有两个 level 分别是 whitespacesimple .

clj -m cljs.main -O advanced -c hello-world.core

这个编译过程会有点费时间.

最后生成的 out/main.js 文件应该是 90k 左右, zip 之后还回到 20k . 这已经比 jQuery 要小了. ClojureScript 依赖的标准库大约 10kloc , 依赖的 Google Closure Library 大约(200kloc), 可以看到 Dead Code Elimination 是起作用了的.

你可以通过 -s 全称 --sever 参数启动一个服务器来确认文件正常工作:

clj -m cljs.main -s

这个命令仅仅启动服务器, 你需要自动打开 http://localhost :9000 的网页来看运行结果, 包括在 Console 里看 Hello World! 的内容. 这个服务器开启了 gzip, 在调试 工具 当中应该看到 js 文件体积大约应该是 20k.

在 Node.js 环境运行 ClojureScript

Node.js 安装过程就不说了, 版本号总之别太低. SourceMaps 需要自己安装一下依赖:

npm install source-map-support

生成 Node 项目的话, 需要通过 -t 全称 --target 来指定目标. 默认的目标是浏览器, 其他目标还有 nashornrhino 这类的 JavaScript 运行环境. 这里还用到了 -o 全称 --output-to 来指定输出文件:

clj -m cljs.main -t node -o main.js -c hello-world.core

然后可以运行生成的文件:

node main.js

注意: 对于 Node 环境来说, 优化代码的意义就不太大了, 引擎能力就很强大了, 一般用 simple 或者 none 作为 level 已经够了.

Node.js REPL

跟前面浏览器的例子一样, 可以启动一个 Node.js 的 REPL. 指定 REPL 的环境用 -re 全称 --repl-env . 默认情况下是浏览器, 所以这里需要指定是 node :

clj -m cljs.main -re node

然后应该就启动了一个运行在 Node.js 上的 ClojureScript REPL.

依赖

ClojureScript 支持多种加载依赖的方式... 需要参考一下其他文档.

惯例 React 可以再 CLJSJS 项目当中找到一个处理过的可以直接引用的版本(注: 直接从 npm 引用更简单, 这个教程不涉及到). 总之这个例子从 CLJSJS 引用 React.

{:deps {org.clojure/clojurescript {:mvn/version "1.10.126"}
        cljsjs/react-dom {:mvn/version "16.2.0-3"}}}

我们来使用调用一下 react-dom 模块的代码

(ns hello-world.core
  (:require react-dom))

(.render js/ReactDOM
  (.createElement js/React "h2" nil "Hello, React!")
  (.getElementById js/document "app"))

运行一下浏览器环境:

clj -m cljs.main -c hello-world.core -r

然后你应该能看到一个页面渲染很大的 Hello react! 的文字了.


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

硅谷钢铁侠

硅谷钢铁侠

[美] 阿什利·万斯 / 周恒星 / 中信出版集团 / 2016-4 / 68.00元

◎全球首部埃隆•马斯克授权著作!了解埃隆•马斯克最全面、最真实、最经典读本 ◎创业者必读。首次披露马斯克如何建立和运营PayPal、特斯拉、Space X、Solar City等公司的细节。 ◎创新者必读。关于科技、梦想、创业、工作、团队、人生。马斯克首次公开创新的秘密。 ◎故事迷必读。硅谷最优秀科技作家阿什利•万斯历时将近4年,遍访300余人,写就记录马斯克传奇人生的经典著作。......一起来看看 《硅谷钢铁侠》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试