PWA Room 단순화

TLDR: 반드시 어려운 것은 아닙니다.

짧은 역사

매건토에서 온 PWA 스튜디오는 이미 몇 년 동안 야외에서 왔다갔다하며 시간이 지날수록 핵심 제품에 서서히 첨가되고 있다.
처음에는 Venia(이 프로젝트의 대호)는 참고점으로만 여겨졌지만 시간이 지날수록 새로운 프로젝트의 기본적인 출발점이 되었다.이것은 Magento 팀이 처음에 고려하지 않았던 일련의 도전을 가져왔다.
그 중 하나는 구성 요소의 스타일을 간단하게 수정하거나 바꾸는 것이다.지금까지 다음과 같은 세 가지 방법 중 하나로 이루어졌습니다.
나무 교환
스타일을 설정할 구성 요소를 가져오고 전체 CSS 파일을 덮어쓰려면 전체 트리를 가져오고 바꿉니다.트리에 있는 모든 구성 요소의 전체 코드의 소유권을 부담해야 하기 때문에 유지보수와 업그레이드가 더욱 어려울 수 있습니다.
일반 교체 모듈/패키지 별칭
웹 패키지를 사용하여 특정 구성 요소의 파일 인용을 수정하고 프로젝트의 파일로 바꾸는 것이 중점입니다.이런 방법은 상대적으로 믿을 만하지만, 시작할 때 긴 별명을 관리해야 하기 때문에 매우 번거로워질 수 있다
수백 개의 CSS 파일을 덮어씁니다.
만약 파일 이름이 다른 곳에서 중복된다면, 별명 방법도 위험할 수 있다.

config.resolve.alias = {
    ...config.resolve.alias,
    './productFullDetail.css': path.resolve('./src/components/ProductFullDetail/productFullDetail.css')
}

Fooman VeniauioverrideSolver
Peregrine/venia ui의 모든 파일을 쉽게 덮어쓰고 간단한 모드를 따라갈 수 있는 좋은 모듈입니다.나는 개인적으로 프로젝트에 도입된 폴더 구조를 좋아하지 않는다. 그것은 확장이 아니라 덮어쓰기일 뿐이다.
참조 - https://github.com/fooman/venia-ui-override-resolver

그럼 지금 뭐가 달라요?

PWA Studio 버전 9.0은 확장성 프레임워크를 위한 새로운 기능과 향상된 기능을 제공합니다.Targetables 애플리케이션의 전체 구성 요소를 덮어쓰지 않고도 React 구성 요소를 수정할 수 있습니다.

콘셉트

어떻게 표준적인 베니아 매장을 고객이 맞춤형으로 제작하는 물건으로 바꿉니까?
다음은 우리의 출발점이다.

Targetables, 구성 요소 스타일의 명칭 약정, 그리고 mergeClasses 을 사용하여 스타일을 업데이트하는 전체 과정을 간소화하는 방법을 찾고 싶습니다.
명명 규칙
PWA Studio는 구성 요소의 CSS 파일에 대해 엄격한 명명 규칙을 따릅니다.Button를 예로 들다.
버튼 구성 요소는 두 개의 파일로 구성됩니다.

버튼.js

버튼.css

button.js imports button.css를 분류의 defaultClasses with the mergeClasses 함수로 사용한다.
그렇다면 만약 우리가 로컬 프로젝트에서 이런 파일 구조를 모방한다면?다음은 단추 예시입니다. 만약 내가 파일을 만들려고 한다면, 자동으로 그것을 선택할 수 있습니까?
통합 과정
기본적으로 MergeClass는DefaultClass에서 기본 스타일을 가져와 도구를 통해 구성 요소로 전달하는 모든 내용과 통합합니다.
여기에는 로컬 스타일 업데이트에 사용할 수 있는 추가 클래스를 추가하여 다음과 같이 표시할 수 있습니다.

const classes = mergeClasses(defaultClasses, localClasses, props.classes);

이것은 기본 스타일을 바탕으로 로컬 스타일의 유연성을 제공할 뿐만 아니라, 전체 응용 프로그램에서 특정한 용례의 도구 스타일을 전달할 수 있으며, 이것은 우리의 로컬 스타일을 업데이트할 것이다.

그것을 작용하게 하다

우리는 이 모든 것을 실현하기 위해 두 가지가 필요하다.

기본 스타일을 확장하는 모든 로컬 파일을 식별하는 방법

다시 쓰지 않고 라이브러리 구성 요소에 추가하는 방법
로컬 스타일 인식
globby는 특정 조건에 맞는 파일이나 폴더를 찾기 위해 디렉터리를 반복적으로 스캔하는 좋은 도구이기 때문에 프로젝트에 추가해야 합니다.

yarn add globby

다음에 우리는 src/components/Button/button.css 파일을 우리가 이곳에서 대부분의 작업을 하는 곳으로 사용할 것이다.
이 스크립트는 local-intercept.js의 모든 디렉토리를 검색하고 모든 CSS 파일을 찾습니다.그리고 폴더 이름에서 구성 요소를 추출하고venia ui의 구성 요소와 일치하도록 시도합니다. 일치하면 확장을 시도하고 있음을 알 수 있습니다.

function localIntercept(targets) {
    const { Targetables } = require('@magento/pwa-buildpack');
    const targetables = Targetables.using(targets);

    const magentoPath = 'node_modules/@magento';

    const globby = require('globby');
    const fs = require('fs');
    const path = require('path');

    (async () => {
        /** Load all CSS files from src/components */
        const paths = await globby('src/components', {
          expandDirectories: {
            extensions: ['css']
          }
        });

        paths.forEach((myPath) => {
          const relativePath = myPath.replace('src/components', `${magentoPath}/venia-ui/lib/components`);
          const absolutePath = path.resolve(relativePath);

          /** Identify if local component maps to venia-ui component */
          fs.stat(absolutePath, (err, stat) => {
            if (!err && stat && stat.isFile()) {
              /** 
               * This means we have matched a local file to something in venia-ui!
               * Find the JS  component from our CSS file name 
               * */
              const jsComponent = relativePath.replace('node_modules/', '').replace('.css', '.js');
            }
          });
        });
    })();
}

우리 스타일 추가.
그래서 이제 우리가 어떤 CSS 파일을 확장해야 하는지 알 수 있습니다. 라이브러리 구성 요소가 우리의 스타일을 사용하는지 어떻게 알려 드릴까요?
이것이 바로 목표 유저의 용무의 땅이다.위의 스크립트를 통해 JS 구성 요소가 무엇인지 알 수 있기 때문에 jsComponent 줄 다음에 다음과 같은 내용을 추가할 수 있습니다.

/** Load the relevant venia-ui component */
const eSModule = targetables.reactComponent(jsComponent);
const module = targetables.module(jsComponent);

/** Add import for our custom CSS classes */
eSModule.addImport(`import localClasses from "${myPath}"`);

/** Update the mergeClasses() method to inject our additional custom css */
module.insertAfterSource(
    'const classes = mergeClasses(defaultClasses, ',
    'localClasses, '
);

이 스크립트는 esModule을 로드하고 LocalClass를 가져오기로 파일의 맨 위에 주입한 다음 기본 MergeClass를 다음 위치에서 수정합니다.

const mergeClasses(defaultClasses, props.classes);

대상

const mergeClasses(defaultClasses, localClasses, props.classes);

사용자 정의 스타일 설정
위의 화면 캡처는 제품의 상세한 정보 페이지를 표시하기 때문에 이 페이지에서 스타일을 바꾸도록 합니다.
이렇게 하려면 프로젝트에 새 파일을 만듭니다.src/components이제 너는 src/components/ProductFullDetail/productFullDetail.css를 만들어서 우리가 해야 할 변화를 볼 수 있다.이 맞춤형은 구축할 때 적용되기 때문에, 새 파일을 만들면 프로젝트를 멈추고 시작해야 하지만, 이미 만든 파일을 수정하면, 다시 불러오는 기능이 정상적으로 작동합니다.
그림 회전 목마 주위에 테두리를 추가할 css 파일에 다음 내용을 추가합니다.

.imageCarousel  {
    border: solid 1px black;
}

이렇게블로그입니다. 읽어주셔서 감사합니다.진짜는 아니지만 이건 다시 탑재해야 해요. 약간 파손된 것처럼 보일 거예요. 하지만 좋은 일이에요.

우리가 여기서 한 것은 사용자 정의 파일의 이미지 카우셀 클래스를 수정하고 Product Full Detail 페이지의 모든 다른 스타일을 보존하는 것뿐입니다. 이것은 대단합니다.이것이 바로 우리가 원하는 것이지만, 우리는 이미 이미지 카우셀의 모든 원시적인 조형을 잃었다.
어떤 경우, 이것은 매우 좋다. 우리는 특정한 종류의 모든 스타일을 바꾸고 싶기 때문에, 이것을 하나의 옵션으로 완전히 바꾸는 것은 매우 좋다. 그러나 만약 우리가 한 가지 일을 수정하고 나머지는 계승하고 싶다면, 우리는 CSS 모듈의 조합을 사용하여 이 점을 실현할 수 있다.우리가 해야 할 일은 베니스의 이미지 카우셀을 다음과 같이 합성하는 것이다.

.imageCarousel  {
    composes: imageCarousel from '~@magento/venia-ui/lib/components/ProductFullDetail/productFullDetail.css';
    border: solid 1px black;
}

현재 우리의 페이지는 우리의 경계를 띠고 있는 것처럼 보일 것이다.

하지만 지금은 그렇다.읽어주셔서 감사합니다!질문이 있으면 Twitter나 Magento 커뮤니티 프로젝트의 #pwa slack 채널을 통해 알려 주십시오.
만약 당신이 이것을 실천에 옮긴다면, 저에게 링크를 공유해 주십시오. 그러면 제가 일을 검사할 수 있습니다.

Reference

이 문제에 관하여(PWA Room 단순화), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/chrisbrabender/simplifying-styling-in-pwa-studio-1ki1

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

TALL로 당신의 첫 블로그 만들기 - 첫 부분

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다