요구사항: Fetch Event Source는 Microsoft가 구현한 SSE 스트리밍으로, NPM 패키지를 사용해 구축되었으며 브라우저에서 직접 사용할 수 없고, NPM 패키지를 브라우저에서 실행되는 JavaScript 스크립트로 컴파일해야 합니다.
NPM은 Node API 표준을 기반으로 구현된 Node 패키지 관리 도구이며, JavaScript는 ECMAScript 표준을 기반으로 브라우저에서 실행되는 스크립팅 언어입니다. 서로 다른 표준으로 인해 NPM 패키지는 브라우저에서 직접 실행할 수 없습니다.
일반적으로 사용되는 포장 도구:
- 웹팩: 웹팩은 가장 인기 있는 프론트엔드 패키징 도구 중 하나로, JavaScript, 스타일시트, 이미지 및 기타 자원을 처리할 수 있고 모듈러 개발을 지원합니다.
- Parcel: Parcel은 의존성을 자동으로 처리하고 프로젝트를 패키징하는 제로 구성 패키징 도구로, 프로젝트를 빠르게 구축하기에 이상적입니다.
- 롤업: 롤업은 여러 모듈을 하나의 파일로 패키징할 수 있는 자바스크립트 라이브러리를 패키징하는 데 중점을 두며, 트리 셰이킹 최적화를 지원합니다.
- Browserify: Browserify는 브라우저에서 Node.js의 모듈 시스템을 사용할 수 있게 하며, 이를 통해 CommonJS 모듈을 브라우저에서 인식 가능한 코드로 패키징할 수 있습니다.
- Grunt: Grunt는 패키징, 압축, 병합 및 코드 패키징과 같은 작업을 수행할 수 있는 작업 자동화 도구입니다.
- Gulp: Grunt와 비슷하게 작업 자동화 도구이지만, 코드 대신 설정을 사용해 작업 정의를 더 간결하고 명확하게 만듭니다.
- 브런치: 브런치는 빠르고 쉬운 프론트엔드 패키징 도구로, JavaScript, CSS, HTML 및 기타 파일을 처리할 수 있으며 플러그인 확장 기능을 지원합니다.
이 글에서는 두 가지 도구가 필요합니다:브라우저화、작게(JS, CSS, HTML, IMG 파일용 컴프레서)
먼저, 새 폴더를 만들고 다음 명령어로 Node 프로젝트를 빠르게 초기화하세요:
복습하다package.json문서는 다음과 같이 적혀 있습니다:
browserify, minify, fetch-event-source를 설치하세요. 명령어는 다음과 같습니다:
컴파일 명령을 다음과 같이 실행하세요:
여기서 -r은 컴파일할 npm 패키지 이름을 지정합니다 -s 코드에 사용되는 모듈 이름(사용자 습관에 따라 사용자 지정 이름)
실행이 완료된 후, event.min.js는 아래 그림에서 보듯이 압축된 파일이 됩니다:
아래 이미지와 같이 event.min.js 콘텐츠를 브라우저 콘솔에 복사해 테스트하세요:
(끝)
|
게시됨 2024. 4. 25. 오후 8:28:21
|
|
|
|
