소스 맵을 올바르게 처리하지 못했습니다.

Browserify를 사용하여 모든 Javascript 에셋을 묶습니다. 그러나 Browserify는 앱이 복잡해지면서 빌드 속도가 매우 느려지므로 Watchify로 전환하여 문제를 해결했습니다.소스 맵을 올바르게 처리하지 못했습니다.

그러나 이것은 새로운 문제를 야기했습니다. 이 동안 디버깅 목적으로 소스 맵을 출력하고 Minifyify를 사용하여 출력을 축소합니다. Watchify를 통해 처음 실행하면 원본 파일이 원본 파일에 올바르게 매핑됩니다. 그러나 파일을 수정해도 소스 맵은 원래 버전이 아닌 원본 파일의 축소판을 가리 킵니다.

나는이 사실이 Watchify가 입력 소스 맵을 가져 와서 수정 한 것이 아니지만 확실하지 않다고 가정합니다.

여기 내 코드입니다 :

var watchScripts = function() { 
    var rebundle = function() { 
     return bundler.bundle() 
      .pipe(source('app.min.js')) 
      .pipe(gulp.dest('build/scripts/')); 
    }; 
    var bundler = watchify({ 
      entries: ['./app/scripts/app.js', './app/jsx/app.jsx'], 
      extensions: ['.js', '.jsx'] 
     }) 
     .plugin('minifyify', { 
      map: 'app.js.map', 
      output: 'build/scripts/app.js.map' 
     }) 
     .transform(reactify) 
     .transform(debowerify) 
     .on('update', rebundle); 

    return rebundle(); 
};

잘못 무슨 일이야? Watchify가 두 번째 런 - 스루에서 기존 소스 맵을 고려하지 않고 있거나 실제로 다른 것입니까? 어느 쪽이든, 원본 파일이 Watchify를 통해 두 번째 및 후속 실행시 확장되지 않은 번들되지 않은 자산에 올바르게 링크되도록이 작업을 수행하려면 어떻게해야합니까?

출처

2014-05-24 user3671018

[Minifyify 저장소 문제] (https://github.com/ben-ng/minifyify/issues/70)로 추가했습니다. – Ash