Bản đồ nguồn bằng cách sử dụng gulp, Browserify, reacify, UglifyJS

Question

Tôi đang cố gắng tải bản đồ nguồn cho các tệp JavaScript của tôi hoạt động với Chrome. Vấn đề với kịch bản lệnh gulp hiện tại là bản đồ nguồn (mà Browserify tạo ra) dẫn đến các phiên bản tệp được rút gọn. Ví dụ: giả sử app.jsx là tệp nhập cho Browserify và có các yêu cầu require('a') và require('b') trong đó. app.jsx được trình duyệt, phản ứng và làm mờ và được viết thành app.js như mong đợi. Tuy nhiên, tất cả các nguồn tài liệu tham khảo bản đồ trong mô-đun a và module b cũng được minified:

var gulp = require('gulp'), 
    browserify = require('browserify'), 
    watchify = require('watchify'), 
    source = require('vinyl-source-stream'), 
    buffer = require('vinyl-buffer'), 
    bundler; 

bundler = browserify({ 
    entries: '/app.jsx', 
    cache: {}, 
    packageCache: {}, 
    fullPaths: true 
}); 

bundler 
    .transform('reactify'); 
    .transform({ 
     global: true 
    }, 'uglifyify'); 

bundler = watchify(bundler); 
bundler.on('update', function() { 
    return bundler 
     .bundle() 
     .pipe(source('app.js')) 
     .pipe(buffer()) 
     .pipe(gulp.dest('/js')); 
}); 

Bất kỳ ý tưởng làm thế nào để làm việc này?

Answer 1

Có vẻ như đó là sự cố với uglifyify (https://github.com/hughsk/uglifyify/issues/16). Có vẻ như nó không biết cách tạo bản đồ nguồn.

Có một số lựa chọn thay thế:

1. làm xấu đi sau bundling với gulp-uglify plugin và các gulp-sourcemaps plugin. Thật không may, điều này hơi kém tối ưu vì nó sẽ không xóa các báo cáo đã chết require.

2. Tạo các bản dựng phát triển và phân phối riêng biệt. Sau đó, bạn có thể tạo bản đồ nguồn cho xây dựng phát triển của mình mà không có sự tối ưu hóa. Bản dựng phân phối của bạn có thể bị làm xấu đi mà không có bản đồ nguồn.