shadow - cljs: JavaScript 의존 실천

원문https://code.thheller.com/blo...원작 자 는 shadow - cljs 작가 이 고 shadow - cljs 는 JavaScript 개발 자 를 위 한 우호 적 인 ClojureScript 컴 파일 러 입 니 다.
이전에 js 의존 에 관 한 글 (문제, 전망) 에서 나 는 왜 shadow-cljs 에서 ClojureScript 의 기본 방안 과 다른 방법 을 사 용 했 는 지 설명 했다. 간단하게 돌 이 켜 보면:

cljsjs 또는 :foreign-libs 의 서법 은 확장 하기 어렵다

사용자 정의 포장 실제 사용 번 거 로 움

Closure Compiler 는 현재 대부분의 npm 모듈 에 대한 처리 가 믿 을 수 없다

shadow-cljs js bundler 를 사용자 정의 하고 :foreign-libs 지원 을 제거 합 니 다

설치 js 의존
거의 모든 npm 모듈 은 설치 방법 을 한 번 씩 씁 니 다. 현재 shadow-cljs 에 도 적 용 됩 니 다. 예 를 들 어 라 이브 러 리 가 실행 하 라 고 합 니 다.

npm install the-thing

당신 은 그대로 하면 됩 니 다. 다른 절 차 는 필요 없습니다. 물론 마음 에 드 시 면 yarn 을 사용 하 셔 도 됩 니 다. 그리고 의존 하면 package.json 파일 에 기록 되 어 관리 에 사 용 됩 니 다. package.json 없 으 면 실행 npm init 하 십시오.
위 에서 말 한 것 은 이 QuickStart 템 플 릿 으로 사용 해 보 세 요.
의존
대부분의 npm 모듈 은 모듈 을 어떻게 사용 하 는 지 에 대한 구체 적 인 코드 를 작성 합 니 다. "오래된" CommonJS 의 작성 방법 은 require 호출 입 니 다. ClojureScript 로 번역 하면 다음 과 같 습 니 다.

var react = require('react');

(ns my.app
  (:require ["react" :as react]))

"string" 매개 변수 가 무엇 을 사용 하 든 require 호출 되 었 습 니 다. 우 리 는 이렇게 ns :require 로 바 뀌 었 습 니 다. :as 의 alias 부분 은 당신 이 정의 합 니 다. 이것 이 있 으 면 다른 cljs 의 네 임 스페이스 처럼 호출 할 수 있 습 니 다.

(react/createElement "div" nil "helle world")

이것 은 이전 :foreign-libs 이나 CLJSJS 에서 한 것 과 다르다. 예전 에 thing 에서 ns 를 도입 한 다음 에 js/Thing (또는 다른 전역 에서 내 보 낸 변수) 로 코드 를 사용 해 야 했다. 지금 은 ns 형식 과 :as 뒷면 에서 제공 하 는 이름 을 사용 할 수 있다. 필요 하 다 면 :refer 과 :rename 도 쓸 수 있다.
일부 모듈 은 함 수 를 노출 시 킬 수 있 습 니 다. 그러면 (:require ["thing" as thing]) 을 쓰 고 호출 할 수 있 습 니 다 (thing).
최근 일부 모듈 은 ES6 의 import 문법 을 예 로 들 기 시작 했다. 이 코드 들 은 하나의 default 문법 을 제외 하고 기본적으로 ClojureScript 에서 일일이 대응 할 수 있다. 예 를 들 어 다음 의 예 를 번역 할 수 있다.

import defaultExport from "module-name";
import * as name from "module-name";
import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";

도착 ns:

(:require ["module-name" :default defaultExport])
(:require ["module-name" :as name])
(:require ["module-name" :refer (export)])
(:require ["module-name" :rename {export alias}])
(:require ["module-name" :refer (export1) :rename {export2 alias2}])
(:require ["module-name" :refer (export) :default defaultExport])
(:require ["module-name" :as name :default defaultExport])
(:require ["module-name"])

그 중에서 :default 인 자 는 현재 shadow-cljs 에서 만 지원 되 고 있 습 니 다. 그러나 여기 서 투 표를 해서 규범 에 들 어 갈 수 있 도록 도와 줄 수도 있 습 니 다. 아니면 계속 :as alias 사용 한 다음 에 호출 alias/default 할 수도 있 습 니 다. 그러면 표준 적 인 cljs 가 계속 호 환 될 수 있다 고 생각 하 시 면 제 생각 에는 일부 모듈 에 있어 서 좀 지루 하 다 고 생각 합 니 다.
새로운 가능성
이전에 우리 가 포장 한 코드 를 사용 하면 우리 가 사용 할 수 없 는 코드 를 포함 할 수 있 습 니 다. 일부 모듈 도 일부 모듈 만 도입 할 수 있 는 방법 을 설명 하 였 습 니 다. 그러면 최종 적 으로 구 축 된 코드 의 부 피 는 좀 작 을 것 입 니 다.
react - virtualized 에는 다음 과 같은 예 가 있 습 니 다.

// You can import any component you want as a named export from 'react-virtualized', eg
import { Column, Table } from 'react-virtualized'

// But if you only use a few react-virtualized components,
// And you're concerned about increasing your application's bundle size,
// You can directly import only the components you need, like so:
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer'
import List from 'react-virtualized/dist/commonjs/List'

그러면 쉽게 번역 할 수 있 습 니 다.

;; all
(:require ["react-virtualized" :refer (Column Table)])
;; one by one
(:require ["react-virtualized/dist/commonjs/AutoSizer" :default virtual-auto-sizer])
(:require ["react-virtualized/dist/commonjs/List" :default virtual-list])

js 의존 도 찾기
기본 적 인 상황 에서 shadow-cljs npm 방식 으로 모든 (:require ["thing" :as x]) 을 참조 합 니 다. 즉, /node_modules/thing/... 의 코드 를 찾 습 니 다. 이 행 위 를 사용자 정의 하기 위해 shadow-cljs 설정 항목 이 노출 되 었 습 니 다. 일부 모듈 을 어떻게 찾 는 지 스스로 정의 할 수 있 습 니 다.
CDN 사용
예 를 들 어 페이지 에 있 는 :resolve 이 CDN 에서 인용 되 었 습 니 다. 이 때 누 르 면 React 을 사용 할 수 있 습 니 다. 하지만 그 러 지 않 는 것 이 좋 습 니 다. js/React 을 계속 사용 하 는 것 이 좋 습 니 다. (:require ["react" :as react]) 에서 shadow-cljs 을 어떻게 찾 는 지 정의 하 는 것 이 좋 습 니 다. 이 설정 은 react 파일 에 설정 되 어 있 습 니 다.

{:builds
 {:app
  {:target :browser
   ...
   :js-options
   {:resolve {"react" {:target :global
                       :global "React"}}}}

  :server
  {:target :node-script
   ...}}}

현재 shadow-cljs.edn 이 구축 은 전체 :app 인 스 턴 스 를 사용 할 것 이 며, React 이 구축 에 서 는 :server npm 모듈 을 계속 사용 할 것 입 니 다. 추가 로 코드 를 들 여 수 요 를 완성 할 필요 가 없습니다.
방향 바 꾸 기 react일부 모듈 에 서 는 여러 개의 "dist" 파일 을 제공 하고 기본 값 으로 require 에 문제 가 있 을 수 있 습 니 다. 하나의 뚜렷 한 예 는 shadow-cljs 입 니 다. 기본 값 d3 은 브 라 우 저 에서 사용 하 는 버 전이 아 닙 니 다. 그들의 ES6 코드 는 Closure Compiler 의 bug 를 촉발 하기 도 합 니 다.그래서 우 리 는 사용 할 수 없다. 그러면 우 리 는 다른 인용 으로 방향 을 바 꾸 었 다.

{:resolve {"d3" {:target :npm
                 :require "d3/build/d3.js"}}}

브 라 우 저 사용 에 만 관심 이 있다 면 바로 쓸 수 있 습 니 다 "main".
로 컬 파일 사용
프로젝트 에 있 는 로 컬 파일 을 build/d3.node.js 로 직접 표시 할 수 있 습 니 다.

{:resolve {"my-thing" {:target :file
                       :file "path/to/file.js"}}}

이 파일 은 (:require ["d3/build/d3.js" :as d3]) 또는 :resolve 을 사용 할 수 있 습 니 다. 이 파일 들 은 나중에 처 리 될 것 입 니 다.
이동 cljsjs. *
많은 cljs 라 이브 러 리 는 아직도 :file 가방 을 사용 하고 있 습 니 다. require 에 서 는 정상적으로 사용 할 수 없습니다. import/export 더 이상 지원 하지 않 기 때 문 입 니 다. 저 는 뚜렷 한 이전 노선 을 제공 합 니 다. shim 파일 을 추가 하여 CLJSJS 원본 shadow-cljs 모듈 에 투사 한 다음 에 전체 변 수 를 노출 시 켜 야 합 니 다.
예 를 들 어 :foreign-libs 이런 파일 이 필요 합 니 다 src / cljsjs / react. cljs:

(ns cljsjs.react
  (:require ["react" :as react]
            ["create-react-class" :as crc]))

(js/goog.object.set react "createClass" crc)
(js/goog.exportSymbol "React" react)

이렇게 되면 모든 사람 이 수 동 으로 처리 하 는 것 이 번 거 로 울 수 있 기 때문에 저 는 cljsjs.thing 라 이브 러 리 를 제공 하여 이 기능 을 제공 합 니 다. 모든 모듈 이 포함 되 지 는 않 지만 계속 추가 하 겠 습 니 다. 공헌 모듈 을 도와 주 시 는 것 을 환영 합 니 다.
그러나 이것 은 shim 파일 만 제공 합 니 다. npm 로 실제 모듈 을 설치 해 야 합 니 다.
다른 기능 못 쓰 면 어 떡 해?
JavaScript 커 뮤 니 티 의 변화 가 빠 릅 니 다. 모든 사람 이 똑 같이 코드 를 쓰 는 것 이 아 닙 니 다. 어떤 것 은 react 자동 으로 처리 하지 못 하거나 사용자 정의 shadow-cljsjs 설정 이 필요 합 니 다. bug 를 만 날 수 있 습 니 다. 모두 새로운 것 이기 때 문 입 니 다.
어떤 모듈 도 예상 한 대로 사용 할 수 없습니다. 보고 하 십시오. \ # shadow - cljs 에서 저 를 쉽게 찾 을 수 있 습 니 다.
이 글 에 대한 토론 은 이동 하 십시오: clojurevese.