-
Notifications
You must be signed in to change notification settings - Fork 40
(OLD) Usage
Add ClojureScript and boot-cljs
to your build.boot
dependencies and require
the namespace:
(set-env! :dependencies [[adzerk/boot-cljs "X.Y.Z" :scope "test"]])
(require '[adzerk.boot-cljs :refer [cljs]])
You can see the options available on the command line:
boot cljs -h
Or in the REPL:
boot.user=> (doc cljs)
You can see debug level output from the task by setting boot's logging level:
boot -vv cljs
This will show the options being passed to the CLJS compiler.
The ClojureScript compiler uses the Google Closure compiler to generate
optimized JavaScript when desired. There are three different Closure
compilation levels: whitespace
, simple
, and
advanced
. You may specify the desired compilation level with the -O
or --optimizations
option:
boot cljs -O advanced
The default level is none
, which bypasses the Closure compiler completely.
This is handy for development work because it's very fast.
Note that the compilation process generates the main.out
folder in any of
the optimizations
settings. For source maps to work you need both main.out
and main.js.map
in your served folder.
In case you do not need source maps however, you can either skip the upload
or better filter the folder out using sift
:
(sift :include #{#"\.out"} :invert true)
The HTML file will always need to have a <script>
tag to load the compiled
JavaScript:
<script type='text/javascript' src='main.js'></script>
Source maps associate locations in the compiled JavaScript file with
the corresponding line and column in the ClojureScript source files. When source
maps are enabled (the -s
or --source-map
option) the browser developer tools
will refer to locations in the ClojureScript source rather than the compiled
JavaScript.
boot cljs -s
You may need to enable source maps in your browser's developer tools settings.
Option | Description | Task option | .cljs.edn |
---|---|---|---|
optimizations |
:none (default), :advanced
|
× | |
source-map |
Use source maps (default true for :none optimization) |
× | |
ids |
Selected .cljs.edn files |
× | |
require |
Namespaces to require on load | × | |
init-fns |
Functions to call on load | × | |
compiler-options |
Cljs compiler options | × | × |
The cljs
task normally does a good job of figuring out which options to pass
to the compiler on its own. However, options can be provided via the -c
or
--compiler-options
option, to provide specific options to the CLJS compiler:
boot cljs -c '{:target :nodejs}'
NOTE that the CLJS compiler's :output-to
and :output-dir
options will be overridden by the cljs
task. These options are determined by the name and location of a .cljs.edn
. By default the cljs
task will automatically create a main.cljs.edn
file in the root of the fileset, which will result in a main.js
in the root of the output directory.
You can run boot such that it watches source files for changes and recompiles the JavaScript file as necessary:
boot watch cljs
You can also get audible notifications whenever the project is rebuilt:
boot watch speak cljs
Note: The
watch
andspeak
tasks are not part ofboot-cljs
–they're built-in tasks that come with boot.
The cljs
task provides a way to specify application entry points at which it
can point the CLJS compiler for compilation. These entry points are provided
via files with the .cljs.edn
extension.
These files have the following structure (e.g. js/index.cljs.edn
):
{:require [foo.bar baz.baf]
:init-fns [foo.bar/init baz.baf/doit]
:compiler-options {:target :nodejs}}
For each .cljs.edn
file in the fileset, the cljs
task will:
-
Create a CLJS namespace corresponding to the file's path, e.g. given the file
foo/bar.cljs.edn
it will create thefoo.bar
CLJS namespace. This namespace will:require
any namespaces given in the:require
key of the EDN, and add ado
expression that calls any functions in:init-fns
at the top level. These functions will be called with no arguments. -
Configure compiler options according to
:compiler-options
key of the EDN, if there is one. -
Configure the compiler to produce compiled JS at a location derived from the file's path, e.g. given the file
foo/bar.cljs.edn
the output JS file will befoo/bar.js
. -
Point the CLJS compiler at the generated namespace only. This "scopes" the compiler to that namespace plus any transitive dependencies via
:require
.
The example above would result in the following CLJS namespace, js/index.cljs
:
(ns js.index
(:require foo.bar baz.baf))
(do (foo.bar/init)
(baz.baf/doit))
The result would be compiled to js/index.js
. This is the JS script you'd add
to the application's HTML file via a <script>
tag.
Jars with deps.cljs
, like the ones provided by cljsjs can
be used to supply Javascript libraries. If you need to use local js files
you can manually create deps.cljs in your local project:
src/deps.cljs:
{:foreign-libs [{:file "bar.js"
:provides ["foo.bar"]}]
:externs ["bar.ext.js"]}
src/bar.js:
function foo() {
console.log("Hello world from local js");
}
src/bar.ext.js:
foo = function() {};
these files should be in the source tree (likely src/
or src/cljs
), you can see an example
here.