Chrome Extension in CLJS —— 搭建开发环境

  • 时间:
  • 浏览:0

最后得到的project.clj为

http://astashov.github.io/blog/2014/07/100/perfect-clojurescript-development-environment-with-vim/

https://github.com/emezeske/lein-cljsbuildhttps://nvbn.github.io/2014/12/07/chrome-extension-clojurescript/https://github.com/binaryage/cljs-devtools/blob/master/docs/configuration.mdhttps://clojurescript.org/tools/testinghttps://github.com/google/closure-compiler/wiki/Externs-For-Common-Libraries

 到这一步朋友会发现哪来的browser_action.js啊?先别焦急,这里涉及到Browser Action的运行环境与google closure compiler输出不兼容的大问題。

 接下来新建resources/public/browser_action.html,并修改内容如下

在vim中运行

 这里有个限制,假若default_popup所指向页面中那么占据 内联脚本,而optimizations :none时google closure compiler会输出如下东东到ignoreme.js

 cljs要被编译为js后不能被运行,这里我采用leiningen。

在shell中运行

2.安装nRepl后面 件piggieback

 nRepl假若网络repl,能那么接收客户端的脚本,否则将运行结果回显到客户端。朋友能那么通过lein repl启动Clojure的nRepl。

 而fireplace则是集成到vim上连接nRepl的客户端,但默认启动的仅仅是Clojure的nRepl,要是我要通后后面 件附加cljs的nRepl。这是朋友只需在project.clj中去掉 依赖即可。

 通过vim-fireplace朋友能那么手不离vim,查阅API文档,和查阅项目代码定义哦!

1.装vim插件

以前就设置好fireplace和nrepl间的链接了。

5.别开心太早

 我假若知道是那此原应分析朋友那么用fireplace中累积的功能而已,如通过:Source <symbol>查看定义,:FindDoc <keyword>查看匹配的Docstring,但无法通过:Doc <symbol>来查看某标识的Docstring。

 另外若要通过:Source <symbol>查看当前项目的定义时,请先lein build将项目编译好,否则无法查看。另外3个多十分重要的信息是,在optimizations不为:none的项目下的文件是无法执行fireplace的指令的,要是我在开发Content Scrpts时就十分痛苦了~~~

 首先抛开将cljs编译为js、调试、测试和发布等大问題,首先第一要务是写得爽~

 cljs中最你能那么很伤心 的假若括号(),过去你能那么不能那么改个语法以换行来代替括号呢?而paredit.vim正好处置这一大问題。

随着对cljs的应用的深入,我会逐步完善上述配置^_^

尊重原创,转载请注明来自:http://www.cnblogs.com/fsjohnhuang/p/7622745.html ^_^肥仔John

在.vimrc中去掉

这里朋友就搞定Browser Action/Popup的编译运行环境了^_^。朋友有那么发现goog.require("crx_demo.core")这一句呢?朋友的命名空间名称有的是crx-demo.core吗?注意了,编译后不仅路径上-会变成_,连在goog中声明的命名空间名称也会将-变成了_

否则再新增3个多测试用的子项目

 辛苦开发后朋友将optimizations设置为advanced后编译优化,将作品发布时发现累似 如下的报错

否则在shell中输入lein doo node test-proj

 到这里朋友似乎可写上一小段cljs,否则编译运行了。且慢,那么任何智能提示就算了,还老是 要上网查阅API DOC,你选着要以前开发下去?

否则在test/crx_demo下新建3个多runner.cljs文件,并写入如下内容

1.访问https://github.com/google/closure-compiler/tree/master/contrib/externs,将chrome.js和chrome_extensions.js下载到项目中的externs目录下

2.配置project.clj文件

这究竟是那此回事呢?

开发时最多假若将optimizations设置为simple,这时标识符并那么被压缩,要是我如chrome.runtime.onMessage.addListener等内外部定义标识符依然是原装的。但启用advanced编译模式后,可能性上述内外部标识符的定义那么来越多纳入GCC的编译范围,否则GCC仅仅将调用累积代码压缩了,而定义累积还是原封不动,那么在运行时调用中自然而然就找那么相应的定义咯。Cljs早已为朋友找到了处置办法,那假若去掉 extern文件,extern文件中描述内外部函数、变量等声明,那么GCC根据extern中的声明将不对调用代码中同签名的标识符作压缩。

示例:chrome的extern文件chrome.js片段

 磨刀不误砍柴工,本篇将介绍何如搭建Chrome插件的ClojureScript开发环境。

具体工具栈:vim(paredit,tslime,vim-clojure-static,vim-fireplace) + leiningen(lein-cljsbuild,lein-doo,lein-ancient) + com.cemerick/piggieback

否则在代码中通过js/console.logjs/console.info等输出的内容就会被格式化的了。

3.将clojure repl升级cljs repl

 通过lein repl朋友建立了3个多cljs nrepl供fireplace使用,但在终端中朋友看到的是3个多clojure的repl,而tslime恰好要用的假若这一终端的repl。那现在朋友假若在clojure repl中执行(cemerick.piggieback/cljs-repl (cljs.repl.rhino/repl-env))即可。

否则就能那么在vim中把光标移动到相应的表达式上按<C-c><C-c>,那么这一表达式就会自动克隆粘放进repl中执行了。

 为了保证开发的质量,单元测试何如能少呢?在project.clj中加入

 可能性cljs拥有比js更为雄厚的数据类型,也假若说直接将朋友输出到浏览器的console中时,显示的格式会不太清晰。于是朋友须要为浏览器安装插件,但通过devtools朋友就不必显式为浏览器安装插件不能达到效果(太神奇了!)

在project.clj中加入

 上述配置很明显我是将browser_action和content_scripts作为3个多独立的子项目,觉得Chrome插件中Browser ActionPage ActionContent ScriptsBackground等均是相对独立的模块相互那么来越多依存,否则它们运行的办法和环境不尽相同,否则将它们作为独立子项目配置、编译和优化更适合。

  否则新建resources/public/img目录,并附上名为icon.jpg的图标即可。

&esmp;否则在resources/public下新建manifest.json文件,修改内容如下

 在shell中更新依赖lein deps

3.设置fireplace监听端口

 在项目目录下创建文件,echo 9000 > .nreplport

4.启动nRepl,lein repl

 这时在vim中输入:Source map就会看到cljs.core/map的定义,若不行则按如下设置:

更多用法就通过:help paredit查看paredit的文档即可。

否则创建crx-demo.content-scripts.util-test.cljs测试用例文件

这很明显假若加入内联脚本嘛~~~要是我朋友要手工修改一下,新增3个多resources/public/browser_action.js,否则去掉 如下内容

 那有那此这一办法呢?不怕有tslime.vim帮朋友啊!

工程目录中的project.clj假若工程文件,朋友将其修改如下

2..vimrc配置

在vim中运行

在vim中运行

 tslime.vim让朋友能那么通过快捷键将vim中内容快速地克隆到repl中执行

1.安装vim插件

 可能性content scripts是直接运行脚本,那么页面让朋友如popup那样控制脚本加载办法和顺序,否则那么通过optimizations :whitespace将所有依赖打包成3个多js文件了。也假若说编译起来会相对慢要是我~要是我~多~~~