clojurscrite에 대한 shadow-cljs
18333 단어 JavaScriptClojureScript
shadow-cljs 소개
shadow-cljs는closureescrits 코드를 컴파일하는 데 사용되는 도구입니다.clojurscriept의 구축 도구는figwheel-main 등 다른 몇 가지가 있지만 npm와yarn 등 표준적인javascript의 환경과 친화성이 좋은 것이 특징이며 npm의 포장은 직접 이용하기에 매우 편리하다.
shadow-cljs는 Thomas Heller에서 개발했습니다.
shadow-cljs에 필요한 환경은 다음과 같습니다.
shadow-cljs 프로젝트 만들기
npx를 설치합니다.npx와 프로젝트 사용하기경로 지정 없이modules 폴더 내의 바이너리를 직접 실행할 수 있습니다.npm install npx -g
최신 npm에는 npx가 포함되어 있기 때문에 설치할 필요가 없을 수도 있습니다.
이 npx를 사용하여 새 프로젝트를 만듭니다.$ npx create-cljs-project my-app
npx: 1個のパッケージを2.051秒でインストールしました。
(中略)
Done. Actual project initialization will follow soon.
----
그럼, 새로운 프로젝트가 완성되었으니 그 구성을 살펴보자.$ cd my-app
$ ls
node_modules/ package-lock.json package.json shadow-cljs.edn src/
shadow-cljs.edn을 제외하고javascript에서 익숙한 항목 구성은 패키지입니다.json과 shadow-cljs.edn을 사용하여 진행합니다.
package.json은 node의 의존 파일과 실행 명령을 기술합니다.생성된 내용은 다음과 같습니다.
{
"name": "my-app",
"version": "0.0.1",
"private": true,
"devDependencies": {
"shadow-cljs": "2.8.83"
},
"dependencies": {}
}
새 라이브러리를 추가하려면 npm이나yarn 명령으로 추가하십시오. 패키지입니다.제이슨에게도 의존 관계를 추가했다.
shadow-cljs.edn은closureescrite의 구성에 대해 기술합니다.기본 소스 코드 설정은source-paths에 쓰여 있습니다. 변경하려면 여기서 수정하십시오.;; shadow-cljs configuration
{:source-paths
["src/dev"
"src/main"
"src/test"]
:dependencies
[]
:builds
{}}
브라우저 리플을 시작합니다.
npx를 사용하여 브라우저 리플을 시작하면 브라우저의javascript에서clojurscrite의repl을 사용할 수 있습니다.$ npx shadow-cljs browser-repl
shadow-cljs - config: /export/clojure/advanced-clojure/7.advanced-cljs/my-app/shadow-cljs.edn cli version: 2.8.83 node: v8.10.0
shadow-cljs - server version: 2.8.83 running at http://localhost:9630
shadow-cljs - nREPL server started on port 36415
[:browser-repl] Configuring build.
[:browser-repl] Compiling ...
[:browser-repl] Build completed. (135 files, 1 compiled, 0 warnings, 3.59s)
cljs.user=>
브라우저는 다음과 같이 시작합니다.
리플의 알림이 나타나면closureescrite 프로그램을 입력하여 결과가 있는지 확인하십시오.브라우저에 경고를 표시할 수도 있습니다.cljs.user=> (+ 1 1)
2
cljs.user=> (js/alert "Hello world!")
nil
코드 생성 및 실행 간단한clojouescript
다음에 소스 코드를 만들어서 실행해 보세요.
smc/mainにmyHello World에 app라는 디렉터리를 만듭니다.cljs라는 파일을 만들고 다음과 같은 내용을 만듭니다.src/main/my_app/
└── helloworld.cljs
코드는 콘솔에 Hello World를 표시합니다.(ns my-app.helloworld)
(defn init []
(println "Hello World!"))
다음 index에 공공 디렉터리를 만듭니다.제작은 다음과 같다.public/
└── index.html
HTML 코드는 다음과 같습니다.<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>helloworld example</title>
</head>
<body>
<div id="app"></div>
<script src="/js/main.js" type="text/javascript"></script>
</body>
</html>
쓰기 위한 원본 코드: dev-http와:builds 항목을 추가합니다.
시작할 때 이동하는 함수는:module->:main 항목에 설명되어 있습니다.dev-http 항목에서 브라우저가 접근하는 포트를 지정합니다.;; shadow-cljs configuration
{:source-paths
["src/dev"
"src/main"
"src/test"]
:dependencies
[]
:dev-http {8080 "public"}
:builds
{:hello
{:target :browser
:modules {:main {:init-fn my-app.helloworld/init}}
}}
}
npx를 사용하여 실행합니다.$ npx shadow-cljs watch hello
shadow-cljs - config: /export/clojure/advanced-clojure/7.advanced-cljs/my-app/shadow-cljs.edn cli version: 2.8.83 node: v8.10.0
shadow-cljs - HTTP server available at http://localhost:8080
shadow-cljs - server version: 2.8.83 running at http://localhost:9630
shadow-cljs - nREPL server started on port 35655
shadow-cljs - watching build :hello
[:hello] Configuring build.
[:hello] Compiling ...
[:hello] Build completed. (135 files, 1 compiled, 0 warnings, 3.29s)
브라우저를 시작하고 localhost:8080에 액세스합니다.
그리고 브라우저의 개발 도구로 컨트롤러를 보세요.
그럼 Hello World!를 입력합니다.
콘솔에 출력된 정보를 수정해 보십시오.(ns my-app.helloworld)
(defn init []
(js/alert "test")
(println "こんにちは!"))
Browser repl은 소스 코드의 변경 사항을 감지하고 자동으로 컴파일합니다.[:hello] Compiling ...
[:hello] Build completed. (135 files, 1 compiled, 0 warnings, 0.17s)
브라우저를 다시 불러올 때, 변경된 메시지를 발견할 수 있습니다.
회신 사용
이번에는 Hello World!를 입력합니다.
package.json에서react 관계를 기술한 총서.{
"name": "my-app",
"version": "0.0.1",
"private": true,
"devDependencies": {
"shadow-cljs": "2.8.83"
},
"dependencies": {
"all": "^0.0.0",
"create-react-class": "15.6.3",
"react": "16.3.2",
"react-dom": "16.3.2"
}
}
shadow-cljs.edn에서reagent와 devtools의 의존 관계를 기술합니다.또한 새로 만든reagent 기술 코드입니다.새 my-app core.cljs를 만들고 init 함수를 시작합니다.;; shadow-cljs configuration
{:source-paths
["src/dev"
"src/main"
"src/test"]
:dependencies
[
[binaryage/devtools "0.9.10"]
[reagent "0.8.0"]
]
:dev-http {8080 "public"}
:builds
{:hello
{:target :browser
:modules {:main {:init-fn my-app.helloworld/init}}
}
:app {:target :browser
:output-dir "public/js"
:asset-path "/js"
:modules
{:main
{:entries [my-app.core]}}
:devtools
{:after-load my-app.core/init
:http-root "public"
:http-port 3000}}
}
}
core.cljs 내용입니다.브라우저에 Hello World를 표시하는 reagent 코드입니다.(ns my-app.core
(:require [reagent.core :as r])
)
(def greeting "Hello World!")
(defn app []
[:div greeting])
(defn stop []
(js/console.log "Stopping..."))
(defn start []
(js/console.log "Starting...")
(r/render [app]
(.getElementById js/document "app")))
(defn ^:export init []
(start))
npx를 통해 시작합니다.$ npx shadow-cljs watch app
이번에는 Hello World가 브라우저에 표시됩니다.
Reference
이 문제에 관하여(clojurscrite에 대한 shadow-cljs), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/lambda-knight/items/a69df35405b26f7a79cf
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
npm install npx -g
$ npx create-cljs-project my-app
npx: 1個のパッケージを2.051秒でインストールしました。
(中略)
Done. Actual project initialization will follow soon.
----
$ cd my-app
$ ls
node_modules/ package-lock.json package.json shadow-cljs.edn src/
{
"name": "my-app",
"version": "0.0.1",
"private": true,
"devDependencies": {
"shadow-cljs": "2.8.83"
},
"dependencies": {}
}
;; shadow-cljs configuration
{:source-paths
["src/dev"
"src/main"
"src/test"]
:dependencies
[]
:builds
{}}
npx를 사용하여 브라우저 리플을 시작하면 브라우저의javascript에서clojurscrite의repl을 사용할 수 있습니다.
$ npx shadow-cljs browser-repl
shadow-cljs - config: /export/clojure/advanced-clojure/7.advanced-cljs/my-app/shadow-cljs.edn cli version: 2.8.83 node: v8.10.0
shadow-cljs - server version: 2.8.83 running at http://localhost:9630
shadow-cljs - nREPL server started on port 36415
[:browser-repl] Configuring build.
[:browser-repl] Compiling ...
[:browser-repl] Build completed. (135 files, 1 compiled, 0 warnings, 3.59s)
cljs.user=>
리플의 알림이 나타나면closureescrite 프로그램을 입력하여 결과가 있는지 확인하십시오.브라우저에 경고를 표시할 수도 있습니다.
cljs.user=> (+ 1 1)
2
cljs.user=> (js/alert "Hello world!")
nil
코드 생성 및 실행 간단한clojouescript
다음에 소스 코드를 만들어서 실행해 보세요.
smc/mainにmyHello World에 app라는 디렉터리를 만듭니다.cljs라는 파일을 만들고 다음과 같은 내용을 만듭니다.src/main/my_app/
└── helloworld.cljs
코드는 콘솔에 Hello World를 표시합니다.(ns my-app.helloworld)
(defn init []
(println "Hello World!"))
다음 index에 공공 디렉터리를 만듭니다.제작은 다음과 같다.public/
└── index.html
HTML 코드는 다음과 같습니다.<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>helloworld example</title>
</head>
<body>
<div id="app"></div>
<script src="/js/main.js" type="text/javascript"></script>
</body>
</html>
쓰기 위한 원본 코드: dev-http와:builds 항목을 추가합니다.
시작할 때 이동하는 함수는:module->:main 항목에 설명되어 있습니다.dev-http 항목에서 브라우저가 접근하는 포트를 지정합니다.;; shadow-cljs configuration
{:source-paths
["src/dev"
"src/main"
"src/test"]
:dependencies
[]
:dev-http {8080 "public"}
:builds
{:hello
{:target :browser
:modules {:main {:init-fn my-app.helloworld/init}}
}}
}
npx를 사용하여 실행합니다.$ npx shadow-cljs watch hello
shadow-cljs - config: /export/clojure/advanced-clojure/7.advanced-cljs/my-app/shadow-cljs.edn cli version: 2.8.83 node: v8.10.0
shadow-cljs - HTTP server available at http://localhost:8080
shadow-cljs - server version: 2.8.83 running at http://localhost:9630
shadow-cljs - nREPL server started on port 35655
shadow-cljs - watching build :hello
[:hello] Configuring build.
[:hello] Compiling ...
[:hello] Build completed. (135 files, 1 compiled, 0 warnings, 3.29s)
브라우저를 시작하고 localhost:8080에 액세스합니다.
그리고 브라우저의 개발 도구로 컨트롤러를 보세요.
그럼 Hello World!를 입력합니다.
콘솔에 출력된 정보를 수정해 보십시오.(ns my-app.helloworld)
(defn init []
(js/alert "test")
(println "こんにちは!"))
Browser repl은 소스 코드의 변경 사항을 감지하고 자동으로 컴파일합니다.[:hello] Compiling ...
[:hello] Build completed. (135 files, 1 compiled, 0 warnings, 0.17s)
브라우저를 다시 불러올 때, 변경된 메시지를 발견할 수 있습니다.
회신 사용
이번에는 Hello World!를 입력합니다.
package.json에서react 관계를 기술한 총서.{
"name": "my-app",
"version": "0.0.1",
"private": true,
"devDependencies": {
"shadow-cljs": "2.8.83"
},
"dependencies": {
"all": "^0.0.0",
"create-react-class": "15.6.3",
"react": "16.3.2",
"react-dom": "16.3.2"
}
}
shadow-cljs.edn에서reagent와 devtools의 의존 관계를 기술합니다.또한 새로 만든reagent 기술 코드입니다.새 my-app core.cljs를 만들고 init 함수를 시작합니다.;; shadow-cljs configuration
{:source-paths
["src/dev"
"src/main"
"src/test"]
:dependencies
[
[binaryage/devtools "0.9.10"]
[reagent "0.8.0"]
]
:dev-http {8080 "public"}
:builds
{:hello
{:target :browser
:modules {:main {:init-fn my-app.helloworld/init}}
}
:app {:target :browser
:output-dir "public/js"
:asset-path "/js"
:modules
{:main
{:entries [my-app.core]}}
:devtools
{:after-load my-app.core/init
:http-root "public"
:http-port 3000}}
}
}
core.cljs 내용입니다.브라우저에 Hello World를 표시하는 reagent 코드입니다.(ns my-app.core
(:require [reagent.core :as r])
)
(def greeting "Hello World!")
(defn app []
[:div greeting])
(defn stop []
(js/console.log "Stopping..."))
(defn start []
(js/console.log "Starting...")
(r/render [app]
(.getElementById js/document "app")))
(defn ^:export init []
(start))
npx를 통해 시작합니다.$ npx shadow-cljs watch app
이번에는 Hello World가 브라우저에 표시됩니다.
Reference
이 문제에 관하여(clojurscrite에 대한 shadow-cljs), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/lambda-knight/items/a69df35405b26f7a79cf
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
src/main/my_app/
└── helloworld.cljs
(ns my-app.helloworld)
(defn init []
(println "Hello World!"))
public/
└── index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>helloworld example</title>
</head>
<body>
<div id="app"></div>
<script src="/js/main.js" type="text/javascript"></script>
</body>
</html>
;; shadow-cljs configuration
{:source-paths
["src/dev"
"src/main"
"src/test"]
:dependencies
[]
:dev-http {8080 "public"}
:builds
{:hello
{:target :browser
:modules {:main {:init-fn my-app.helloworld/init}}
}}
}
$ npx shadow-cljs watch hello
shadow-cljs - config: /export/clojure/advanced-clojure/7.advanced-cljs/my-app/shadow-cljs.edn cli version: 2.8.83 node: v8.10.0
shadow-cljs - HTTP server available at http://localhost:8080
shadow-cljs - server version: 2.8.83 running at http://localhost:9630
shadow-cljs - nREPL server started on port 35655
shadow-cljs - watching build :hello
[:hello] Configuring build.
[:hello] Compiling ...
[:hello] Build completed. (135 files, 1 compiled, 0 warnings, 3.29s)
(ns my-app.helloworld)
(defn init []
(js/alert "test")
(println "こんにちは!"))
[:hello] Compiling ...
[:hello] Build completed. (135 files, 1 compiled, 0 warnings, 0.17s)
이번에는 Hello World!를 입력합니다.
package.json에서react 관계를 기술한 총서.
{
"name": "my-app",
"version": "0.0.1",
"private": true,
"devDependencies": {
"shadow-cljs": "2.8.83"
},
"dependencies": {
"all": "^0.0.0",
"create-react-class": "15.6.3",
"react": "16.3.2",
"react-dom": "16.3.2"
}
}
;; shadow-cljs configuration
{:source-paths
["src/dev"
"src/main"
"src/test"]
:dependencies
[
[binaryage/devtools "0.9.10"]
[reagent "0.8.0"]
]
:dev-http {8080 "public"}
:builds
{:hello
{:target :browser
:modules {:main {:init-fn my-app.helloworld/init}}
}
:app {:target :browser
:output-dir "public/js"
:asset-path "/js"
:modules
{:main
{:entries [my-app.core]}}
:devtools
{:after-load my-app.core/init
:http-root "public"
:http-port 3000}}
}
}
(ns my-app.core
(:require [reagent.core :as r])
)
(def greeting "Hello World!")
(defn app []
[:div greeting])
(defn stop []
(js/console.log "Stopping..."))
(defn start []
(js/console.log "Starting...")
(r/render [app]
(.getElementById js/document "app")))
(defn ^:export init []
(start))
$ npx shadow-cljs watch app
Reference
이 문제에 관하여(clojurscrite에 대한 shadow-cljs), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/lambda-knight/items/a69df35405b26f7a79cf텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
