内容简介:翻译自遇到问题, 请用英文反馈至内容:
翻译自 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 分别是 whitespace
和 simple
.
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
来指定目标. 默认的目标是浏览器, 其他目标还有 nashorn
和 rhino
这类的 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!
的文字了.
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Effective JavaScript
赫尔曼 (David Herman) / 黄博文、喻杨 / 机械工业出版社 / 2014-1-1 / CNY 49.00
Effective 系列丛书经典著作,亚马逊五星级畅销书,Ecma 的JavaScript 标准化委员会著名专家撰写,JavaScript 语言之父、Mozilla CTO —— Brendan Eich 作序鼎力推荐!作者凭借多年标准化委员会工作和实践经验,深刻辨析JavaScript 的内部运作机制、特性、陷阱和编程最佳实践,将它们高度浓缩为极具实践指导意义的 68 条精华建议。 本书共......一起来看看 《Effective JavaScript》 这本书的介绍吧!