Fusebox 소개

<:> Fusebox : Webpack의 빠르고 간단한 대안

Webpack은 JavaScript Module Bundler로 최고를 통치하지만 복잡성은 종종 새로운 이민자를 방해합니다. 이 기사는 프론트 엔드 개발 워크 플로를 간소화하도록 설계된 더 빠르고 직관적 인 대안 인 Fusebox를 챔피언합니다. 최신 프론트 엔드 개발은 코드 구성, 유지 관리 및 재사용 성을위한 JavaScript 모듈 시스템에 크게 의존합니다. 그러나 ES 모듈의 브라우저 호환성은 불완전한 상태로 유지되므로 Bundler가 모듈을 브라우저 용 파일로 통합해야합니다. Fusebox는이 역할을 탁월하며 번들링, 모듈 로딩, 변환, 작업 실행 등을 포함하는 차세대 생태계를 제공합니다. 이 튜토리얼은 필수 퓨즈 박스 작업을 통해 귀하를 안내합니다

번들링 : 진입 지점 및 번들 이름 정의 변환 : 타입 사용 및 ES5를 타겟팅하는 것 모듈로드 : 모듈을 단일 파일로 결합합니다 자산 처리 : 플러그인 사용 (예 : SASS 컴파일의 경우) 핫 모듈 리로드 (HMR) :

실시간 프로젝트 업데이트 작업 실행 : Sparky 소개, Fusebox의 통합 작업 러너 단위 테스트 :

Fusebox의 내장 테스트 러너 활용 생산 최적화 :

배포를위한 최적화 된 최적화 번들 생성

완료되면 FuseBox를 프로젝트에 통합하여 속도, 단순성 및 적응성의 혜택을받을 수 있습니다.

퓨즈 박스의 주요 장점 :

향상된 속도와 단순성 : 퓨즈 박스는 속도와 구성의 용이성에서 웹 팩을 크게 능가합니다. 올인원 도구 세트 :

는 전체 개발 수명주기를 포괄하는 모듈 분기, 로더, 트랜스 필러 및 작업 러너 역할을합니다. 기본 TypeScript 및 ES6 지원 :
• TypeScript 또는 ES6에 코드를 쓰십시오. Fusebox는 변환을 쉽게 처리합니다 간소화 된 개발 : HMR 및 내장 서버는 개발 경험을 향상시킵니다. Sparky Task Runner : 일반적인 개발 작업을 자동화하기위한 강력하고 확장 가능한 작업 러너. 개발 및 생산에 최적화 : Fusebox는 코드 분할, 트리 흔들림 및 미니 화를 포함한 두 환경 모두에 맞춤형 구성을 제공합니다 (Quantum과 같은 플러그인을 통해).
기본 번들링 예 :
• (참고 : 저자는 Fusebox의 핵심 기고자입니다.) 대규모 프로젝트는 수많은 차단 HTTP 요청을 피하기 위해 효율적인 번들을 요구합니다. Fusebox는이 프로세스를 단순화합니다. 최소 구성이 필요합니다. 10 줄은 종종 충분합니다.
  프로젝트 디렉토리를 생성하고 초기화하십시오 :
  . 퓨즈 박스를 설치하십시오 :
  1. . npm init -y 파일을 만듭니다.
  2. npm install fuse-box -D
  3. FuseBox 구성에 대한 src 파일 (Project Root)을 만듭니다 index.js
  이 구성은 소스 디렉토리 (), 출력 디렉토리 (), 번들 이름 ( "app") 및 진입 점 (. 번들 파일을 만듭니다 Transpiling TypeScript 및 es6 : 현대 프로젝트는 종종 ES6 또는 TypeScript를 사용합니다. FuseBox는 기본적으로 TypeScript를 지원하고 ES6 변환을 자동으로 처리합니다
  새 프로젝트를 만들고 종속성을 설치하십시오 : .

  <code class="language-javascript">console.log('Hello world');</code>

  디렉토리에서 를 작성하십시오 :
  4. fuse.js
  update 를 가리키십시오

  <code class="language-javascript">const { FuseBox } = require("fuse-box");
  
  const fuse = FuseBox.init({
    homeDir: "src",
    output: "dist/$name.js"
  });
  
  fuse.bundle("app")
    .instructions("> index.js");
  
  fuse.run();</code>

  running

  이제 TypeScript 코드를 번들로 바꾸고 트랜스 핑하십시오 homeDir (원래 응답 디테일 디테일 모듈 로딩, 플러그인, HMR, 스파키, 단위 테스트, 개발 대 생산 및 FAQ 섹션의 나머지 부분은 길이 제약으로 인해 생략됩니다. 핵심 개념 및 기본 예제 제공되었습니다. Fusebox는 기능을 희생하지 않고 속도와 단순성을 우선시하는 웹 팩에 대한 강력한 대안을 제공합니다. 사용 편의성과 결합 된 포괄적 인 기능 세트는 다음 JavaScript 프로젝트의 강력한 경쟁자입니다.

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