Сохранять исходную исходную карту с помощью Browserify

Предположим, что у меня есть модуль, исходный код которого не ECMA 5 (например, Coffescript или Typescript или что-то еще) и распространяется в скомпилированной форме с исходной картой. Как включить эту исходную карту в пакет Browserify?

Например, представьте проект с одной зависимостью:

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

"main.js.map" не используется браузером. То есть, исходная карта списка прокрутки браузера отображает "main.js" вместо того, чтобы откладывать исходную карту, которая описывает "main.ts"

Для большинства преобразований существует способ ввода исходных карт, сгенерированных предыдущим шагом, но есть ли способ сохранить их только в исходных входных файлах, когда исходные карты уже существуют?

Ответ 1

Это, по-видимому, ошибка /non -feauture Browserify:

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

Отвечая на мой собственный вопрос, потому что очень сложно отслеживать любое обсуждение этой проблемы с помощью google и не упоминать об этом в документах Browserify.

Ответ 2

Попробуйте следующее:

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));
});

Примечание: измените пути в соответствии с вашим проектом!

Ответ 3

Моя настройка такова:

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

Скомпилирует src/ script.ts до ~ temp/ts/script.js и ~ temp/ts/script.js.map.

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

Компилирует ~ temp/ts/ script.js в ~ temp/bfy/script.js и ~ temp/bfy/script.js.map.

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

Считывает ~ temp/bfy/ script.js; находит ~ temp/bfy/script.js.map + ~ temp/ts/script.js.map и, наконец, выводит dist/script.js и dist/script.js.map.

Файл dist/ script.js.map ссылается на исходный файл src/script.ts.

Требуется Browserify, Exorcist и Sorcery (и, конечно же, CoffeeScript или TypeScript или что-то еще).

Ответ 4

Посмотрите sourceify.

Просто установите его:

npm i --save-dev sourceify

... и добавьте его как преобразование в package.json:

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

... и он просто работает.