Javascript现在的生态系统一点也不输Java的生态，而且还在以高速的发展事态占领了企业招聘的热门技术榜单。Javascript社区不仅充满激情、创新，而且非常具有活力，同时也是一个非常开放的社区，从其他的编程语言借鉴了很多优点。

Javascript社区如此丰富的模块与库，作为ClojureScript的使用者也不得不来使用npm的模块。下面简单介绍一下如何在ClojureScript里面使用npm的module，这里用react为例说明如何使用。

Requirement

  1. leiningen
  2. figwheel
  3. cljsbuild
  4. React
  5. ReactDom

Create project

1

lein new figwheel hello-world

直接使用figwheel的templaate来创建项目

Add dependencies

修改project.clj，在cljsbuild修改id为dev的:compiler内容，添加如下代码：

1
2
3
4

:closure-defines {process.env/NODE_ENV "development"}
:install-deps true
:npm-deps {:react "16.4.1"
           :react-dom "16.4.1"}

id为min的:compiler内容，只是修改了:closure-defines：

1
2
3
4

:closure-defines {process.env/NODE_ENV "production"}
:install-deps true
:npm-deps {:react "16.4.1"
           :react-dom "16.4.1"}

:closure-defines定义的内容，可以直接在cljs里面进行读取。

Source code

ClojureScript代码如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

(ns hello-world.core
  (:require [react :refer [createElement]]
            [react-dom :refer [render]]))

(enable-console-print!)

(js/console.log "Node enviornment is" process.env/NODE_ENV)

(def appDiv (.getElementById js/document "app"))

(render
 (createElement "h1" nil "Hello, World!")
 appDiv)

require部分的使用跟cljs的包一样，可以直接从一个包require函数以及对象，剩下的部分就跟js使用react/react-dom的方式一样，调用render函数渲染元素到指定的html节点下面。

Run

1

lein figwheel

使用此命令运行代码，编译完成后figwheel会自动打开浏览器访问：http://localhost:3449/index.html，完成后你会看到下面的内容：