Giữ nguyên bản đồ gốc bằng Browserify

Question

Giả sử tôi có một mô-đun có mã nguồn không phải là ECMA 5 (ví dụ: Coffescript hoặc Typecript hoặc bất kỳ thứ gì) và được phân phối ở dạng được biên dịch với bản đồ nguồn. Làm cách nào để đưa bản đồ nguồn này vào gói Browserify?

Ví dụ tưởng tượng một dự án với một sự phụ thuộc duy nhất:

index.js 
    node_modules 
     typescript_module 
       (main.ts) 
       dist 
        main.js 
        main.js.map 

Các "main.js.map" không được tiêu thụ bởi browserify. Tức là, bản đồ nguồn gói trình duyệt hóa thành "main.js" thay vì trì hoãn bản đồ gốc mô tả "main.ts"

Đối với hầu hết các biến đổi, có một cách để nhập bản đồ nguồn được tạo bởi bước trước đó , nhưng có cách nào để bảo vệ chúng trên các tệp đầu vào gốc, khi bản đồ nguồn đã tồn tại?

Answer 1

này dường như là một lỗi/không feauture của Browserify:

https://github.com/substack/node-browserify/issues/772

Trả lời câu hỏi của riêng tôi vì nó rất khó để theo dõi bất kỳ cuộc thảo luận về vấn đề này với google và không đề cập đến nó trong tài liệu Browserify.

Answer 2

Hãy thử như sau:

var gulp  = require("gulp"), 
    browserify = require("browserify"), 
    tsify  = require('tsify'), 
    source  = require("vinyl-source-stream"), 
    sourcemaps = require("gulp-sourcemaps"), 
    buffer  = require("vinyl-buffer"), 
    uglify  = require("gulp-uglify"), 
    header  = require("gulp-header"); 

var settings = { 
    projectName : "test" 
};  

gulp.task("bundle", function() { 

    var mainTsFilePath = "src/main.ts"; 
    var outputFolder = "bundle/src/"; 
    var outputFileName = settings.projectName + ".min.js"; 
    var pkg   = require("./package.json"); 

    var banner = [ 
    "/**", 
    " * <%= pkg.name %> v.<%= pkg.version %> - <%= pkg.description %>", 
    " * Copyright (c) 2015 <%= pkg.author %>", 
    " * <%= pkg.license %>", 
    " */", "" 
    ].join("\n"); 

    var bundler = browserify({ 
    debug: true, 
    standalone : settings.projectName 
    }); 

    // TS compiler options are in tsconfig.json file 
    return bundler.add(mainTsFilePath) 
       .plugin(tsify) 
       .bundle() 
       .pipe(source(outputFileName)) 
       .pipe(buffer()) 
       .pipe(sourcemaps.init({ loadMaps: true })) 
       .pipe(uglify()) 
       .pipe(header(banner, { pkg : pkg })) 
       .pipe(sourcemaps.write('./')) 
       .pipe(gulp.dest(outputFolder)); 
}); 

Lưu ý: thay đổi các đường dẫn để phù hợp với dự án của bạn!

Answer 3

Hãy xem sourceify.

Chỉ cần cài đặt nó:

npm i --save-dev sourceify 

... và thêm nó như là một chuyển đổi để package.json:

"browserify": { 
    "transform": [ 
    "sourceify" 
    ] 
} 

... và nó chỉ hoạt động.

Answer 4

thiết lập của tôi là như sau:

tsc --project tsconfig.script.json --outDir ~temp/ts 

Biên dịch src/script.ts-~ temp/ts/script.js và ~ temp/ts/script.js.map.

browserify ~temp/ts/script.js --debug | exorcist --root ../../ ~temp/bfy/script.js.map > ~temp/bfy/script.js 

Biên dịch ~ temp/ts/script.js-~ temp/bfy/script.js và ~ temp/bfy/script.js.map.

sorcery --input ~temp/bfy/script.js --output dist/script.js 

Đọc ~ temp/bfy/script.js; thấy ~ temp/bfy/script.js.map + ~ temp/ts/script.js.map, và cuối cùng là kết quả đầu ra dist/script.js và dist/script.js.map.

dist/script.js.bản đồ tệp tham chiếu tệp gốc src/script.ts.

Yêu cầu Browserify, Exorcist và Sorcery (và tất nhiên CoffeeScript hoặc TypeScript hoặc bất kỳ thứ gì).