Browserify를 시작합니다

JavaScript 구현은 우리가 웹이라고 부르는 아름다운 짐승이 매년 진화함에 따라 점점 더 복잡해지고 있습니다. 우리 중 많은 사람들이 이제 JavaScript 모듈과 함께 일합니다. 독립적으로 기능하는 구성 요소는 응집력있는 전체로 작동하지만 Amgageddon을 유발하지 않고도 구성 요소를 행복하게 교체 할 수 있습니다. 우리 중 많은 사람들이 AMD 모듈 패턴을 사용해 왔으며 이것을 깔끔하게 달성하기 위해 JS를 요구합니다. 작년에 Browserify는 장면을 강타하여 많은 흥분을 가져 왔습니다. 먼지가 정착하기 시작하면서 Browserify가 무엇인지, 작동 방식 및 워크 플로에 추가 할 수있는 몇 가지 옵션에 대한 개요를 작성하고 싶었습니다. 키 테이크 아웃

browserify는 종속성을 단일 JavaScript 파일로 묶어 브라우저에서 Node.js 스타일 모듈을 직접 사용할 수 있습니다. Browserify 사용을 시작하려면 Node.js, npm (기본적으로 node.js로 설치)이 필요하며 Browserify 자체가 필요합니다.이 자체는`npm install -g browserify`를 사용하여 전 세계적으로 설치할 수 있습니다. Browserify는 Node.js와 유사한`requible ()`문을 사용하여 프로젝트에 외부 라이브러리를 포함하여 단순화하고 더 쉬운 디버깅을 위해 소스 맵을 생성 할 수 있습니다. 당신은 Gulp 및 Grunt와 같은 NPM 스크립트 또는 작업 러너를 사용하여 Browserify 프로세스를 자동화하여 워크 플로 효율성 향상 및 수동 번들링 노력을 줄일 수 있습니다. Browserify 프로젝트의 종속성 관리`package.json` 파일로 간소화되어 프로젝트 세부 사항을 지정하고 필요한 NPM 패키지를 지정하여 다른 사람들이`npm install`를 사용하여 프로젝트를 설정할 수 있습니다. Browserify는 Babel을 사용하여 변환을 통해 ES6 모듈과 호환되며, 더 쉬운 오류 추적을 위해 원래 소스 파일로 추적하기 위해 소스 맵으로 디버깅을 지원합니다.

Browserify 란 무엇입니까? Browserify를 사용하면 브라우저에서 node.js 스타일 모듈을 사용할 수 있습니다. 우리는 종속성을 정의한 다음 브라우저 화는 그것을 단일 깔끔하고 깔끔한 자바 스크립트 파일로 묶습니다. 요구 사항 ( './ YourFancyJSFile.js') 문서를 사용하여 필요한 JavaScript 파일을 포함하며 NPM에서 공개적으로 사용 가능한 모듈도 가져올 수도 있습니다. Browserify가 소스 맵을 생성하는 것은 매우 간단합니다. 각 JS 파일이 모두 하나에 결합되어 있음에도 불구하고 각 JS 파일을 개별적으로 디버깅 할 수 있습니다. 왜 노드 모듈을 가져 오는가?

모듈 가져 오기는 축복입니다. 축복입니다. JavaScript 용 라이브러리를 다운로드하기 위해 다양한 사이트를 방문하지 않고 require () 문을 사용하여 포함시키고 모듈이 설치되어 있고 이동하기에 좋습니다. JQuery, 밑줄, 백본 및 Angular (비공식 분포)와 같은 일반적으로 사용되는 JavaScript 라이브러리가 모두 작업 할 수 있습니다. 이미 노드를 실행하는 사이트에서 작업하는 경우 모든 JS를 구성하는 한 가지 일반적인 방법으로 더 단순화하는 것입니다. 나는 그 개념을 정말로 좋아한다.

필요한 것

Browserify를 시작하려면 최소한이 필요한 최소한은 다음과 같습니다.

node.js npm - 기본적으로 노드와 함께 설치됩니다 Browserify -이 제품을 설치하는 방법을 설명하겠습니다 길들여 질 준비가 된 JavaScript 모듈 팩!

시작하기

시작하려면 컴퓨터에 노드와 NPM이 설치되어야합니다. 설치에 대한 지침을 찾고 있다면 위의 링크로 이동하십시오. 완전히 고정되면 패키지 관리자를 통해 Node.js 설치에 대한 지침을 사용해보십시오. Browserify를 사용하기 위해 실제로 노드 작업을 수행 할 필요가 없습니다. NPM이 실행되기 때문에 노드 만 설치하고 있습니다. NPM이 있으면 다음 명령을 사용하여 Browserify를 설치할 수 있습니다.
• 우리가하는 일은 NPM을 사용하여 컴퓨터에 전 세계적으로 Browserify를 설치하는 것입니다 (-G는 NPM에 전 세계 모듈을 설치하도록 지시합니다). 다음으로 시작하는 오류가 발생하면
• 그런 다음 허가 문제가 있습니다. 당신은 명령을 sudo 할 수 있지만 대신이 게시물을 확인하는 것이 좋습니다.

첫 번째 Browserify 파일 생성 매우 인기있는 모듈을 가져 오는 브라우즈 서식 JavaScript 파일을 작성하여 시작하겠습니다. 밑줄을 사용하여 Superman을 추적합니다. JS 파일 Main.js에 전화하여 프로젝트의 JS 폴더에 배치했습니다. 우리는 JavaScript에서 Browserify의 require () 문을 사용하여 밑줄을 밑줄로 할당하여 시작합니다.
• 다음, 우리는 밑줄에서 각 () 및 find () 함수를 사용합니다. 우리는 두 개의 이름을 검색하고 콘솔을 실행하여 슈퍼맨을 보는지 여부를 말할 것입니다. Lex Luthor가 꿈꾸는 고급스러운 것들. 최종 JavaScript 코드는 다음과 같습니다
프로젝트에 추가하려고 할 때 Browserify가 NPM 모듈을 찾을 수 있도록하고 싶습니다. 그렇게하는 기본 사항은 터미널을 열고 JavaScript 프로젝트를 보유하는 폴더로 탐색 한 다음 해당 폴더에 밑줄을 설치하기 위해이 명령을 실행하는 것입니다.
• Node 및 NPM이 작동하는 방식에 익숙하지 않은 사람들의 경우, 프로젝트에서 Node_Modules라는 폴더를 생성하여 밑줄 모듈의 코드를 보유합니다. 이 명령은 https://registry.npmjs.org/underscore의 NPM 저장소에서 최신 버전의 밑줄을 검색합니다. Node_Modules 폴더의 해당 모듈을 사용하여 Browserify는 이제 찾아서 사용할 수 있습니다.
처음으로 Browserify를 실행합니다
Browserify를 실행하면 첨부 된 모든 모듈이있는 새 JavaScript 파일을 작성하고 싶습니다. 이 경우 내부에 밑줄이있는 자바 스크립트 파일을 빌드합니다. 이 새 파일의 이름을 결정해야합니다. Findem.js와 함께 갔다. 프로젝트의 루트 폴더 에서이 명령을 실행합니다

npm install -g browserify

이 명령은 main.js 파일을 읽고 -o 옵션으로 정의 된 findem.js 파일로 출력합니다. -D 옵션이 포함되어있어 우리를 위해 소스 맵도 생성 할 수 있도록 Main.js를 디버그하고 별도의 파일로 깨끗하게 강조 할 수 있습니다.

. Browserify 출력 사용 거기에서 다른 js 파일과 마찬가지로 페이지에 파일을 포함시키는 것만 큼 간단합니다.

자신의 JavaScript 파일 가져 오기

모든 응용 프로그램이 노드 모듈에서 나올 가능성은 낮습니다. 자신의 자바 스크립트를 포함 시키려면 동일한 요구 사항 () 함수를 사용할 수 있습니다. 다음 행 JavaScript 라인은 your_module.js라는 JS 파일을 GreatestModulever 변수로 가져옵니다 :

이와 같이 JavaScript를 가져 오려면 JavaScript를 모듈로 구성하면됩니다. 그렇게하려면 module.exports를 정의해야합니다. 이 작업을 수행하는 한 가지 방법은 다음과 같습니다.

Error: EACCES, mkdir '/usr/local/lib/node_modules/browserify'

사이드 노트! NPM에 있지 않은 JavaScript 라이브러리가 많이 있고 이러한 모든 것을 Browserify로 가져 오는 더 쉬운 방법을 찾고 있다면 Browserify Shim NPM 모듈을 사용하여 이러한 파일을 변환 할 수 있습니다. . 우리는이 기사에서는 그것을 사용하지 않을 것이지만 일부 개발자는 그에게 갈 수있을 것입니다.

. 모듈이있는 예제 이것이 어떻게 작동하는지에 대한 간단한 예를 들으려면 이전 슈퍼 히어로 검색 예제에서 배열을 꺼내어 이름을 반환하는 별도의 JS 모듈로 교체합니다. 모듈은 다음과 같습니다

다음으로, 우리는 이름 = require ( './ names.js')를 사용하여 해당 모듈을 코드로 가져옵니다.

우리의 이름 변수는 모듈에서 내보낸 함수를 참조합니다. 따라서 우리는 이름의 이름을 FindSuperman () 함수로 전달할 때 괄호가있는 함수로 위의 이름 변수를 사용합니다. 명령 행에서 Browserify 명령을 다시 한 번 컴파일하여 컴파일하고 브라우저에서 열면 배열의 각 값을 검색하고 슈퍼맨을 보는지 여부에 관계없이 예상대로 실행해야합니다.

<span>var _ = require('underscore');</span>

앱에서 변수를 전달하고 모듈을 공유합니다 이 간단한 슈퍼맨 헌팅 앱에 좀 더 복잡성을 추가하려면 FindSuperman () 기능을 모듈로 바꾸겠습니다. 이렇게하면 이론적으로 자바 스크립트의 여러 부분에서 슈퍼맨을 찾을 수 있었고 항상 슈퍼맨 사냥 모듈을 미래에 더 효과적으로 더 효과적으로 교체 할 수 있습니다. 우리는 변수를 모듈로 전달하여 모듈에 사용할 수 있으므로 findsuperman.js라는 파일에 모듈을 생성 할 수 있습니다.

npm install -g browserify

FindSuperman () 함수에 대한 반환 값을 추가했습니다. 슈퍼맨을 찾으면 사실이 되돌아갑니다. 그렇지 않으면 거짓을 반환합니다. 이 모듈을 사용 하여이 True/False 값을 사용하는 것을 결정하는 것은 코드에 달려 있습니다. 그러나 위의 모듈에는 놓친 것이 있습니다. 우리는 기능에 밑줄을 사용하고 있지만 선언하지는 않았습니다. 우리는 모듈 자체에서도 상단에서도 선언 할 수 있습니다.

Browserify를 사용할 때 가져 오는 모든 JS 파일을 살펴보고 한 번 언급 된 각 모듈 만 가져옵니다. 따라서 우리는 메인 JS 파일에 밑줄이 필요하며 FindSuperman.js에 필요하지만 Browserify가 모두 패키지를 만들면 최종 JS 파일에 한 번만 넣습니다. 꽤 깔끔한가? 우리의 실제 JavaScript 앱은 이제 새로운 반환 된 true/false 값과 함께 새 모듈을 사용합니다. 데모 목적으로 간단한 문서를 고수 할 것입니다. 이름에서 슈퍼맨을 찾았는지 여부를 말하십시오.

우리는 더 이상 기본 JS 파일에서 밑줄을 가져올 필요조차 없으므로 드라마없이 제거 할 수 있습니다. FindSuperman.js 파일에 포함되어 결국 수입이 계속 될 것입니다. package.json Error: EACCES, mkdir '/usr/local/lib/node_modules/browserify'를 사용하여 Browserify의 NPM 종속성 관리 코드를 사용하고 싶은 예리한 친구가 있다고 말합니다. NPM 밑줄 모듈을 먼저 설치해야한다는 것을 알기가 조금 어렵습니다. 이에 대한 해결책은 프로젝트의 루트에서 package.json이라는 파일을 만드는 것입니다. 이 파일은 프로젝트에 이름을 제공합니다 (여기서 이름에 공백이 없는지 확인), 설명, 저자, 버전 및 가장 중요한 경우 NPM 종속성 목록입니다. 노드로 개발 한 사람들을 위해 우리는 여기에서 똑같은 것들을 사용하고 있습니다 :
종속성 목록은 현재 단일 "밑줄": "1.6.x"로 제한되며, 여기서 종속성의 첫 번째 부분은 이름이고 두 번째 부분은 버전입니다. NPM이 가진 최신 버전을 검색합니다. 또는 1.6 (버전 1.6) 및 1.6.x (1.6.0 버전 1.7)와 같은 숫자를 넣을 수 있습니다. 우리는 또한 Browserify 자체를 종속성으로 포함시킬 수 있지만 프로젝트를 실행하는 것은 의존성이 아닙니다. 모든 사용자는 Browserify를 실행할 필요없이 Superman을 찾을 수 있습니다. 개발자 가이 앱을 업데이트하는 데 필요한 모듈입니다. 이제 우리는 package.json 파일을 받았으며 친구가 NPM 설치 밑줄을 실행하도록 할 필요가 없습니다. 그들은 단지 NPM 설치를 실행할 수 있으며 필요한 모든 종속성은 Node_Modules 폴더에 설치됩니다.
Browserify 프로세스 자동화 파일을 변경할 때마다 명령 줄에서 Browserify를 실행하는 것은 성가신 일이 아니며 전혀 편리하지 않습니다. 운 좋게도 Browserify의 실행을 자동화하는 데 사용할 수있는 몇 가지 옵션이 있습니다. npm

npm 자체는 수동으로 입력 한 것과 마찬가지로 명령 줄 스크립트를 실행할 수 있습니다. 그렇게하려면 스크립트 섹션을 Package.json에 넣습니다.

를 실행하려면 명령 줄에 다음을 입력 할 수 있습니다.

그러나 충분히 편리하지 않습니다. 우리는 여전히 매번 그 명령을 수동으로 실행해야합니다. 성가시다. 따라서 더 나은 옵션은 Watchify라는 NPM 모듈을 사용하는 것입니다. Watchify는 간단하고 쉽고 큰 시간을 절약합니다. JS와 자동으로 재 런 브라우시 화의 변경 사항을 지켜 볼 수 있습니다. 이 이것을 package.json에 가져 오려면 DevDdependencies에 추가하고 JS를 시청하기위한 새로운 스크립트를 포함시킬 것입니다 (Build-JS를 변경할 필요없이 JS를 구축하고 싶을 때 Build-JS를 남겨 두십시오. 파일).

npm install -g browserify

이를 실행하려면 다음 명령을 입력하십시오.

그것은 마법을 달리고 일할 것입니다. 무슨 일이 일어나고 있는지 알려주는 것은별로 말하지 않습니다. 무엇을하고 있는지에 대한 세부 정보를 제공하기를 원한다면 Watchify 명령에 -v를 추가하십시오.

는 실행할 때마다 이와 같은 피드백을 줄 것입니다 :

Error: EACCES, mkdir '/usr/local/lib/node_modules/browserify'

NPM에서 소스 맵 생성 npm을 사용하여 소스 맵을 생성하려면 browserify 또는 watchify command를 추가하여 -D를 추가하십시오.

Debugging 용 -D와 Verbose Output의 -v를 모두 두 가지 모두와 같이 결합 할 수 있습니다.

grunt 많은 사람들 (나 자신이 포함 된)이 한동안 Grunt를 사용해 왔으며 꽤 익숙합니다. 운 좋게도, 그런 종류의 경우, Browserify는 Grunt 빌드와도 멋지게 재생됩니다! Grunt를 사용하려면 package.json 파일을 변경해야합니다. 우리는 더 이상 스크립트 섹션을 사용하지 않을 것이며 대신 그 런트에 의존 할 것입니다. 대신 몇 가지 새로운 DevDdependencies를 추가합니다 :

우리는 종속성에 추가했습니다 :

<span>var _ = require('underscore');</span>

grunt - 프로젝트에 Grunt를 설치했는지 확인하십시오.

Grunt-Browserify-Grunt 내부에서 Browserify를 실행할 수있는 모듈. Grunt-Contrib-Watch-변경할 때마다 파일을보고 Browserify를 실행하는 모듈입니다.

그런 다음 프로젝트의 루트에서 gruntfile.js라는 파일을 만듭니다. 이 grunt 파일 안에는 다음과 같은 것이 있습니다

<span>var _ = require('underscore'),
</span>  names <span>= ['Bruce Wayne', 'Wally West', 'John Jones', 'Kyle Rayner', 'Arthur Curry', 'Clark Kent'],
</span>  otherNames <span>= ['Barry Allen', 'Hal Jordan', 'Kara Kent', 'Diana Prince', 'Ray Palmer', 'Oliver Queen'];
</span>
_<span>.each([names, otherNames], function(nameGroup) {
</span>  <span>findSuperman(nameGroup);
</span><span>});
</span>
<span>function findSuperman(values) {
</span>  _<span>.find(values, function(name) {
</span>    <span>if (name === 'Clark Kent') {
</span>      <span>console.log('It\'s Superman!');
</span>    <span>} else {
</span>      <span>console.log('... No superman!');
</span>    <span>}
</span>  <span>});
</span><span>}</span>

우리는 package.json 파일에 필요한 npm 모듈을로드하여 Grunt 파일에서 시작합니다.

우리는 기본 작업으로 실행하려는 하나의 유일한 작업 그룹을 등록합니다 (Browserify and Watch) :

우리는 grunt initconfig 객체를 설정했습니다 (모든 grunt 파일을 찾습니다) :

npm install underscore

그 안에서, 우리는 package.json 파일의 위치를 ​​지적합니다.

npm install -g browserify

우리의 Browserify 설정은 다음에 있으며 기본적으로 소스 js 파일이 Browserified 코드와 함께 제공되는 곳에서 설정하고 다음을 구축하려는 파일을 설정합니다.

그런 다음 JS 폴더에서 변경 될 때마다 Browserify 작업을 다시 실행하기 위해 시계 작업을 설정합니다.

새로운 DevDdependencies (프로젝트에 Grunt를 설치하지 않았거나 해당 모듈도 없음)로 인해 NPM을 먼저 설치해야합니다. 모듈을 실행하고 설치할 수있게 한 후에는 단순한 GruntCommand를 실행하여 프로젝트 시청을 시작할 수 있습니다.

Error: EACCES, mkdir '/usr/local/lib/node_modules/browserify'

. Grunt에서 소스 맵 생성 Grunt-Browserify의 버전 2.0.1을 사용하면 소스 맵을 정의 해야하는 방식이 변경되어 온라인으로 많은 가이드가 잘못되었습니다! 소스 맵을 생성하기 위해 grunt 및 browserify를 얻는 올바른 방법은 디버그를 추가하는 것입니다.

복잡한 옵션 설정이 설정되어있어 미래의 브라우저 화 옵션을 멋지고 쉽게 호환 가능한 방식으로 포함시킬 수 있습니다.

gulp Gulp는 Browserify의 타블로이드 애호가입니다. 웹 주변의 기사는 두 가지를 자주 짝을 이루고 있습니다. Browserify 팬이 Gulp를 사용해야한다고 말하지는 않습니다. 대부분 다른 구문 사이의 개인적인 취향입니다. (위에서 본 것처럼) NPM 또는 Grunt를 사용하여 Browserify 파일을 작성할 수 있습니다. 저는 개인적으로 소규모 프로젝트를위한 깨끗하고 간단한 NPM 빌드 프로세스의 팬입니다.

<span>var _ = require('underscore');</span>

Gulp에서 위의 위의 작업을 수행하려면 Gulp를 전 세계적으로 설치하여 시작합니다.

우리는 Package.json 파일을 업데이트하여 몇 가지 새로운 DevDdependence를 포함시킬 것입니다.

우리는 다음을 추가했습니다 :

Watchify - 우리는 NPM 예제에서도 위에서 이것을 사용했습니다. 동일한 모듈. gulp - 우리에게 그 꿀벌 선함을 모두주는 다소 중요한 모듈!

비닐 소스 스트림-이것은 입력을 취하고 어딘가에 넣을 파일을 반환하는 모듈입니다.

Browserify에는 Gulp에서 직접 사용할 수있는 출력에 대한 스트리밍 API가 있습니다. 많은 가이드는 Gulp-Browserify 플러그인을 사용하는 것이 좋습니다. 그러나 Browserify는 이것을 권장하지 않으며 Browserify의 스트리밍 API 출력을 사용하는 것을 선호합니다. 우리는 Vinyl-Source-Stream을 사용 하여이 Browserify 출력을 선택하여 어딘가에 출력 할 수 있도록 파일에 배치합니다. 그런 다음 프로젝트의 루트에서 gulpfile.js라는 파일을 만듭니다. 이것은 모든 Gulp 기능이 진행되는 곳입니다

우리는 상당히 자기 설명 인 NPM 모듈에서 가져 오는 것으로 시작합니다. 그런 다음 빌드에 대한 세 가지 변수를 설정합니다
sourcefile - Browserified 파일의 위치 및 파일 이름 (이 경우 js/main.js) destfolder - 최종 파일을 로 출력하는 폴더 위치 destfile - 최종 파일을 갖기를 원하는 파일 이름
아래의 코드를 아래에서 좀 더 자세히 설명하겠습니다.
• Browserify와 Gulp가 함께 작동하는 방법
우리의 첫 번째 작업은 우리가 그렇게 정의하는 브라우저 화입니다.
• 먼저 main.js 파일을 Browserify npm 모듈로 전달합니다 : .
그런 다음 Browserify Streaming API를 사용하여 JavaScript 컨텐츠로 읽을 수있는 스트림을 반환합니다.
거기에서 파일 이름 Findem.js와 함께 파일에 파이프 한 다음 gulp에 파이프를 js 폴더에 넣습니다.

.

우리는 기본적으로 반짝이는 새로운 JavaScript 파일이어야하는 최종 프로젝트에 이어주는 다양한 단계를 통해 입력을 취하고 있습니다! 조합 Watchify and Gulp 이전에 배운 것처럼 파일을 업데이트 할 때 자동으로 실행하는 것이 훨씬 쉽기 때문에 Browserify를 직접 사용하는 것은 약간 성가신 일입니다. 이렇게하려면 Watchify NPM 모듈을 다시 사용합니다.

우리는 Watch라는 작업을 설정하는 것으로 시작합니다 (원하는 경우 Watchify라고 부를 수 있습니다.

우리는 두 번 사용할 수 있으므로 Watchify 모듈을 Bundler 변수에 할당합니다.
그런 다음 업데이트 이벤트가 호출 될 때마다 rebundle ()이라는 함수를 실행하는 이벤트 핸들러를 추가합니다. 기본적으로 Watchify는 파일 변경을 볼 때마다 Rebundle () : 가 실행됩니다.

npm install -g browserify

그래서 rebundle () 란 무엇입니까? 우리의 Browserify 작업이 위에서 수행 한 일은 거의 정확히 일치합니다.
Keen JavaScript 최적화로 Browserify를 모두 병합하고 함께 감시 할 수 있지만이 기사에 별도로 남겨 두어 간단하게 유지하기로 결정했습니다. 이에 대한 인상적이고 복잡한 예는 Dan Tello의 스타터 걸프 파일을 확인하십시오. gulpfile.js를 완료하려면 Grunt의 기본 작업과 동일한 방식으로 작동하는 기본 작업을 정의합니다.

Error: EACCES, mkdir '/usr/local/lib/node_modules/browserify'

위의 Gulp 코드를 실행하려면 세 가지 옵션이 있습니다. 가장 쉬운 방법은 명령 줄에서 하나의 단어 만 필요로하는 기본 작업을 실행하는 것입니다.

는 Browserify 작업을 한 번 실행하고 시계 작업이 변경 사항에 대한 파일을 시청하기 시작합니다. 당신은 또한 구체적으로 Browserify 작업을 실행할 수 있습니다 :

또는 시계 작업 :

<span>var _ = require('underscore');</span>

Gulp 및 Browserify를 사용하여 소스 맵 생성 JavaScript의 소스 맵을 생성하려면 두 번들 () 함수에 {debug : true}를 포함 시키십시오. 우리의 Browserify 작업은 다음과 같습니다
시계 작업의 rebundle () 함수는 그렇게 보일 것입니다 :

npm install -g browserify

결론 는 여전히 Browserify의 초기에 꽤 초기이며 시간이 지남에 따라 분명히 진화하고 성숙 할 것입니다. 현재 상태에서는 이미 모듈 식 자바 스크립트를 구성하는 매우 편리한 도구이며 백엔드에서 노드를 사용하는 사람들에게 특히 훌륭합니다. 프로젝트의 전면 및 후면에서 NPM 모듈을 사용할 때 노드 개발자에게 코드가 훨씬 깨끗해집니다. Browserify 샷을 제공하지 않았다면 다음 JavaScript 프로젝트에서 시도해보십시오. 기타 리소스 다른 브라우저 리소스가 많이 있습니다. 확인하고 싶은 몇 가지 편리한 비트와 조각 :

Browserify 핸드북 - James Halliday의 Browserify를 시작하기위한 매우 귀중한 핸드북. 확실히 읽을 가치가 있습니다! Gulp Browserify : The Everything Post by Dan Tello - 더 고급 사용을 보여주는 정말 철저한 기사. 그리고 그 멍청이와 요구 사항이 나가는 것처럼, 그것은 지금 Gulp and Browserify에 관한 것입니다. Martin Genev는 그의 갑작스런 방향으로 Browserify와 Gulp로 전환하는 것에 대해 이야기합니다. Gulp.js 소개 - Craig Buckler의 Gulp 사용 방법에 대한 자세한 정보.

Browserify를 시작하는 것에 대해 자주 묻는 질문 (FAQ)
Browserify의 주요 목적은 무엇입니까?
Browserify는 개발자가 브라우저에서 사용하기 위해 컴파일하는 node.js 스타일 모듈을 작성할 수있는 개발 도구입니다. Browserify를 사용하면 모든 종속성을 묶어 브라우저에서 ( '모듈')가 필요할 수 있습니다. 이 도구는 브라우저에서 대부분의 NPM 패키지를 직접 사용할 수 있으므로 개발 프로세스 속도를 크게 높일 수 있기 때문에 특히 유용합니다.
Browserify는 다른 모듈 Bundlers와 어떻게 다릅니 까? 다른 모듈 Bundlers와 달리 Browserify는 개발자가 브라우저 용 Node.js 스타일 모듈을 작성할 수 있도록 특별히 설계되었습니다. 앱의 모든 require () 호출을 재귀 적으로 분석하여 번들을 만들려면 단일 스크립트 태그로 브라우저를 제공 할 수 있습니다. Browserify는 또한 풍부한 플러그인 생태계가있어 빌드를 크게 사용자 정의 할 수 있습니다.
Browserify를 설치하려면 어떻게해야합니까?
NPM (Node를 사용하여 시스템에 Browserify를 설치할 수 있습니다. 패키지 관리자). 이 명령은‘NPM Install -G Browserify’입니다. 일단 설치되면 명령 줄에서 JavaScript 파일을 묶을 수 있습니다.
• 내 프로젝트에서 Browserify를 어떻게 사용합니까?
Browserify를 사용하려면 먼저 코드를 작성해야합니다. CommonJS 모듈 형식. 그런 다음 명령 줄에서 Browserify를 사용하여 기본 JavaScript 파일을 단일 파일로 묶을 수 있습니다. 이 번들 파일은 스크립트 태그를 사용하여 HTML 파일에 포함시킬 수 있습니다. Browserify와 함께 es6 모듈을 사용할 수 있습니까?

예, Browserify와 함께 ES6 모듈을 사용할 수 있지만 Babel과 같은 트랜스 필러를 사용하여 Browserify가 이해할 수있는 ES6 코드로 ES5 코드를 변환해야합니다. . Babel 및 Babelify Transform을 설치 한 다음 Browserify 명령에 사용 하여이 작업을 수행 할 수 있습니다.

Browserify와 함께 브라우저에서 NPM 패키지를 어떻게 사용할 수 있습니까?

Browserify를 사용하면 어떻게 할 수 있습니까? 브라우저에서 직접 대부분의 NPM 패키지를 사용하십시오. 이렇게하려면 먼저 NPM을 사용하여 패키지를 설치해야합니다. 그런 다음 JavaScript 파일에 패키지를 요구할 수 있고 Browserify는 번들에 포함되어 있는지 확인합니다.

Browserify의 변환은 무엇입니까?

변환은 Browserify가 컴파일하거나 컴파일하는 데 사용하는 플러그인입니다. 코드를 변환하십시오. 예를 들어 Babelify 변환을 사용하여 ES6 코드를 ES5 코드로 컴파일 할 수 있습니다. 변환은 전 세계적으로 또는 특정 파일에 적용될 수 있으며 프로젝트에서 여러 변환을 사용할 수 있습니다.

번들 코드를 디버깅하려면 어떻게해야합니까?
Browserify는 소스를 생성하기위한 내장 옵션이 있습니다. 다발 코드를 디버깅하는 데 도움이되는지도. 소스 맵을 생성하려면 Browserify 명령에서 '–debug'옵션을 사용할 수 있습니다. 여기에는 번들에 소스 매핑 데이터가 포함되며, 여기에는 브라우저의 개발자 도구에서 코드를 디버깅하는 데 도움이 될 수 있습니다.

Gulp 또는 Grunt와 같은 작업 러너와 함께 Browserify를 사용할 수 있습니까? 🎜> 예, Gulp 또는 Grunt와 같은 작업 러너와 함께 Browserify를 사용할 수 있습니다. Gulp와 Grunt에는 Browserify를 빌드 프로세스에 통합하는 데 사용할 수있는 플러그인이 있습니다. 이렇게하면 JavaScript 파일을 묶는 프로세스를 자동화하는 데 도움이 될 수 있습니다.

생산을 위해 내 번들을 최적화하는 방법은 무엇입니까?

생산을 위해 Browserify 번들을 최적화하는 몇 가지 방법이 있습니다. 일반적인 방법 중 하나는 uglifyjs와 같은 도구를 사용하여 번들을 최소화하는 것입니다. 또한 번들에 다양한 최적화를 적용하여 가능한 한 작게 만들기 위해 Browserify 플러그인 인 'Tinyify'플러그인을 사용할 수도 있습니다.

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