# Beginner guide to compile ClojureScript to CommonJS and use Webpack

**URL:** https://clojureverse.org/t/beginner-guide-to-compile-clojurescript-to-commonjs-and-use-webpack/523
**Category:** shadow-cljs
**Created:** [September 1, 2017, 5:43pm UTC](https://clojureverse.org/t/beginner-guide-to-compile-clojurescript-to-commonjs-and-use-webpack/523 "2017-09-01T17:43:10Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![jiyinyiyong](https://clojureverse.org/user_avatar/clojureverse.org/jiyinyiyong/32/85_2.png) [@jiyinyiyong](https://clojureverse.org/u/jiyinyiyong)
#### Post date: [September 1, 2017, 5:43pm UTC](https://clojureverse.org/t/beginner-guide-to-compile-clojurescript-to-commonjs-and-use-webpack/523/1 "2017-09-01T17:43:10Z")

</div>

shadow-cljs is a ClojureScript compiler which friendly to JavaScript developers.

> **[thheller/shadow-cljs](https://github.com/thheller/shadow-cljs)**
>
> ClojureScript compilation made easy. Contribute to thheller/shadow-cljs development by creating an account on GitHub.

By default, ClojureScript code is compiled to JavaScript in Google Closure Compiler modules, which uses namespaces to manage files(or modules). However, nowadays the JavaScript community has changed a lot since the year Google Closure Compiler was born. We used CommonJS and will use ES6 modules for numerous JavaScript modules on npm.

Meanwhile, in order to reuse our knowledge from Webpack, the shortest path is to compile ClojureScript to CommonJS or ES6 code that Webpack consumes. **And shadow-cljs can do it.**

To install shadow-cljs, you need to Node.js installed, then you can use npm. Say we are using macOS:

```bash
brew install nodejs
npm install -g shadow-cljs

```

To run shadow-cljs, a configuration file called `shadow-cljs.edn` is required:

```auto
{:source-paths ["src"]
 :dependencies [[mvc-works/hsl "0.1.2"]]
 :builds {:app {:target :npm-module
                :output-dir "compiled/"}}}

```

In this example,

- `source-paths` is where we put source code
- `dependencies`, well…
- `builds` is a map with build ids and build configurations, and currently the `build-id` is `:app`.
- `target` specifies which platform(or usage) the code is compiled:
- 
  - `:npm-module` stands for CommonJS modules

- 
  - `:browser` stands for web browsers

- 
  - `:node-script` stands for a standalone Node.js script

- `output-dir` is where the code is emitted to

Then, to compile ClojureScript in `src/` to JavaScript in CommonJS to `compiled/`, just run the `build-id` called `:app`:

```bash
shadow-cljs compile app

```

It should work now. You may also need to check the full example here:

> **[minimal-xyz/minimal-shadow-cljs-webpack](https://github.com/minimal-xyz/minimal-shadow-cljs-webpack)**
>
> Live coding ClojureScript with Webpack and shadow-cljs - minimal-xyz/minimal-shadow-cljs-webpack

And to learn more about how to use shadow-cljs, please take a look that the README and Wiki pages of shadow-cljs:

> **[thheller/shadow-cljs](https://github.com/thheller/shadow-cljs#configuration)**
>
> ClojureScript compilation made easy. Contribute to thheller/shadow-cljs development by creating an account on GitHub.

If you got and thoughts, please share with use on [Slack](https://clojurians.slack.com/messages/C6N245JGG/) or fire [Issues](https://github.com/thheller/shadow-cljs/issues).

---

<div class="post-metadata">

### Author: ![jiyinyiyong](https://clojureverse.org/user_avatar/clojureverse.org/jiyinyiyong/32/85_2.png) [@jiyinyiyong](https://clojureverse.org/u/jiyinyiyong)
#### Post date: [June 17, 2018, 4:57pm UTC](https://clojureverse.org/t/beginner-guide-to-compile-clojurescript-to-commonjs-and-use-webpack/523/2 "2018-06-17T16:57:15Z")

</div>

Wow, I saw someone just clicked this topic. This post is really old. shadow-cljs might be release tens of versions since then. I’m not using `:target :npm-module` today since shadow-cljs offered better experience import npm modules after that. I’m curious is anyone still using this `:target` today?

---

<div class="post-metadata">

### Author: ![jiyinyiyong](https://clojureverse.org/user_avatar/clojureverse.org/jiyinyiyong/32/85_2.png) [@jiyinyiyong](https://clojureverse.org/u/jiyinyiyong)
#### Post date: [December 17, 2018, 4:57am UTC](https://clojureverse.org/t/beginner-guide-to-compile-clojurescript-to-commonjs-and-use-webpack/523/3 "2018-12-17T04:57:27Z")

</div>

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.
