, 동안 반응 사용 방법 : 메인/헤더 내용이 장고 (또는 정적 HTML)를 사용하여 생성내 프로젝트에 반작용/Preact 구성 요소를 사용하는 방법을 다음과 같은 시나리오를 감안할 때 개별 사이트 구성 요소
나는 다음과 같은 작업 것이라고 생각,하지만 난 분할하는 방법을 알고 또는 다음과 같은 라인을 따라 따라 번들로드되지 않습니다
정적 HTML 페이지에서 사용하기 위해 webpack을 사용하여 단일 구성 요소를 묶어서 표시 할 수 있습니까? 어떻게 webpack을 구성합니까?
본질적으로 당신은 JS/JSX 파일 묶음에서 하나의 JS 스크립트 (Babel 사용)로 변환 한 다음 HTML 문서에로드합니다. 따라서이 같은 것 :
<html>
<head>
// Usual head section stuff
</head>
<body>
<div id="header">
This is the Django site header
</div>
<div id="sidebar_root" />
<div>
Blah blah all the site's body content from Django
</div>
<div id="footer_root" />
<script src="react_sidebar.js" />
<script src="react_footer.js" />
</body>
</html>
그리고 당신은 당신이 "react_sidebar.js"로 렌더링 중 하나 (하위 구성 요소의 무리 것) 구성 요소를, 반작용이 있고 다른 것 react_footer.js "에 추가하십시오. 그래서 그 컴포넌트들은 React에 있고 다른 것들은 Django가 될 것입니다.
요청에 따라 React 번들 스크립트를로드하려면 루트와 역할을하는 스크립트와 div를 포함하기 만하면됩니다.
P.
항상 사이드 바와 꼬리말을 함께로드하는 경우 (한쪽 또는 다른 쪽이 항상 둘 다가 아닙니다) DOM 렌더링을 하나의 스크립트로 결합 할 수 있으므로 HTML에 하나의 스크립트 만 포함하면됩니다.
해당 번들 각각에 React가 번들되어 있습니까? 나는 React가 글로벌 스크립트이고 구성 요소가 분리되어 있다고 생각하고있다. –
무슨 뜻인지 잘 모르겠군요. React는 실제 HTML이나 기타에로드 된 스크립트가 아닙니다. 그것은 바벨과 거래 할 때 번들로 묶인 노드 모듈입니다. – Jayce444
Webpack의 코드 분할을 사용하여이 작업을 수행 할 수 있다고 생각합니다. http://survivejs.com/webpack/building-with-webpack/splitting-bundles/ –
정확히 무엇을 고민하고 있습니까? 반응 컴포넌트를 빌드하고, 원하는 자바 스크립트 버전으로 페이지를 렌더링하십시오. 나머지는 주로 인프라에 대한 결정입니다. –
내가 찾고있는 webpack 구성이어야한다고 생각하십니까? –