Understanding the relationship between Clojurescript and the Google Closure compiler
Most tutorials have a file goog/base.js
included in the script tag and then use goog.require('your_script')
to run the application. For example, here is the HTML file header from the linked tutorial:
<script type="text/javascript" src="out/goog/base.js"></script>
<script type="text/javascript" src="hello.js"></script>
<script type="text/javascript">goog.require('hello');</script>
I understand that Google Closure Library is used to compile Clojurescript to Javascript. Why is this required on the HTML page? Can't it compile itself (or its required components using advanced compilation) in hello.js
the example above?
What I really want is just one javascript file, not dozens of files in /goog/
. Isn't this a compiler? I just don't understand why it should be included in the page.
source to share
You need to include the goog / base.js header when compiling with: optimizations: none.
The reason why: optimizations: none produces multiple files is because the Google Closure compiler won't run with this parameter at all. Instead, the ClojureScript compiler simply writes the compiled JavaScript directly to a file, rather than passing it through the Closure compiler. Therefore, the generated JavaScript is not optimized and multiple files are not merged into a single JavaScript file. Also discussed is this compilation mode available on page 21 ClojureScript: Up and Running (free sample including page 21 available here )
Personally, I rarely use: optimization: no and rather use: simple during development and: advanced for production.
Both: simple and: advanced produce only one JavaScript file as output, which then only requires one script tag, eg.
<script src="/js/myapp.js" type="text/javascript"></script>
I've provided a sample cljsbuild config below:
:cljsbuild {:builds [{:id "dev"
:source-paths ["src"]
:compiler {:output-to "resources/static/js-dev/myapp.js"
:output-dir "resources/static/js-dev"
:optimizations :simple
:preamble ["react/react.min.js"]
:externs ["react/externs/react.js"]
:source-map "resources/static/js-dev/myapp.js.map"
:pretty-print true}}
{:id "live"
:source-paths ["src"]
:compiler {:output-to "resources/static/js-live/myapp.js"
:output-dir "resources/static/js-live"
:optimizations :advanced
:pretty-print false
:preamble ["react/react.min.js"]
:externs ["react/externs/react.js"]}}]}
source to share