Skip to content
Juho Teperi edited this page Aug 4, 2017 · 1 revision

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.

Compilation Levels

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)

Same HTML for Development and Production

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

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.

Options

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.

Incremental Builds

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 and speak tasks are not part of boot-cljs–they're built-in tasks that come with boot.

Multiple Builds

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 the foo.bar CLJS namespace. This namespace will :require any namespaces given in the :require key of the EDN, and add a do 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 be foo/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.

Preamble and Externs Files

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.