Fusebox 및 React와의 작업

대체 번들러를 웹 팩으로 검색하는 경우 Fusebox를 살펴 보겠습니다. WebPack이 제공하는 코드 스프리팅, 핫 모듈 재 장전, 동적 가져 오기 등을 바탕으로하지만 FuseBox의 코드 분할에는 기본적으로 구성이 필요하지 않습니다 (WebPack은 버전 4.0과 동일하게 제공하지만).

대신 FuseBox는 단순성 (덜 복잡한 구성 형태)과 성능 (공격적인 캐싱 방법을 포함하여)을 위해 구축되었습니다. 또한 기본값을 넘어서 필요한 모든 것을 처리 할 수있는 수많은 플러그인을 사용할 수 있습니다.

예, 당신이 TypeScript의 팬이라면 Fusebox가 일류 시민이라는 것을 알고 관심이있을 것입니다. 즉, 구성없이 TypeScript로 응용 프로그램을 작성할 수 있습니다! - 그리고 TypeScript Transpiler를 사용하여 기본적으로 스크립트를 컴파일합니다. TypeScript를 사용할 계획이 없습니까? 걱정할 필요가 없습니다. Transpiler는 JavaScript를 처리합니다. 또 다른 보너스!

일어나고 달리는 것이 얼마나 빨리 있는지 설명하기 위해, 일반적으로 Create-React-App으로 비계가있는 샘플 응용 프로그램의 뼈를 만들어 봅시다. 우리가하고있는 모든 일은 당신이 따라 가고 싶다면 Github에있을 것입니다.

물론 Fusebox만이 웹 팩의 유일한 대안은 아닙니다. 많은 것이 많으며 실제로 Maks Akymenko는 소포에 대한 훌륭한 글을 가지고있는 또 다른 훌륭한 대안입니다.

기본 설정

새 프로젝트 디렉토리를 만들고 NPM으로 초기화하여 시작하십시오.

 ## 디렉토리를 만듭니다
mkdir csstricks-fusebox-react && $ _
## NPM 기본 옵션으로 초기화하십시오
npm init -y

이제 일부 종속성을 설치할 수 있습니다. 우리는 React에서 앱을 구축 할 것이므로 React-Dom뿐만 아니라 필요합니다.

 NPM 설치-반응 반응 -M.Save

다음으로 FuseBox 및 TypeScript를 종속성으로 설치합니다. 우리는 스크립트를 조정하고 Sass의 작문 스타일에 대한 지원을 추가하기 위해 Uglify를 던질 것입니다.

 NPM 설치-사브 DEV 퓨즈-박스 타입 스크립트 Uglify-JS 노드 스ass

자, 이제 프로젝트 디렉토리의 루트에 SRC 폴더를 만들어 봅시다 (수동으로 수행 할 수 있음). 내용을 포함하여 다음 파일 (apt.js 및 index.js)을 추가하십시오.

 // app.js

"반응"에서 반응하여 가져 오기 *;
"./logo.svg"에서 로고로 import *;

const app = () => {
  반품 (
    <div classname="app">
      <header classname="App-Header">
        <img src="%7Blogo%7D" classname="app-logo" alt="logo">
        <h1 id="반응에-오신-것을-환영합니다"> 반응에 오신 것을 환영합니다 </h1>
      헤더>
      <p classname="app-intro">
        시작하려면`src/app.js`를 편집하고 다시로드하도록 저장하십시오.
      </p>
    </header>
</div>
  ))
};

기본 앱 내보내기;

SVG 파일을 가져오고 있음을 알 수 있습니다. Github Repo에서 직접 다운로드 할 수 있습니다.

 // index.js

"반응"에서 반응하여 가져 오기 *;
"React-Dom"의 반응으로 가져 오기 *;
"./app"에서 앱 가져 오기

REACTDOM.RENDER (
  <app></app>, document.getElementById ( 'root')
);

파일 가져 오기를 처리하는 방식이 일반적인 React 앱과 약간 다르다는 것을 알 수 있습니다. Fusebox는 기본적으로 수입 수입이 없기 때문입니다.

따라서 이것을하는 대신 :

 "React"에서 React React;

… 우리는 이것을하고 있습니다 :

 "반응"에서 반응하여 가져 오기 *;

 



  
    <title> csstricks Fusebox React </title>
    $ CSS
  

  
    <noscript>
      이 앱을 실행하려면 JavaScript를 활성화해야합니다.
    </noscript>
    <div> </div>
    $ 다발
  

위 내용은 Fusebox 및 React와의 작업의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!