Gulf를 사용하여 Bower 구성 요소에서 Browserify와 별도의 공급 업체 번들을 만드는 방법

Question

application.js 및 vendor.js과 같이 두 개의 개별 번들로 자바 스크립트를 패키지화하려면 Gulp 및 Browserify을 사용하고 있습니다.

내 공급 업체 라이브러리에 Bower이 설치된 경우 vendor 패키지를 번들하려면 어떻게합니까? 내 gulpfile에서

, 나는 다음과 같은 모듈을 사용하고 있습니다 만 (이 예를 들어) 정자와 함께 설치된 Phaser framework, 내 꿀꺽 작업이 application 패키지를 만드는 데 내가 가지고 있다고 가정

var gulp = require("gulp"); 
var browserify = require("browserify"); 
var debowerify = require("debowerify"); 
var source = require("vinyl-source-stream"); 

은 다음과 같습니다 :

gulp.task("scripts-app", function() { 
    browserify("./app/javascripts/index.js") 
    .external("phaser") 
    .pipe(source("application.js")) 
    .pipe(gulp.dest("./tmp/assets")); 
}); 

한편, vendor 작업은 다음과 같습니다

gulp.task("scripts-vendor", function() { 
    browserify() 
    .transform(debowerify) 
    .require("phaser") 
    .pipe(source("vendor.js")) 
    .pipe(gulp.dest("./tmp/assets")); 
}); 

이 Gulp 작업을 실행하면 Error: Cannot find module 'phaser' from을 검색 한 다음 모든 디렉토리를 검색합니다 (어느 것도 bower_components 디렉토리가 아닙니다).

이러한 패키지를 성공적으로 패키지하는 방법에 대한 아이디어는 매우 높이 평가됩니다. 감사!

Answer 1

내 자신의 질문에 답변 다음 꿀꺽 작업에 require를 사용하는 경우

을, 당신은 파일에 단지 이름을 경로를 제공해야합니다.

gulp.task("scripts-vendor", function() { 
    browserify() 
    .transform(debowerify) 
    .require("./bower_components/phaser/phaser.js") 
    .pipe(source("vendor.js")) 
    .pipe(gulp.dest("./tmp/assets")); 
}); 

require("./bower_components/phaser/phaser.js")이되었습니다.

번들을 빌드하는 데 오래 걸립니다 (약 20 초). 거대한 라이브러리/프레임 워크를 <script> 태그를 통해 직접 앱에로드 한 다음 Browserify Shim을 사용하는 것이 좋습니다.

그러면 require() (NodeJS/Browserify 의미) 전역 변수 (documentation)가됩니다.

Answer 2

bower 파일을 요구하는 방법을 알아 냈습니다. 잘하면 모든 빌드가 아니라 초기에 한 번만 번들로 묶어 야합니다. 스크립트 태그를 통해 라이브러리를 포함시키는 것은 나쁜 생각이 아닙니다. 내가 사용하고있는 또 다른 기술은 scriptjs (polyfill도 사용 가능)을 사용하고, 필요한 모든 벤더 라이브러리를 비동기 적으로로드하지만, 스크립트가로드 된 후 모든/require가 포함되도록해야합니다. 그것은로드 CDN 파일에 특히 좋다 또는 반드시 모든 사용자가 핵심 응용 프로그램에 사용되지 않는 특정 라이브러리를로드 연기 할 수있는 능력, 또는 로딩을 가진

$script.('/assets/vendor', function() { 
    var phaser = require('phaser'); 
    //rest of code 


}); 

: 같은 예를 들어,하는 index.js가 될 수있다 클라이언트 측 라우팅 후의 라이브러리.