) (필요로 할 수 없습니다 나는이 프로젝트 구조가

Question

이미 "필요"모듈 내부에서 :

myApp 
├── gulpfile.js 
├── package.json 
└── source 
   └── scripts 
      ├── modules 
      │ └── utils.js 
      ├── background.js 
      └── data.json 

내 browserify 작업 :

gulp.task('browserify', function() { 
    return gulp.src(['./source/scripts/**/*.js']) 
    .pipe($.browserify({ 
     debug: true,//for source maps 
     standalone: pkg['export-symbol'] 
    })) 
    .on('error', function(err){ 
     console.log(err.message); 
     this.emit('end'); 
    }) 
    .pipe(gulp.dest('./build/scripts/')); 
}); 

내 샘플 utils.js :

const data = require('../data.json'); 

const utils = (function() { 
    const output = function() { 
    console.log(data); 
    }; 

    return { 
    output: output, 
    }; 
}()); 

module.exports = utils; 

을

현재 디렉토리 구조로 빌드하려고하면이 오류가 발생합니다 :

module "../data.json" not found from "/dev/myApp/source/scripts/fake_4d8cf8a4.js"

내가 즉 modules 디렉토리 과 scripts 디렉토리 내부, 내부 data.json을 세우면 나는 단지 그것을 구축 할 수 있습니다. 파일을 복제하는 경우에만 작동합니다 :

myApp 
├── gulpfile.js 
├── package.json 
└── source 
   └── scripts 
      ├── modules 
      │ ├── utils.js 
      │ └── data.json 
      ├── background.js 
      └── data.json 

분명히 이건 ... 내가 뭘 잘못하고 있니? 나는 당신이 꿀꺽 플러그인, 아마 gulp-browserify을 사용하는 $.browerify에 파일을 전달하는 gulp.src의 사용에서 추론하고있어

Answer 1

감사합니다. 일반적으로 권장하지 않음 Gulp에서 Browserify를 호출하기위한 플러그인을 사용하는 것. 권장되는 방법은 Browserify를 직접 호출하는 것입니다. 실제로, 꿀꺽의 blacklist of plugins 상태 :

"gulp-browserify": "use the browserify module directly", 

나는 당신의 디렉토리 구조를 복제하고 내용 (data.json, background.js)를 제공하지 않았고 실제로, 나는 당신이 얻을 같은 오류가있는 파일에 대한 몇 가지 합리적인 값을 넣었습니다 Gulp 코드를 실행하려고하면 표시됩니다. 그러나 Browserify를 직접 호출하면 아무런 오류가 발생하지 않습니다.

const gulp = require("gulp"); 
const browserify = require("browserify"); 
const source = require('vinyl-source-stream'); 

gulp.task('browserify', function() { 
    return browserify({ 
    entries: ["./source/scripts/background.js", 
       "./source/scripts/modules/utils.js"], 
    debug: true,//for source maps 
    standalone: "foo", 
    }) 
    .bundle() 
    .pipe(source('bundle.js')) // This sets the name of the output file. 
    .pipe(gulp.dest('./build/scripts/')); 
}); 

당신은 Browserify가 번들로 항목으로 모든 .js 파일을한다는 것을 의미 코드에 gulp.src(['./source/scripts/**/*.js'])를 사용 : 여기 내가 가지고있는 코드입니다. 그래서 위의 코드에서 플러그인과 함께 사용하는 패턴을 수동으로 복제하는 두 개의 항목을 넣었습니다. 그러나 Browserify가이 설정에서 오류를 생성하지 않지만 이 아닌 것으로 판단됩니다. 실제로에 여러 항목이 있어야합니다. 일반적으로 Browserify에 하나의 진입 점을 전달하고 require 호출을 추적하여 가져올 항목을 찾습니다.