double-bundle

Demonstration of the "double-bundle" approach to integrating NPM dependencies into ClojureScript projects

PLEASE NOTE

This repository is no longer maintained. Please refer to the cljs-spa-example project instead.

Overview

You can integrate NPM dependencies in a Clojurescript project by building a separate bundle using webpack. The resulting application contains two bundles:

• js/npm-bundle.js, built by webpack
• js/compiled/double_bundle.js, built by the Clojurescript compiler (and Google Closure)

Hence the name - the double bundle approach.

Details

This project is built on Reagent and Figwheel. Note, however, that neither of these are essential - a similar approach would work for any browser-based Clojurescript project that consumes NPM dependencies.

To show how to include third party React dependencies, this project includes the react-datetime calendar component.

Setup

To see the demo, run this:

yarn install
yarn build
lein figwheel

Then open your browser at localhost:3449.

Discussion

This project is based on fighweel-template. To see the changes from an empty fighwheel template, see this diff view.

For simplicity, we're not making use of the npm-deps feature included in recent versions of the Clojurescript compiler here. The Google Closure compiler is not involved. The upside of this choice is that any NPM packages should work, as long as it is added to library.js.

Similarly, for the sake of operational simplicity, we don't provide an externs files for an external component. Instead, we use goog.object/get to retrieve the component while avoiding minification during Advanced Compilation.

TODO

• Show how to build a single prod bundle
• Does Reagent require externs in advanced compilation?

License

Copyright © 2017 Paulus Esterhazy

Distributed under the Eclipse Public License either version 1.0 or (at your option) any later version.