우리는 무엇을 만들고 있는가?

최근 이보 슈텀 기존 ArcGIS 위젯을 Dojo에서 React로 변환하는 방법에 대한 블로그를 작성했습니다.

나는 그것이 흥미로울 것이라고 생각했다 처음부터 ArcGIS 맵 위젯의 간단한 버전을 빌드합니다..

시작하기

지금까지의 모든 플러그형 위젯 블로그와 마찬가지로 우리는 다음으로 시작합니다. 위젯 스캐폴딩 실행하여 yo @mendix/widget arcGISMap 및 테스트 설정 Mendix 프로젝트.

시작하자 npm 패키지 설치 ArcGIS Javascript API용

npm install @arcgis/core

ArcGIS는 지도를 표시하고 레이어를 추가하여 광범위한 정보를 표시할 수 있는 온라인 지리 정보 시스템입니다.

전체 서비스에 액세스하려면 등록하고 액세스 토큰을 생성해야 합니다. 하지만 우리의 간단한 예를 들어 설명하자면, 그것 없이도 계속 진행할 수 있습니다.

시작하기

검토 자세한 내용은 공식 문서에서 확인하세요. 우리는 코드를 업데이트하여 두 개의 파일을 가질 수 있습니다.

부모님

"react"에서 {ReactElement, createElement}를 가져옵니다. "./components/Map"에서 {MapComponent}를 가져옵니다. "../typings/ArcGISMapBlogProps"에서 {ArcGISMapBlogContainerProps}를 가져옵니다. "./ui/ArcGISMapBlog.css"를 가져옵니다.

내보내기 기능 ArcGISMapBlog(props: ArcGISMapBlogContainerProps): ReactElement { return ; }

그리고 아이

import { ReactElement, createElement, useEffect, useRef } from "react"; import Map from "@arcgis/코어/Map"; "에서 MapView를 가져옵니다.@arcgis/코어/views/MapView"; import Legend from "@arcgis/코어/위젯/범례";

내보내기 인터페이스 MapProps { basemap: string; }

MapComponent({ basemap }: MapProps) 함수를 내보냅니다: ReactElement { const mapDiv = useRef(null);

useEffect(() => { if (mapDiv.current) { MountMap(기본 맵); } }, [기본 맵]);

const MountMap = (basemap: string): MapView => { const legend = new Legend(); const map = new Map({ basemap }); const view = new MapView({ map, center: [0.029, 51.256], // 경도, 위도 zoom: 10, // 확대 레벨 컨테이너: mapDiv.current as unknown as HTMLDivElement });

        legend.view = view; view.ui.add(legend, "bottom-right"); return view; };

반품 ; }

의하자 ArcGIS에서 스타일시트도 가져오기 위젯을 보기 좋게 만들려면 UI/{widgetName}.css를 다음과 같이 변경하세요.

@import "https://js.arcgis.com/4.24/@arcgis/core/assets/esri/themes/dark/main.css";

이제 우리는 위젯을 빌드합니다 npm run build 그리고… 우리는 오류를 얻습니다:

[!] 오류: 옵션 "output.file"에 대한 잘못된 값 - 여러 청크를 빌드할 때 "output.file"이 아닌 "output.dir" 옵션을 사용해야 합니다. 동적 가져오기를 인라인으로 처리하려면 "inlineDynamicImports" 옵션을 설정합니다.

그럼 이걸 어떻게 고칠까요? 설명하기 위해 몇 걸음 뒤로 물러나야 합니다...

자바스크립트의 간략한 역사

다음 섹션은 솔루션에 대한 맥락을 제공하기 위한 Javascript의 간략한 역사입니다. 이것이 흥미롭지 않다면 건너뛰고 예제를 계속 진행해도 됩니다.

처음에는…

Javascript는 1995년 Brendan Eich가 발명했으며, 개발 초기 몇 년 동안은 주로 고립된 스크립팅 작업에 사용되었습니다. JS가 애플리케이션에서 더 많이 사용되기 시작하면서 코드를 관리하기가 더 어려워졌습니다. JS는 종종 여러 스크립트에서 더 복잡한 방식으로 사용되었으며, 이는 필연적으로 함수와 이름 충돌로 이어졌습니다.

이에 따라 모듈 개념이 도입되었는데, 이는 다른 곳과의 충돌을 두려워하지 않고도 내부에서 사용할 수 있는 폐쇄된 공간에 코드를 작성할 수 있음을 의미하며, 또한 개발자는 대규모 코드베이스를 작은 개별 부분으로 나누어 작성 및 유지 관리를 훨씬 더 쉽게 할 수 있습니다.

이 문제를 해결하기 위한 첫 번째 시도는 다음과 같습니다. 즉시 호출되는 함수 표현식(IIFE)이는 기본적으로 각 파일을 함수로 감싸서 변수와 함수를 전역 범위가 아닌 해당 파일 범위에 보관합니다.

(function() {// Your code }) ();

이 접근 방식에는 종속성 해결 부족을 포함하여 여전히 많은 문제가 있습니다. 글로벌 네임스페이스의 오염.

시간이 지나면서 3개의 별도(그리고 경쟁) 모듈 사양이 등장했습니다.

• CommonJS — 여전히 서버 측 JS를 위한 Node에서 널리 사용되고 있으며 쉽게 인식할 수 있습니다. require() 및 module.exports 구문
• AMD — 비동기 모듈 정의, CommonJS에서 일찍 분리되었습니다. 주요 차이점은 AMD가 서로 종속되지 않은 모듈을 비동기로 로드할 수 있도록 허용한다는 것입니다(이름에 전부 나와 있습니다!)
• UMD — 범용 모듈 정의는 다른 모듈 사양과 '이전 스타일' "전역" 변수 정의를 모두 지원합니다.

이건 정말 복잡하죠...그래서 좋은 소식이 있어요. 2015년과 ES6 출시 이후로, 모듈은 Javascript 언어 내에서 지원되었습니다.. 이것은 우리에게 사랑스럽고 단순한 것을 제공합니다import 및 export 우리가 코드에서 사용해 온 구문입니다.

그럼 왜 역사 수업이 필요한 걸까요? 글쎄요, 우리는 코드를 쓸 때 이 모든 모듈 유형을 처리할 수 있어야 하고, 바로 여기서 번들러가 등장합니다.

뭉치

번들러를 사용하면 다음을 수행할 수 있습니다. 빌드 시간에 코드를 컴파일하세요, 종속성을 처리합니다및 호환되는 연결된 파일을 제공합니다. 이에 대한 일반적인 솔루션은 다음과 같습니다. 웹팩 (에서 사용됨 Mendix 8개 위젯) 및 롤업 (에서 사용됨 Mendix 위젯 9개)

이를 통해 최신 ES6 기능(그리고 원한다면 Typescript도 가능)을 사용하여 모듈 방식으로 코드를 작성한 다음 브라우저에 제공할 최적화된 파일(또는 파일 세트)을 생성할 수 있습니다.

이건 좋은데, 일부 브라우저는 아직 ES6를 지원하지 않아서, 이런 잘 컴파일된 파일에 아무것도 할 수 없을 겁니다. 이걸 고치려면 우리는 트랜스파일러를 사용할 수 있습니다 등 바벨 읽을 수 있는 형식으로 웹페이지에 제공합니다.

그럼 다시 위젯으로 돌아가서…

Pluggable Widget 프레임워크에는 React 구성 요소를 개발하는 데 필요한 모든 도구가 필요합니다. Mendix 앱. 여기에는 다음이 포함됩니다.

• npm — 타사 패키지를 쉽게 설치하고 관리할 수 있는 패키지 관리자
• 롤업 — 코드를 모듈식으로 작성한 다음 이를 작은 패키지로 묶을 수 있는 번들러
• 바벨 — JS를 이전 브라우저(및 Studio Pro)에서 읽을 수 있는 형식으로 변환하는 트랜스파일러

그렇다면 오류는 무엇을 의미할까요?

[!] 오류: 옵션 "output.file"에 대한 잘못된 값 - 여러 청크를 빌드할 때 "output.file"이 아닌 "output.dir" 옵션을 사용해야 합니다. 동적 가져오기를 인라인으로 처리하려면 "inlineDynamicImports" 옵션을 설정합니다.

각 위젯 프로젝트에는 @mendix/pluggable-widget-tools 라이브러리가 제공하는 롤업 구성을 사용합니다.

다음에서 찾을 수 있습니다. node_modules/@mendix/pluggable-widget-tools/configs.rollup.config.js.

이 구성에서 우리는 컴파일된 JS를 단일 파일에 뱉어내라고 위젯에 지시합니다.. 한편, ArcGIS npm 라이브러리 우리는 제공하고 있습니다 청크로 동적 가져오기, 기본적으로 rollup은 디렉토리에 별도의 파일로 내보내려고 합니다..

이 문제를 해결하려면 오류에 표시된 대로 작업하면 됩니다. inlineDynamicImports 옵션을 설정하세요, 모든 것을 하나의 파일에 끌어옵니다. Pluggable Widgets 라이브러리에서 rollup.config.js 파일을 변경할 수 있지만 유지 관리가 불가능하고 읽기와 디버깅이 매우 어려운 코드를 생성하기 때문에 매우 나쁜 생각입니다. 다행히도 Mendix 자체 롤업 구성을 설정하는 내장 기능이 있습니다..

우리는 파일을 생성 r이라고 불린다올업.config.js 루트 위젯 디렉토리에서. 그런 다음 위젯이 빌드되는 방식을 변경하기 위해 다음 JS 코드를 추가합니다.

기본 인수 내보내기 => { const result = args.configDefaultConfig; console.warn ('사용자 정의 롤업') return result.map((config) => { config.output.inlineDynamicImports = true console.warn ("동적 가져오기 설정") return config; }); };

그래서 우리는 달린다 npm run build 다시, 새로운 오류가 발생합니다.

치명적 오류: 힙 제한에 도달했습니다. 할당이 실패했습니다. JavaScript 힙 메모리가 부족합니다.

빌드 프로세스에 더 많은 메모리가 필요하다는 것이 밝혀졌습니다. 다음을 실행하여 업데이트할 수 있습니다.

NODE_OPTIONS=--max_old_space_size=5120을 내보내세요

우리가 다시 빌드하면 이제 위젯이 컴파일됩니다.

번들러를 사용하면 브라우저에서 쉽게 읽을 수 있는 단일 파일을 만들 수 있습니다.

Rollup은 또한 매우 영리한 다른 작업도 수행합니다. 나무 흔들기: 여기에는 이미지를 구축하는 것이 포함됩니다. 코드의 종속성 트리 및 실제로 필요한 코드만 포함. 이것은 특히 대규모 라이브러리를 사용할 때 유용하며, 브라우저에 사용되지 않는 많은 양의 코드를 로드하는 것을 방지합니다. 이 트리 셰이킹은 핵심 요소 중 하나입니다. Mendix webpack에서 rollup으로 전환했습니다. Mendix 8 및 9.

번들러는 또한 롤업에서 플러그인 형태로 제공되는 다른 많은 기능을 제공합니다. 이 블로그에서 다루고 싶은 마지막 사항은 위젯에 대한 롤업 구성을 수정해야 하는 매우 일반적인 사용 사례를 다루는 것입니다.

위젯에 필요한 파일 제공

ArcGIS는 다음을 통해 맵을 생성하는 데 필요한 파일을 제공합니다. 콘텐츠 전달 네트워크 (CDN) . 그러나 있을 수 있습니다 유지하고 싶은 인스턴스 위젯 내에서 이러한 파일을 관리합니다., 아마도 조직 내의 방화벽 설정 때문일 수 있습니다. 다행히도 ArcGIS Javascript API가 이를 가능하게 합니다.

첫 번째로 해야 할 일은 코드를 업데이트하는 것입니다. API에 알려주세요 우리가 될 것 우리 자산을 지역적으로 관리. 이를 위해 컨테이너 구성 요소를 업데이트하여 다음을 포함하기만 하면 됩니다.

"에서 esriConfig 가져오기@arcgis/코어/config.js";

내보내기 기능 ArcGISMapBlog(props: ArcGISMapBlogContainerProps): ReactElement { esriConfig.assetsPath = "./widgets/mendix/arcgismapblog/assets"; 반환 ; }

다음으로 우리는 최신 정보 우리의 롤업 에 우리가 파일을 집어 올리다 노드 모듈에서 필요한 것과 우리 위젯에 넣어주세요 mpk.mpk.mpk.mpk.mpk.mpk.mpk.mpk.mpk

이를 위해 우리는 할 수 있습니다 롤업 복사 플러그인을 사용하세요 (모든 것에 대한 플러그인이 있습니다) 먼저 설치해야 합니다.

npm i rollup-plugin-copy —save-dev 

우리는을 사용하여 —save-dev 개발 중에만 필요한 종속성이기 때문에 명령입니다. 그런 다음 rollup.config.js를 다음과 같이 업데이트합니다.

"rollup-plugin-copy"에서 복사 가져오기; 기본 인수 내보내기 => { const result = args.configDefaultConfig; console.warn ('사용자 정의 롤업') return result.map((config) => { config.output.inlineDynamicImports = true console.warn ("동적 가져오기 설정") const plugins = config.plugins || [] config.plugins = [ ...plugins, copy({ targets: { src:"node_modules/@arcgis/core/assets", dest:"dist/tmp/widgets/mendix/arcgismapblog" }]

}), ] 구성을 반환합니다. }); };

이 '자산'을 가져간다 ArcGIS npm 패키지의 폴더 및 dist/tmp 폴더에 넣습니다. 이것이 궁극적으로 우리의 mpk를 생성하기 위해 압축되는 것입니다. 그런 다음 애플리케이션을 실행하면 위젯 mpk의 내용이 제공됩니다. ./위젯/{귀하의 조직 이름}/{귀하의 위젯 이름}.

이것이 실제로 어떻게 되는지 보려면 위젯을 빌드하는 명령을 실행해 보겠습니다.

npm 실행 빌드

그런 다음 앱을 다시 실행할 수 있습니다.

배포 디렉토리를 열면 위젯이 자산 폴더를 제공하고 있음을 확인할 수 있으며 Chrome 개발 도구에서 페이지 소스를 확인하면 ArcGIS 웹 어셈블리 파일이 브라우저에 제공되어 맵이 작동하는지 확인할 수 있습니다.

로컬 파일을 사용하도록 CSS를 업데이트하지 않았습니다. 이를 위해 파일을 다음과 같이 업데이트하기만 하면 됩니다.

@import "../assets/esri/themes/dark/main.css";

간단한데요... 어떤 면에서는...

귀하가 9.13.2 이하의 플러그인 위젯 도구 그리고 Windows를 사용하고 있다면 글꼴이 제대로 가져오지 않습니다. 다음 코드는 가져오기를 수정하기 위해 rollup.config.js에 필요합니다.

"postcss-url"에서 postcssUrl을 가져옵니다.

const cssUrlTransform = asset => { const outWidgetDirForwardSlash = outWidgetDir.replace(/\\/g, "/") return asset.url.startsWith(`${assetsDirName}/`) ? `${outWidgetDirForwardSlash}/${asset.url}` : asset.url; }

export default args => { const result = args.configDefaultConfig; console.warn ('사용자 정의 롤업') return result.map((config) => { config.output.inlineDynamicImports = true console.warn ("동적 가져오기 설정") const plugins = config.plugins || [] config.plugins = [ ...plugins, postcssUrl (cssUrlTransform)

] 구성을 반환합니다. }); };

그런 다음 실행 npm install postcss-url --save-dev . 이제 위젯이 아이콘으로 렌더링됩니다.

그리고 우리는 끝났습니다!

ArcGIS API는 놀라운 기능이 가득 차 있습니다. 탐색해 보시기를 권장합니다. 무엇을 할 수 있는지에 대한 훌륭한 예를 보려면 Ivo Sturm의 위젯을 확인하세요. GitHub – ivosturm/ArcGIS-React: React 기반의 새롭고 개선된 ArcGIS 위젯. 내 ArcGIS 위젯의 repo는 여기에서 찾을 수 있습니다: GitHub – joe-robertson-mx/arcGISMapBlog.