spacemacs配置figwheel环境
文章目录
0. …
clojure
和clojurescript
不像ruby on rails和django那样all in one的模式,只需要很少的配置就可以建立项目开始开发。clojure系的东西都是library,什么用着顺手就把什么加进来,然后稍做配置再使用。这跟emacs一样,完全私人定制,每个人都有自己的喜欢的extension,这应该是lisp系的习惯吧。所以在使用lisp系的东西的时候没有什么框架能一桶江湖。不过在clojurescript
的开发当中figwheel
还是少不了的,代码热加载功能太赞了,边写代码边看效果,不需要刷新浏览器,这就是传说的living coding。另外使用集成的IDE工具后,所有东西都有提示,敲两个字母就自动补全了,对于学习一门语言来说的确不是什么好事。闲话不多说,下面来配置一下livind coding的环境,使用spacemacs
加上cider
,info-clojure
两个扩展。
了解更多figwheel
请查看其github
1. 配置emacs
在spacemacs
的配置文件.spacemacs
的dotspacemacs-configuration-layers
添加clojure
dotspacemacs-configuration-layers '(clojure)
另外还需要inf-clojure
,由于这个扩展不在spacemacs
的layer列表里面,需要另外添加,在dotspacemacs-additional-packages
添加即可
dotspacemacs-additional-packages '(inf-clojure)
重启spacemacs
或者按SPC-f-e-R
执行dotspacemacs/sync-configuration-layers
然后还需要添加一个个启动figwheel的函数,在.spacemacs
后面添加下面的函数
(defun figwheel-repl ()
(interactive)
(run-clojure "lein figwheel"))
在后面按c-x c-e
执行上面函数的定义
2. 建立项目,修改project.clj
现在新建一个项目叫hello
lein new app hello
修改project.clj
为如下内容
(defproject hello "0.1.0-SNAPSHOT"
:description "FIXME: write description"
:url "http://example.com/FIXME"
:license {:name "Eclipse Public License"
:url "http://www.eclipse.org/legal/epl-v10.html"}
:dependencies [[org.clojure/clojure "1.8.0"]]
:plugins [[lein-figwheel "0.5.6"]] ;(1)
:main ^:skip-aot hello.core
:target-path "target/%s"
;;(2)
:cljsbuild {:builds [{:id "dev"
:source-paths ["src/cljs"]
:figwheel true
:compiler {:main "hello.core"
:asset-path "js/out"
:output-to "resources/public/js/app.js"
:output-dir "resources/public/js/out"}}]}
:profiles {:uberjar {:aot :all}})
添加了两处:
(1) 添加figwheel
的支持
(2) 添加cljsbuild
配置,这里需要注意的就是:figwheel true
这一行,这是在编译的js文件里面添加figwheel
的支持。还有:asset-path "js/out"
这一行,不然加载google closure library会找不到对应的路径。
3. 添加html
有了编译配置文件,还需要一个html页面来展示效果,添加一个index.html
到resources/public
目录
<html>
<body>
<script src="js/app.js"></script>
</body>
</html>
4. core.cljs
添加cljs源代码,需要在src
目录下面新建一个目录cljs
,由于上面的project.clj
指定的:main
是hello.core
,所以还需要在src/cljs
目录下面建一个hello
目录以跟包名匹配。然后在src/cljs/hello
目录下建一个core.cljs
文件,内容如下:
(ns hello.core)
(enable-console-print!)
(println "Hello World!")
5. run
用emacs打开hello下面的clj或者cljs文件,然后M-x figwheel-repl RET
,会出来一个*inf-clojure*
的buffer,稍微等待一会就会看到下面的内容
Figwheel: Cutting some fruit, just a sec ...
Figwheel: Validating the configuration found in project.clj
Figwheel: Configuration Valid :)
Figwheel: Starting server at http://0.0.0.0:3449
Figwheel: Watching build - dev
Compiling "resources/public/js/app.js" from ["src/cljs"]...
Successfully compiled "resources/public/js/app.js" in 6.043 seconds.
Launching ClojureScript REPL for build: dev
Figwheel Controls:
(stop-autobuild) ;; stops Figwheel autobuilder
(start-autobuild [id ...]) ;; starts autobuilder focused on optional ids
(switch-to-build id ...) ;; switches autobuilder to different build
(reset-autobuild) ;; stops, cleans, and starts autobuilder
(reload-config) ;; reloads build config and resets autobuild
(build-once [id ...]) ;; builds source one time
(clean-builds [id ..]) ;; deletes compiled cljs target files
(print-config [id ...]) ;; prints out build configurations
(fig-status) ;; displays current state of system
Switch REPL build focus:
:cljs/quit ;; allows you to switch REPL to another build
Docs: (doc function-name-here)
Exit: Control+C or :cljs/quit
Results: Stored in vars *1, *2, *3, *e holds last exception object
Prompt will show when Figwheel connects to your application
然后启动浏览器,打开http://localhost:3499/index.html
,把浏览器的console打开就会看到有Hello World!
的打印输出。*inf-clojure*
的后面会输出:
To quit, type: :cljs/quit
cljs.user=>
输入一个(js/alert "Hello World!")
试试看…
如果不是在emacs
使用的话,在命令行使用下面的命令启动figwheel
lein figwheel
QQ: 380800878, 微信: kittenll