브라우저리파이

주영택·2021년 2월 14일

이제 브라우저리파이를 사용하는 프로젝트는 없을 듯하네요. commonjs 타입의 node 패키지를 브라우저에 사용하기 위해 개발된 도구이고 webpack 이 세상을 점령하기 전까지 매우 유용한 툴이었습니다.
2014~5 년 경 조사한 브라우저리파이 게시물 모음입니다.

common.js 모듈러 패턴을 사용할 수 있게 해 주는 broweserify 툴에 대한 소개. 공식 홈페이지에서 오늘까지 소개된 내용을 살펴 봄.

BROWESERIFY

소개/기본

Browserify Handbook

github.com/substack/browserify-handbook

제작팀 Substack 에서 소개하는 핸드북, 쭉 읽어 보면 된다.

Introduction to Browserify

superbigtree.tumblr.com/post/54873453939/introduction-to-browserify

심플한 예제를 통해 브라우저리파이와 버피를 소개하고 있다. 해당 원고는 저자가 참여한 이북의 원고로 사용되고 있다고 한다.

Untangle Your JavaScript with Browserify

lincolnloop.com/blog/untangle-your-javascript-browserify

클라이언트 자바스트립트 개발 '이래서는 안된다.' 라는 말로 브라우저리파이와 프랜스폼에 대해 소개하고 있다.
역시 심플한 코드와 그런트와 걸프를 함께 사용하는 코드를 소개하고 있으니 꼭 보길 추천.

How Browserify Works

benclinkinbeard.com/posts/how-browserify-works

조금 어려운 얘기들이 시작된다. IIFE 에 대한 이야기를 하며 브라우저리파이를 설명하고 있다. 엄청나게 복잡하고 놀라운 것들이 있지만 결론은 엄청나게 많은 NPM 모듈들을 브라우저리파이를 통해 사용할 수 있다는 것이라고 알려준다.
추가로 아토미파이에 대한 포스트도 눈여겨 볼 만하다.

Browserify: Unix In The Browser

thinkingonthinking.com/unix-in-the-browser

거창한 제목과 다르게 심플한 설명을 통해 브라우저리파이를 소개한다. 유닉스니까 심플하게 소개하는게 맞나? 커멘드 라인이여 영원하라.

blog.codecentric.de/en/2014/02/cross-platform-javascript

CommonJS 와 RequireJS, AMD 에 대한 이야기로 장문은 시작한다. 코드의 규모가 커질수록 모듈러, 코드 로더, 로더와 브라우저, 서드파티 코드, 백엔드와 프론트엔드에 대한 효율이 논의된다. 그에 대한 해결책으로 제시하는 것이 브라우저리파이다.
그런트 매니저와 와치파이를 통해 사용하는 법을 설명하고 있다. 노드 모듈이 모두 브라우저에서 돌아가지 않기 때문에 필요한 시밍 코드들에 대해서도 얘기한다.

Using npm on the client side

dontkry.com/posts/code/using-npm-on-the-client-side.html

NPM 의 위대함을 다시 한번 이야기 한다. 그리고 그걸 브라우저에서도 사용하는 브라우저리파이에 대해 소개한다. 콘솔에서 이 모든 작업을 한 번 해보고 그런트를 통해 한방에 처리하는 법을 설명하고 있다.

NPM Everywhere (Slides)

NPM Everywhere

지금까지 게시물을 잘 봤으면 으흠 하고 지나갈 내용들.

Node Packaged Modules, bringing npm modules to the web

maxogden.com/node-packaged-modules.html

역시 NPM 에 대한 이야기와 브라우저에서 NPM 을 사용한다는 이야기. 브라우저리파이된 코드를 CDN 하는 위저드.인 사이트를 소개한다. 그리고 RequireBin 을 소개하고 있다. JSBin 에 익숙하다면 감 잡을 수 있다. RequestBin 의 예제 코드를 보면 이게 내가 알던 프론트엔드 코드인지 헷갈린다.
이후 npmsearch 를 소개하는데 일레스틱서치를 사용하고 있어 참고할 코드가 있을 것이라 생각된다. 그리고 쿨한 예제들을 소개하고 있다.

Browserify and the Universal Module Definition

dontkry.com/posts/code/browserify-and-the-universal-module-definition.html

지금도 자바스크립트 월드에서 모듈링은 현재 진형형이다. ES6 에 도입되는 기능도 링크되어 있다. 모듈화에 대한 문제점과 컨셉 코드 그리고 브라우저리파이, AMD, ES6 에 대해 이야기한다.

Standalone Browserify Builds

www.forbeslindesay.co.uk/post/46324645400/standalone-browserify-builds

브라우저리파이를 통해 스탠드얼론 라이브러리를 만드고 그걸 사용하는 샘플 코드. 새로울 것도 없다.

Browserify v2 adds source maps

thlorenz.com/blog/browserify-sourcemaps

소스 맵에 대한 소개 링크를 던저 준다. 브라우저리파이 작업시 소스맵을 추가로 생성하는 옵션인 --debug 항목을 보여주면서 이야기를 풀어간다.

Browserify on Small.js

smalljs.org/package-managers/npm/browserify/

노드 기반의 NPM 을 브라우저에서 사용하는지에 대한 얘기. 하나의 번들로 묶어 버리는 특성 때문에 소스맵을 사용하라는 얘기. 자동화 도구들. jQuery 를 비롯한 유명 프레임워크들도 npm 으로 설치할 수 있다. 왜냐면 브라우저리파이로 사용할 수 있게 되었기 때문이다.