Browserify를 사용하여 브라우저에서 npm 패키지를 사용하는 방법

홈 » Python » Browserify를 사용하여 브라우저에서 npm 패키지를 사용하는 방법

자바스크립트 모듈 작업을 시작할 때 가장 먼저 부딪히는 문제 중 하나는 Node.js가 코드를 로드하는 방식과 브라우저가 코드를 로드하는 방식 사이의 차이입니다. Node.js에서는 그냥 호출하면 됩니다. require() 모든 것이 마법처럼 연결됩니다. 하지만 브라우저에서 직접 같은 작업을 시도하면 해당 기능이 존재하지 않는다는 것을 금방 알게 될 것입니다. 바로 이런 상황에서 npm 패키지 브라우저와 Browserify 같은 번들러를 활용한 도구, 워크플로, 개념이 유용하게 사용됩니다.

이 글에서는 npm이라는 패키지 생태계가 어떻게 웹 브라우저에서 패키지를 검색하고, 찾아내고, 최종적으로 패키지로 묶어 실행하는 과정과 결합되는지를 설명합니다. Browserify를 기반으로 한 고전적인 사례를 다시 살펴보고 그 이유를 설명하겠습니다. require Node.js 환경에서는 작동하지만 브라우저에서는 작동하지 않는 이 방법을 단계별로 설명하며, 작은 스크립트 파일에서 간단한 스크립트 태그로 웹 페이지에 바로 삽입할 수 있는 하나의 번들 에셋으로 만드는 과정을 보여줍니다. 또한, 맥락 설명, 실용적인 팁, 그리고 최신 대안들을 제시하여 실제 프로젝트에서 활용할 수 있도록 전체 워크플로우를 이해할 수 있도록 돕습니다.

Node.js와 브라우저 간의 차이점 이해하기

핵심적인 출발점은 웹 브라우저와 Node.js가 기본적으로 제공하는 모듈 시스템이 매우 다르다는 점입니다. Node는 과거에 CommonJS 모듈 형식을 사용했으며, 이 형식에서는 다음과 같이 종속성을 로드합니다. require('package-name') 그리고 다음과 같은 기능을 노출합니다. module.exports해당 패턴은 Node 런타임에 깊이 통합되어 있지만, 기존 브라우저는 이에 대해 전혀 알지 못합니다.

일반 브라우저 환경에서는 내장된 기능이 없습니다. require 해당 기능에는 아무런 지원도 없으며, 대부분의 npm 패키지가 의존하는 CommonJS 스타일 모듈에 대한 지원도 없습니다. 브라우저는 JavaScript 파일을 전역적으로 로드하는 기존 스크립트 태그를 이해하며, 최신 환경에서는 ES 모듈도 지원합니다. type="module" 속성은 있지만, 여전히 Node의 CommonJS 의미 체계를 스스로 이해하지 못합니다.

이러한 차이점은 Node 스타일 코드나 npm 패키지를 클라이언트 측 JavaScript 내에서 직접 재사용하려고 할 때 문제가 됩니다. 다음과 같은 간단한 코드 조각이 있을 수 있습니다. var unique = require('uniq') Node 스크립트에서는 완벽하게 작동하지만, 동일한 코드를 브라우저에서 로드되는 파일에 붙여넣으면 즉시 참조 오류가 발생합니다. 그 이유는 다음과 같습니다. require 정의되지 않았습니다.

따라서 개발자들은 익숙한 Node.js 스타일의 코드를 계속 작성하면서도 브라우저와 호환되는 애셋을 배포할 수 있도록 해주는 일종의 "연결 고리"가 필요합니다. 일반적으로 이러한 연결 고리는 번들러입니다. 번들러는 진입 파일부터 시작하여 의존성 그래프를 따라가며 필요한 모든 것을 수집하고, 브라우저가 Node나 npm에 대해 아무것도 몰라도 실행할 수 있는 단일 JavaScript 번들을 출력하는 도구입니다.

Browserify는 npm 생태계에서 어떤 역할을 하나요?

Browserify는 자바스크립트 개발자들이 직면했던 바로 그 문제를 해결해 준 초기이자 영향력 있는 도구 중 하나입니다. 목표는 간단합니다. Node.js를 사용하여 코드를 작성할 수 있도록 하는 것입니다. require 패턴을 기반으로 npm에서 모듈을 가져온 다음, 이 모든 것을 CommonJS가 기본적으로 지원되는 것처럼 브라우저에서 실행되는 단일 파일로 패키징합니다.

npm 패키지 탐색 관점에서 Browserify는 방대한 Node 패키지 생태계를 잠재적인 클라이언트 측 종속성 라이브러리로 효과적으로 변환합니다. 스크립트를 수동으로 복사하는 대신 npm에서 모듈을 설치하고 사용하면 됩니다. require() 서버 측 코드와 마찬가지로 Browserify가 해당 코드를 사용자의 브라우저가 이해할 수 있는 형식으로 변환하도록 하면 됩니다.

내부적으로 Browserify는 다음을 통해 참조된 모든 모듈을 탐색합니다. require주어진 진입 파일에서 시작하여 종속성 그래프를 구축합니다. 해당 그래프의 각 모듈에 대해, 로컬 스코핑 및 브라우저 친화적인 형태를 포함하여 브라우저의 CommonJS 환경을 모방하는 형태로 코드를 다시 작성합니다. require 구현. 최종 결과물은 일반적으로 하나의 번들 파일로 명명됩니다. bundle.js이 모든 모듈을 캡슐화하는 것입니다.

결과적으로 프런트엔드 개발자는 브라우저의 Node 모듈에 대한 기본 지원 부족을 걱정하지 않고 npm의 패키지에 의존할 수 있는 워크플로가 만들어집니다. 데이터 조작, 유틸리티 또는 UI 도우미와 같은 작업을 위한 방대한 라이브러리 카탈로그에 액세스할 수 있지만, 클라이언트에는 단 하나의 스크립트 파일만 제공하여 기존 HTML 페이지에 매끄럽게 통합할 수 있습니다.

기존 Browserify 튜토리얼 예제를 다시 작성하기

이해를 돕기 위해, 다음과 같은 이름의 자바스크립트 파일 하나가 있다고 상상해 보세요. main.js 프로젝트에서 npm 패키지를 사용하고 싶은데, 패키지 이름이 'npm package'라고 되어 있습니다. uniq 배열에서 중복된 값을 필터링합니다. Node 환경에서는 다음과 같은 줄로 파일을 시작합니다. var unique = require('uniq')이 줄은 내보낸 함수를 가져옵니다. uniq 모듈을 만들고 그 결과를 라는 변수에 저장합니다. unique.

이 안에 main.js 파일을 사용하면 반복되는 항목이 포함된 간단한 숫자 배열을 만들 수 있습니다. 예를 들어, 설정할 수 있습니다. var data = 특정 숫자가 두 번 이상 나타나는 배열이 있습니다. 목표는 각 숫자가 한 번씩만 포함되고 정렬된 새로운 배열을 만드는 것입니다.

가져온 함수를 사용하면 나머지 코드는 매우 간단해집니다. 호출 할 수 있습니다. console.log(unique(data)) 콘솔에 반환된 배열을 출력합니다. uniq 이 패키지는 목록에서 중복된 값을 제거합니다. Node.js 환경에서 실행하면 각 숫자가 한 번씩만 나타나는 배열이 출력됩니다.

이 모든 논리는 다음을 전제로 합니다. uniq 해당 모듈이 사용자 환경에서 사용 가능하며, require 함수가 정의되어 있고 이를 해결할 수 있습니다. Node.js에서는 런타임이 이를 처리합니다. 노드 모듈 해상도 알고리즘이는 라는 이름의 디렉토리를 찾습니다. node_modules 그리고 나서 폴더 이름을 지정하세요. uniq 그 안에.

npm에서 uniq 패키지 설치하기

코드가 호출하기 전에 require('uniq')npm 레지스트리에서 해당 패키지를 직접 설치해야 합니다. 이 작업은 Node.js에 포함된 npm 클라이언트를 사용하여 명령줄에서 수행합니다. 프로젝트 폴더에서 다음과 같은 명령을 실행할 수 있습니다. npm install uniq 그러면 npm이 모듈을 다운로드하고 해당 위치에 저장합니다. node_modules 디렉토리.

The npm install uniq 명령어는 게시된 버전을 가져옵니다. uniq 패키지를 생성하고 로컬 프로젝트 종속성에 추가합니다. npm 설정 및 사용 여부에 따라 다릅니다. package.json 이 파일은 패키지를 종속성 목록에 기록하여 팀의 다른 개발자들이 여러 환경에서 일관된 설치를 할 수 있도록 해줍니다.

패키지 설치가 완료되면 프로젝트의 디렉터리 구조에 새 항목이 포함됩니다. node_modules/uniq 해당 패키지의 코드가 포함된 폴더입니다. 바로 그것이 Node의 기능을 가능하게 하는 요소입니다. require 시스템이 해결될 때 모듈의 위치를 ​​찾습니다. 'uniq'Browserify는 번들의 종속성 그래프를 구축하기 시작할 때 바로 이 폴더를 검사합니다.

이 시점에서 main.js 해당 파일은 서버 또는 터미널에서 표준 Node 인터프리터를 사용하여 실행할 수 있는 완벽하게 유효한 Node 코드입니다. 하지만 만약 당신이 이것을 그냥 버린다면 main.js 스크립트 태그를 사용하여 웹 페이지에 파일을 삽입하더라도 브라우저는 CommonJS 스타일의 가져오기를 이해하지 못하므로 브라우저에서 사용할 수 있도록 추가 단계를 거쳐야 합니다.

main.js와 그 종속 파일들을 bundle.js로 묶습니다.

이 Node 스타일 코드가 브라우저에서 실행될 수 있도록 하는 핵심 단계는 Browserify가 해당 코드를 처리하도록 하는 것입니다. main.js 그리고 필요한 모든 모듈을 포함하여 일반적으로 단일 JavaScript 파일(예: )을 생성합니다. bundle.js. Browserify가 전역적으로 또는 프로젝트에 로컬로 설치되면 명령줄에서 이 작업을 수행할 수 있습니다.

이 프로세스를 시작하는 일반적인 명령은 다음과 같습니다. browserify main.js -o bundle.js. 여기 browserify 이는 번들링 프로세스를 시작하는 실행 파일입니다. main.js Browserify가 종속성 그래프의 루트로 취급하는 진입 파일입니다. -o bundle.js 해당 도구에게 결과 번들을 라는 이름의 파일에 쓰도록 지시합니다. bundle.js 현재 디렉토리에서.

Browserify는 내부적으로 분석을 진행합니다. main.js모든 것을 따릅니다. require 해당 함수는 찾은 모듈을 호출하고, 가져온 각 모듈을 재귀적으로 탐색합니다. 여기에는 상대 경로를 사용하여 불러오는 경우 사용자 자신의 로컬 파일과 해당 경로 아래에 있는 타사 모듈이 모두 포함됩니다. node_modules, 와 같은 uniq npm에서 방금 설치한 패키지입니다.

Browserify가 접하는 모든 종속성은 네이티브 Node 환경 없이도 브라우저 내에서 실행될 수 있도록 변환됩니다. 각 모듈을 자체 범위로 감싸고, CommonJS 인터페이스를 시뮬레이션하며, 변환된 모든 모듈을 단일 스크립트로 묶습니다. 결과적으로 다음과 같은 결과물이 생성됩니다. bundle.js 해당 파일에는 다음을 모방하는 코드가 포함되어 있습니다. require 이 기능은 원래 기능을 사용할 수 있도록 합니다. var unique = require('uniq') 클라이언트 측에서 실행될 때 제대로 작동하도록 하는 코드입니다.

Browserify 작업이 완료되면 원래 애플리케이션 로직과 이를 작동시키는 데 필요한 모든 전이적 종속성 트리를 포함하는 단 하나의 JavaScript 파일만 남게 됩니다. 이제 이 파일은 다른 스크립트와 마찬가지로 브라우저 측에서 추가 설정을 할 필요 없이 HTML 페이지에서 참조할 수 있습니다.

HTML 페이지에 Browserify 번들을 로드하는 방법

와 bundle.js 생성된 모든 것을 일반 웹사이트에 통합하는 것은 HTML에 스크립트 태그 하나만 추가하면 되므로 매우 간단합니다. 로드하려고 시도하는 대신 main.js 직접 참조하면 Browserify가 생성한 컴파일된 번들을 참조하게 되는데, 이 번들에는 이미 다음이 포함되어 있습니다. uniq 그리고 필요한 다른 npm 모듈도 있습니다.

기본적인 HTML 코드 조각에는 다음과 같은 내용이 포함될 수 있습니다. <script src="bundle.js"></script> 마감 직전 어딘가 </body> 꼬리표. 이 스크립트 태그는 브라우저에게 해당 파일을 다운로드하고 실행하도록 지시합니다. bundle.js 파일입니다. 번들이 자체적으로 CommonJS 환경을 에뮬레이션하기 때문에, 여러분의 호출은 다음과 같습니다. require 전역 브라우저 환경이 해당 함수가 무엇인지 아직 알지 못하더라도 내부적으로는 작동합니다.

페이지 관점에서 보면 이 번들 파일과 다른 단일 JavaScript 파일 사이에 눈에 띄는 차이점은 없습니다. 모듈의 복잡성, 내부 종속성 및 시뮬레이션 require 논리는 모두 내부에 캡슐화되어 있습니다. bundle.js브라우저는 하나의 리소스만 로드하고 실행하면 되므로, 여러 개의 작은 파일을 개별적으로 로드하는 것보다 성능 면에서 이점이 있습니다.

이러한 이유로 워크플로는 정적 HTML 파일이나 서버에서 렌더링되는 템플릿을 사용하는 기존 프런트엔드 스택에도 잘 맞습니다. 페이지 구조를 근본적으로 바꿀 필요는 없습니다. 여러 곳에 흩어져 있는 리소스와 Node 전용 모듈을 Browserify에서 생성한 간소화된 번들로 대체하여 제공할 JavaScript를 준비하는 방식만 변경하면 됩니다.

npm 패키지 탐색 시 Browserify를 사용한 번들링이 중요한 이유

사람들이 "npm 패키지 브라우저" 또는 프런트엔드용 npm 패키지 검색에 대해 이야기할 때, 근본적인 질문은 대개 "브라우저 기반 프로젝트에서 이 모듈을 실제로 어떻게 사용할 수 있을까?"입니다. Browserify와 같은 도구의 존재는 서버 측 라이브러리의 이론적인 목록을 웹 애플리케이션에 직접 적용할 수 있는 실용적인 도구 상자로 바꿔줍니다.

실제로 이는 유용한 모듈을 찾기 위해 npm을 탐색하는 것이 더 이상 Node나 백엔드 작업에만 국한되지 않는다는 것을 의미합니다. 만약 순수하게 자바스크립트 데이터 구조만을 사용하고 Node.js 관련 API에 의존하지 않는 작은 유틸리티 라이브러리를 발견했다면, Browserify나 비슷한 도구를 이용해 브라우저에서 바로 사용할 수 있을 가능성이 높습니다. 이렇게 하면 배열 중복 제거, 데이터 변환, 간단한 알고리즘 구현과 같은 문제를 해결할 때 선택의 폭이 크게 넓어집니다.

또한, 번들링은 웹 페이지 로딩 시 수행해야 하는 네트워크 요청 수를 줄여줍니다. 로컬 파일이나 원격 라이브러리마다 별도의 스크립트 태그를 포함하는 대신, 모든 것이 하나의 태그로 통합됩니다. bundle.js 이 기능은 HTTP 캐싱과 잘 연동되며, 특히 많은 npm 모듈에 의존하는 복잡한 애플리케이션을 다룰 때 배포 파이프라인을 간소화할 수 있습니다.

유지보수 측면에서 볼 때, 지속적으로 신뢰할 수 있다는 것은 중요한 이점입니다. require npm의 의존성 관리 덕분에 프런트엔드 코드베이스가 더욱 예측 가능하고 모듈화된 느낌을 줍니다. npm 명령어를 사용하여 모듈을 설치, 업데이트 및 제거하고, 종속성을 중앙에서 감사하며, Browserify가 브라우저 호환성에 필요한 변환을 처리하도록 하면 파일을 수동으로 복사하거나 임의적인 방식으로 타사 코드를 삽입할 필요가 없습니다.

최신 자바스크립트 도구와의 관계

우리가 살펴본 고전적인 예시는 Browserify에 초점을 맞추고 있지만, 그것이 보여주는 기본적인 패턴은 여전히 ​​많은 최신 프런트엔드 빌드 도구의 기반이 되고 있습니다. Webpack, Rollup, Parcel, Vite와 같은 최신 번들러들은 특정 스타일로 작성된 모듈을 브라우저가 효율적으로 실행할 수 있는 번들로 변환하는 문제도 해결합니다.

최신 브라우저는 이제 ES 모듈을 기본적으로 지원합니다. <script type="module">이는 상황을 부분적으로 바꾸지만 npm을 고려한 빌드 단계의 필요성을 없애지는 않습니다. npm 생태계의 많은 패키지는 여전히 CommonJS 진입점을 노출하거나 Node 스타일의 해석에 의존하며, ES 모듈 빌드가 가능한 경우에도 최적화, 트리 셰이킹 및 일관된 로딩 동작을 위해 번들링은 여전히 ​​중요합니다.

이러한 더 넓은 맥락에서, 작은 예시를 사용하는 것은 require('uniq'), npm install uniq 및 browserify main.js -o bundle.js 이 명령어는 단순한 튜토리얼 그 이상입니다. 이는 "모듈식 코드를 작성하고, npm에서 종속성을 설치한 다음, 브라우저에서 바로 사용할 수 있는 번들을 생성하는" 핵심 파이프라인을 보여줍니다. 구체적인 도구는 다를지라도 오늘날 거의 모든 진지한 프런트엔드 개발 환경에서 공통적으로 사용되는 패턴입니다.

Browserify의 작동 방식을 이해하면 새로운 기술 스택에 대해서도 더 쉽게 이해할 수 있습니다. 최신 번들러를 블랙박스처럼 취급하는 대신, 다음과 같은 공통점을 발견할 수 있습니다. 모든 번들러는 진입 파일을 읽고, 임포트 또는 리듀스를 따라가며, 의존성을 수집하고, 코드를 변환하여 브라우저가 간단한 스크립트 태그를 통해 로드할 수 있는 번들을 생성합니다. npm 패키지 생태계, 모듈 시스템, 그리고 번들러가 함께 어우러져 일상적인 개발 환경에서 매끄러운 사용 경험을 제공합니다.

이 모든 것을 실용적인 워크플로로 통합합니다.

원래 예시에서 제시된 실제 워크플로를 요약하면, 먼저 다음과 같은 파일에 애플리케이션 코드를 작성하는 것으로 시작합니다. main.js 사용 require 사용하고자 하는 npm 모듈을 가져오려면 해당 모듈을 불러오세요. 해당 파일에서 호출할 수 있습니다. var unique = require('uniq')배열을 다음과 같이 정의합니다. 그리고 결과를 콘솔에 로그합니다. 개념적으로는 이 모든 것이 Node 환경에서 실행될 것처럼 작업하는 것입니다.

다음 단계는 npm을 사용하여 해당 모듈이 프로젝트에 실제로 존재하는지 확인하는 것입니다. 예를 들어 다음과 같이 설치할 수 있습니다. npm install uniq. 이 작업은 다음을 채웁니다. node_modules 이 디렉토리를 사용하면 Node와 Browserify 모두 모듈 코드에 접근할 수 있어 필요에 따라 코드를 해석하고 포함할 수 있습니다.

코드와 종속성이 준비되면 다음과 같은 명령어를 실행하여 Browserify가 진입 파일부터 시작하여 모든 것을 재귀적으로 수집하도록 지시합니다. browserify main.js -o bundle.js. 해당 프로세스는 의존성 트리를 탐색하고, 각 모듈을 래핑하여 브라우저에서 CommonJS 환경을 모방한 다음, 최종적으로 출력합니다. bundle.js 필요한 모든 코드가 포함된 단일 번들 파일입니다.

마지막으로 HTML로 전환하여 다음과 같은 일반적인 스크립트 태그를 사용하여 이 단일 출력 파일만 참조합니다. <script src="bundle.js"></script>. 페이지에는 특별한 구문이 필요하지 않습니다. 복잡한 부분은 모두 번들 내부에 있습니다. 브라우저가 이를 다운로드하고 실행합니다. bundle.js그리고 그 안의 코드는 마치 다음과 같이 실행되는 것처럼 작동합니다. require 브라우저 자체에 관련 기능이 내장되어 있었습니다.

이 패턴을 따르면 Node의 모듈 시스템과 브라우저 환경 간의 격차를 효과적으로 해소하는 동시에 방대한 npm 패키지 생태계의 이점을 계속해서 누릴 수 있습니다. 패키지를 찾아보고, 설치하고, 필요한 패키지를 불러온 다음, 최적화된 단일 파일을 사용자에게 배포하여 개발 환경과 런타임 환경 모두를 관리하기 쉽고 효율적으로 유지할 수 있습니다.

더 높은 차원에서 보면, npm, Node 스타일 모듈, 그리고 Browserify와 같은 번들러를 결합하면 흩어져 있는 JavaScript 파일들을 일관성 있고 브라우저에서 바로 사용 가능한 자산 파이프라인으로 변환할 수 있습니다. 개발자는 모듈식 코드를 작성하고, 커뮤니티에서 관리하는 패키지를 활용하면서도 웹 페이지에 단일 스크립트를 제공할 수 있으므로, 최신 JavaScript 개발은 확장성이 뛰어나고 다양한 도구와 환경에서 접근성이 좋습니다.