클라이언트 라이브러리 및 프론트엔드 워크플로 client-side-libraries

GitHub에서 tutorial/client-side-libraries-start 분기 확인

$ cd aem-guides-wknd
$ git checkout tutorial/client-side-libraries-start

Maven 기술을 사용하여 로컬 AEM 인스턴스에 코드 베이스를 배포합니다.

$ mvn clean install -PautoInstallSinglePackage

$ mvn clean install -PautoInstallSinglePackage -Pclassic

VSCode 또는 다른 IDE를 사용하여 ui.apps 모듈을 엽니다.

/apps/wknd/clientlibs 경로를 확장하여 Archetype에서 생성된 clientlib을 봅니다.

ui.apps의

아래 섹션에서는 이러한 clientlib을 자세히 검토합니다.

다음 표에서는 클라이언트 라이브러리를 요약합니다. 클라이언트 라이브러리를 포함하여 에 대한 자세한 내용은 여기에서 확인할 수 있습니다.

소스 제어에서 clientlib-site 및 clientlib-dependencies이(가) 무시되는지 확인하십시오. 이는 ui.frontend 모듈에 의해 빌드 시 생성되므로 기본적으로 생성됩니다.

ui.frontend 모듈을 열고 src/main/webpack/site(으)로 이동합니다.

main.scss 파일을 엽니다.

main.scss은(는) ui.frontend 모듈에서 Sass 파일의 진입점입니다. 여기에는 프로젝트의 여러 Sass 파일 전체에서 사용할 일련의 브랜드 변수가 포함된 _variables.scss 파일이 포함됩니다. _base.scss 파일도 포함되어 있으며 HTML 요소에 대한 몇 가지 기본 스타일을 정의합니다. 정규식에는 src/main/webpack/components 아래의 개별 구성 요소 스타일에 대한 스타일이 포함되어 있습니다. 다른 정규식에 src/main/webpack/site/styles 아래의 파일이 포함되어 있습니다.

파일 main.ts을(를) Inspect 합니다. 여기에는 프로젝트에서 .js 또는 .ts 파일을 수집하는 main.scss 및 정규식이 포함됩니다. 이 진입점은 Webpack 구성 파일에서 전체 ui.frontend 모듈의 진입점으로 사용됩니다.

src/main/webpack/site/styles 아래 파일을 Inspect:

이러한 파일 스타일은 머리글, 바닥글 및 기본 콘텐츠 컨테이너와 같은 템플릿의 전역 요소에 대한 것입니다. 이러한 파일의 CSS 규칙은 다른 HTML 요소 header, main 및 footer을(를) 대상으로 합니다. 이러한 HTML 요소는 이전 페이지 및 템플릿의 정책에 의해 정의되었습니다.

src/main/webpack 아래의 components 폴더를 확장하고 파일을 검사합니다.

각 파일은 아코디언 구성 요소와 같은 핵심 구성 요소에 매핑됩니다. 각 핵심 구성 요소는 스타일 규칙을 사용하여 특정 CSS 클래스를 더 쉽게 타깃팅할 수 있도록 블록 요소 수정자 또는 BEM 표기법으로 빌드되었습니다. 각 구성 요소에 대해 서로 다른 BEM 규칙을 사용하여 AEM Project Archetype에서 /components 아래의 파일을 검색했습니다.

WKND 기본 스타일 wknd-base-styles-src-v3.zip 및 unzip 파일을 다운로드합니다.

자습서를 가속화하기 위해 핵심 구성 요소 및 문서 페이지 템플릿 구조를 기반으로 WKND 브랜드를 구현하는 여러 Sass 파일이 제공됩니다.

ui.frontend/src의 내용을 이전 단계의 파일로 덮어씁니다. 압축 파일의 내용은 다음 폴더를 덮어씁니다.

/src/main/webpack
         /components
         /resources
         /site
         /static

Inspect에서 변경된 파일을 확인하여 WKND 스타일 구현의 세부 사항을 확인할 수 있습니다.

명령줄 터미널을 열고 npm install 명령을 사용하여 ui.frontend 모듈을 설치합니다.

$ cd ~/code/aem-guides-wknd/ui.frontend
$ npm install

ui.frontend/package.json을(를) 열고 scripts start 명령에 --env writeToDisk=true을(를) 추가합니다.

{
  "scripts": {
    "start": "webpack-dev-server --open --config ./webpack.dev.js --env writeToDisk=true",
  }
}

다음 명령을 실행하여 watch 모드에서 Webpack 개발 서버를 시작합니다.

$ npm run watch

ui.frontend 모듈에서 원본 파일을 컴파일하고 http://localhost:4502에서 변경 내용을 AEM과 동기화합니다.

+ jcr_root/apps/wknd/clientlibs/clientlib-site/js/site.js
+ jcr_root/apps/wknd/clientlibs/clientlib-site/js
+ jcr_root/apps/wknd/clientlibs/clientlib-site
+ jcr_root/apps/wknd/clientlibs/clientlib-dependencies/css.txt
+ jcr_root/apps/wknd/clientlibs/clientlib-dependencies/js.txt
+ jcr_root/apps/wknd/clientlibs/clientlib-dependencies
http://admin:admin@localhost:4502 > OK
+ jcr_root/apps/wknd/clientlibs/clientlib-site/css
+ jcr_root/apps/wknd/clientlibs/clientlib-site/js/site.js
http://admin:admin@localhost:4502 > OK

npm run watch 명령은 궁극적으로 ui.apps 모듈에서 clientlib-site 및 clientlib-dependencies ​을(를) 채우고 AEM과 자동으로 동기화됩니다.

ui.frontend/dist/clientlib-site/site.css 아래의 site.css 파일을 Inspect 합니다. Sass 소스 파일을 기반으로 컴파일된 CSS입니다.

파일 ui.frontend/clientlib.config.js을(를) Inspect 합니다. /dist의 콘텐츠를 클라이언트 라이브러리로 변환하고 ui.apps 모듈로 이동하는 npm 플러그인 aem-clientlib-generator에 대한 구성 파일입니다.

ui.apps/src/main/content/jcr_root/apps/wknd/clientlibs/clientlib-site/css/site.css의 ui.apps 모듈에서 site.css 파일을 Inspect으로 가져옵니다. ui.frontend 모듈에서 site.css 파일의 동일한 복사본이어야 합니다. ui.apps 모듈에 있으므로 AEM에 배포할 수 있습니다.

AEM에서 LA Skatepark 문서를 엽니다. http://localhost:4502/editor.html/content/wknd/us/en/magazine/guide-la-skateparks.html.

이제 문서의 업데이트된 스타일이 표시됩니다. 브라우저에서 캐시한 CSS 파일을 지우려면 하드 새로 고침을 수행해야 할 수 있습니다.

그것은 그 흉내들에 훨씬 더 가깝게 보이기 시작하고 있습니다!

ui.frontend 모듈에서 ui.frontend/src/main/webpack/site/_variables.scss 파일을 엽니다.

$brand-primary 색 변수 업데이트:

//== variables.css

//== Brand Colors
$brand-primary:          $pink;

변경 사항을 저장합니다.

브라우저로 돌아가서 AEM 페이지를 새로 고쳐 업데이트를 확인합니다.

변경 내용을 $brand-primary 색상으로 되돌리고 CTRL+C 명령을 사용하여 Webpack 빌드를 중지합니다.

문서 페이지 템플릿(http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/article-page/structure.html)으로 이동

페이지 정보 아이콘을 클릭하고 메뉴에서 페이지 정책 ​을 선택하여 페이지 정책 대화 상자를 엽니다.

페이지 정보 > 페이지 정책

wknd.dependencies 및 wknd.site의 범주가 여기에 나열되어 있습니다. 기본적으로 페이지 정책을 통해 구성된 clientlib은 분할되어 페이지 헤드의 CSS와 본문 끝의 JavaScript을 포함합니다. 페이지 헤드에 로드할 clientlib JavaScript을 명시적으로 나열할 수 있습니다. wknd.dependencies의 경우입니다.

문서 페이지 템플릿 ​을 사용하여 만든 LA 스케이트보드장 페이지로 이동합니다. http://localhost:4502/editor.html/content/wknd/us/en/magazine/guide-la-skateparks.html.

페이지 정보 아이콘을 클릭하고 메뉴에서 게시됨으로 보기 ​를 선택하여 AEM 편집기 외부에서 문서 페이지를 엽니다.

http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html?wcmmode=disabled의 페이지 소스를 보면 <head>에서 다음 clientlib 참조를 볼 수 있습니다.

<head>
...
<script src="/etc.clientlibs/wknd/clientlibs/clientlib-dependencies.lc-d41d8cd98f00b204e9800998ecf8427e-lc.min.js"></script>
<link rel="stylesheet" href="/etc.clientlibs/wknd/clientlibs/clientlib-dependencies.lc-d41d8cd98f00b204e9800998ecf8427e-lc.min.css" type="text/css">
<link rel="stylesheet" href="/etc.clientlibs/wknd/clientlibs/clientlib-site.lc-78fb9cea4c3a2cc17edce2c2b32631e2-lc.min.css" type="text/css">
...
</head>

clientlib이 프록시 /etc.clientlibs 끝점을 사용하고 있습니다. 또한 페이지 하단에 다음 clientlib이 포함되어 있습니다.

...
<script src="/etc.clientlibs/wknd/clientlibs/clientlib-site.lc-7157cf8cb32ed66d50e4e49cdc50780a-lc.min.js"></script>
<script src="/etc.clientlibs/wknd/clientlibs/clientlib-base.lc-53e6f96eb92561a1bdcc1cb196e9d9ca-lc.min.js"></script>
...
</body>

LA 스케이트파크 문서 페이지의 페이지 원본을 http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html?wcmmode=disabled에 복사합니다.

IDE를 다시 엽니다. AEM에서 복사한 태그를 src/main/webpack/static 아래의 ui.frontend 모듈에 있는 index.html에 붙여 넣습니다.

복사된 태그를 편집하고 clientlib-site 및 clientlib-dependencies ​에 대한 참조를 제거하십시오.

<!-- remove -->
<script type="text/javascript" src="/etc.clientlibs/wknd/clientlibs/clientlib-dependencies.js"></script>
<link rel="stylesheet" href="/etc.clientlibs/wknd/clientlibs/clientlib-dependencies.css" type="text/css">
<link rel="stylesheet" href="/etc.clientlibs/wknd/clientlibs/clientlib-site.css" type="text/css">
...
<script type="text/javascript" src="/etc.clientlibs/wknd/clientlibs/clientlib-site.js"></script>

Webpack 개발 서버는 이러한 아티팩트를 자동으로 생성하기 때문에 이러한 참조를 제거합니다.

ui.frontend 모듈 내에서 다음 명령을 실행하여 새 터미널에서 Webpack 개발 서버를 시작합니다.

$ cd ~/code/aem-guides-wknd/ui.frontend/
$ npm start

> aem-maven-archetype@1.0.0 start code/aem-guides-wknd/ui.frontend
> webpack-dev-server --open --config ./webpack.dev.js

정적 태그를 사용하여 http://localhost:8080/에서 새 브라우저 창을 열어야 합니다.

src/main/webpack/site/_variables.scss 파일을 편집합니다. $text-color 규칙을 다음으로 바꾸기:

- $text-color:              $black;
+ $text-color:              $pink;

변경 사항을 저장합니다.

http://localhost:8080의 브라우저에 자동으로 반영된 변경 내용이 자동으로 표시됩니다.

/aem-guides-wknd.ui.frontend/webpack.dev.js 파일을 검토하십시오. 여기에는 Webpack-dev-server를 시작하는 데 사용되는 Webpack 구성이 포함됩니다. 로컬에서 실행 중인 AEM 인스턴스의 경로 /content 및 /etc.clientlibs을(를) 프록시합니다. ui.frontend 코드에서 관리되지 않는 이미지 및 기타 clientlib을 사용할 수 있습니다.

CTRL+C을(를) 입력하여 명령줄에서 Webpack 서버를 중지 ​할 수 있습니다.