Храните исходные исходные карты typescript после использования браузера

Ответ 1

Используя minifyify браузерный плагин, я считаю, что вы можете использовать TypeScript с Browserify и сохранить исходные карты. После компиляции файлов TypeScript вы сможете передать файл "запись" (тот, который импортирует другой через синтаксис commonjs), через браузер с помощью плагина minifyify.

var browserify = require('browserify'),
    bundler = new browserify();

bundler.add('entry.js');
bundler.plugin('minifyify', {map: 'bundle.js.map'});
bundler.bundle({debug: true}, function (err, src, map) {
  if (err) console.log(err);
  fs.writeFileSync('bundle.js', src);
  fs.writeFileSync('bundle.js.map', map);
});

Ответ 2

tsify - это плагин для браузера, который лучше и заменяет, например. typescriptifier.

npm install tsify browserify watchify

Вы используете tsify следующим образом:

browserify src/index.ts -p tsify --debug -o build/index.js

Обратите внимание, что это поддерживает браузеру --debug, никаких дополнительных трюков. Таким образом, вы также можете использовать его с помощью следующего вида:

watchify src/index.ts -p tsify --debug -o build/index.js

Ответ 3

Вот мое рабочее решение:

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

Ответ 4

Я создаю хороший шаблон для разработки с помощью typescript или просто создаю веб-проект!

Может быть, вы можете взять часть моего проекта, просто возьмите его, например.

Он включает в себя Gulp с Scss и js minify, livereload, файлы просмотра, шрифт и изображение. Я также включаю мопс, если вы хотите его использовать. Вы просто можете использовать html, если хотите.

Я также включаю Foundation (framework).

Почему typescript приятно? Вы можете использовать его для "импорта".js в свой main.js, например main.scss, который вы @import весь ваш style.scss.

https://github.com/t1gu1/front-end-typescript-template

Следуйте за мной и оставляйте комментарии к моему github! ^^

Ответ 5

Я создал пример проекта.

Вы можете запустить его с помощью $(npm bin)/gulp build --env=dev для среды разработки, и будут созданы исходные карты.

Существует gulpfile.js:

'use strict';

var path = require('path'),
    gulp = require('gulp'),
    del = require('del'),
    typescript = require('gulp-typescript'),
    sourcemaps = require('gulp-sourcemaps'),
    browserify = require('browserify'),
    source = require('vinyl-source-stream'),
    buffer = require('vinyl-buffer'),
    uglify = require('gulp-uglify'),
    gutil = require('gulp-util'),
    inject = require('gulp-inject'),
    babel = require('gulp-babel'),
    argv = require('yargs').argv;

var devEnvironment = 'dev',
    prodEnvironment = 'prod',
    environment = argv.env || prodEnvironment,
    isDevelopment = environment === devEnvironment;

var projectPath = __dirname,
    srcDir = 'src',
    srcPath = path.join(projectPath, srcDir),
    buildDir = path.join('build', environment),
    buildPath = path.join(projectPath, buildDir),
    distDir = 'dist',
    distRelativePath = path.join(buildDir, distDir),
    distPath = path.join(buildPath, distDir);

var tsSrcPath = path.join(srcPath, 'typescript'),
    tsGlob = path.join(tsSrcPath, '**', '*.ts'),
    tsBuildPath = path.join(buildPath, 'tsc');

var indexHtmlName = 'index.html',
    indexJsName = 'index.js';

var distIndexJsPath = path.join(distPath, 'index.js'),
    distIndexHtmlPath = path.join(distPath, indexHtmlName);

var tsProject = typescript.createProject('tsconfig.json');

console.log('Environment: ' + environment);

gulp.task('clean', function () {
    return del([buildPath]);
});

gulp.task('tsc', ['clean'], function () {
    var stream = gulp.src([tsGlob]);
    if (isDevelopment) {
        stream = stream
            .pipe(sourcemaps.init());
    }
    stream = stream
        .pipe(typescript(tsProject))
        .pipe(babel({
            presets: ['es2015']
        }));
    if (isDevelopment) {
        stream = stream.pipe(sourcemaps.write({sourceRoot: tsSrcPath}));
    }
    return stream.pipe(gulp.dest(tsBuildPath));
});

gulp.task('bundle', ['tsc'], function () {
    var b = browserify({
        entries: path.join(tsBuildPath, indexJsName),
        debug: isDevelopment
    });

    var stream = b.bundle()
        .pipe(source(indexJsName))
        .pipe(buffer());
    if (!isDevelopment) {
        stream = stream.pipe(uglify());
    }
    return stream
        .on('error', gutil.log)
        .pipe(gulp.dest(distPath));
});

gulp.task('build', ['bundle'], function() {
    return gulp.src(path.join(srcPath, indexHtmlName))
        .pipe(inject(gulp.src([distIndexJsPath], {read: false}), {ignorePath: distRelativePath, addRootSlash: true}))
        .pipe(gulp.dest(distPath));
});

Вы должны обратить внимание на строки:

• stream = stream.pipe(sourcemaps.write('', {sourceRoot: tsSrcPath})); - введите исходные исходные карты с помощью sourceRoot, указывая на ваш путь к источнику typescript. Встроенные карты записываются непосредственно в .js файлы, сгенерированные с помощью tsc до build/dev/tsc.
• debug: isDevelopment - в среде разработки заставьте браузеру генерировать собственные исходные карты для результирующего пакета build/dev/dist/index.js, чтобы он имел исходные карты, ссылающиеся на .js файлы из build/dev/tsc, которые, в свою очередь, имеют карты источников, ссылающиеся на .ts файлы от src/typescript.

С помощью этой настройки вы сможете просматривать и отлаживать файлы .ts в браузере:

Ответ 6

У меня возникла аналогичная проблема при попытке отладки моего приложения Angular2, работающего в Chrome, в коде Visual Studio (с использованием отладчика для расширения Chrome)

Я использую gulp в качестве моей задачи, а моя настройка такова: Typescript файлы → tsc → промежуточные es5 js → browserify (плюс uglify в сборке) → скомпилированный комплект

Моя структура каталогов выглядит следующим образом:

|- src
    |- my .ts files here
    |- main.ts - my entry file
|- dist
    |- intermediate files go here
|- web
    |- app.js - final bundle
    |- app.js.map - final bundle map
|- gulpfile.js

gulpfile.js:

var gulp = require('gulp'),
    tsc = require('gulp-typescript'),
    browserify = require('browserify'),
    uglify = require('gulp-uglify'),
    sourcemaps = require('gulp-sourcemaps'),
    source = require('vinyl-source-stream'),
    buffer = require('vinyl-buffer');

gulp.task('tsc', [], () => {
            return gulp.src(['src/**/*.ts'])
                    .pipe(sourcemaps.init())
                    .pipe(tsc({
                            "target": "es5",
                            "module": "commonjs",
                            "moduleResolution": "node",
                            "sourceMap": true,
                            "emitDecoratorMetadata": true,
                            "experimentalDecorators": true,
                            "lib": [ "es2015", "dom" ],
                            "noImplicitAny": true,
                            "suppressImplicitAnyIndexErrors": true
                    }))
                    .pipe(sourcemaps.write(null, {
                            "sourceRoot": function(file) { 
                                    let parts = file.relative.split('\\');
                                    let root = Array(parts.length + 1).join('../') + 'src';
                                    return root;
                            }
                    }))
                    .pipe(gulp.dest('dist/'));
    }); 
gulp.task('bundle', ['tsc'], () => {
    let b = browserify({
        entries: 'dist/main.js',
        debug: true,
    });

    return b.bundle()
        .pipe(source('app.js'))
        .pipe(buffer())
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(sourcemaps.write('./', {
            "sourceRoot": "../",
        }))
        .pipe(gulp.dest('web/'));
})

gulp.task('default', ['bundle']);

Объяснение/рассуждения:

По какой-то причине browserify не читает и не анализирует файлы .js.map, связанные в .js файле (через специальный комментарий в конце), но это происходит, когда исходная карта встроена в js файл. Итак, передав null вместо пути к sourcemaps, он будет вставлять его в конец сгенерированного файла .js.

В следующем выпуске я заметил, что sourcemaps автоматически не выполняет структуру каталогов (добавьте "../" в sourceRoot, когда он перейдет на следующий уровень каталога), поэтому я сделал быструю функцию, чтобы дополнить это. Имейте в виду, что он работает только в Windows - на Linux вам придется менять разделительный символ.

function(file) { 
    let parts = file.relative.split('\\'); // put '/' here on Linux
    let root = Array(parts.length + 1).join('../') + 'src';
    return root;
}

Конечно, есть способ определить правильный разделитель путей, я отлаживаю только на Windows, поэтому это не важно для моих целей.

Я надеюсь, что это поможет кому-то, потому что я провел весь воскресный утренник, отслеживая эту проблему.