Question

我的项目是Laravel网站，我将公用文件夹重命名为＆＃34; html＆＃34;。所以我的公共文件看起来像：

html
--js
----main.ts

并且html在技术上是用于调试目的的站点的根目录。

使用browserify，我现在为bundle.js生成了一些源地图，其中包含main.ts的路径。问题是他们指向完整的路径：

"html/js/main.ts"

通常，我可以在html文件夹中运行配置并捕获断点。

http://myapp.app:8000 ->> project>html

但这并没有达到断点，因为html文件夹在此设置中并不存在。有什么奇怪的是我可以在Chrome工具中设置断点并且它有效。如何设置Webstorm以便它会在html文件夹中找到断点？

编辑：

我使用以下gist作为我的源地图。

/**
 * Browserify Typescript with sourcemaps that Webstorm can use.
 * The other secret ingredient is to map the source directory to the
 * remote directory through Webstorm's "Edit Configurations" dialog.
 */
'use strict';

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

var config = {
    client: {
        outDir: './public/scripts',
        out: 'app.js',
        options: {
            browserify: {
                entries: './src/client/main.ts',
                extensions: ['.ts'],
                debug: true
            },
            tsify: {
                target: 'ES5',
                removeComments: true
            }
        }
    }
};

gulp.task('client', function () {
    return browserify(config.client.options.browserify)
        .plugin(tsify, config.client.options.tsify)
        .bundle()
        .on('error', function (err) {
            console.log(err.message);
        })
        .pipe(source(config.client.out))
        .pipe(buffer())
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(sourcemaps.write('./', {includeContent: false, sourceRoot: '/scripts'}))
        .pipe(gulp.dest(config.client.outDir));
});

Answer 1

我在Webstorm中修复了它。运行配置中html文件夹的正确远程URL是：

http://myapp.app:8000/js/html

非常奇怪，但Webstorm认为/ js / html是一个文件夹，源文件在那里。

编辑1 ：让我编辑这个答案。事实证明，上面的代码片段没有给我所有的源地图。检查映射文件时，源被列为js个文件，而不是ts个文件，这意味着调试器不会捕获断点。

这是工作gulp任务，它监视任何Typescript文件的更改（只要它是main.ts的依赖项并触发browserify和新的源图。它需要tsify插件。

'use strict';

var watchify = require('watchify');
var browserify = require('browserify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var gutil = require('gulp-util');
var sourcemaps = require('gulp-sourcemaps');
var assign = require('lodash.assign');

// add custom browserify options here
var customOpts = {
    entries: ['./html/js/main.ts'],
    debug: true
};
var opts = assign({}, watchify.args, customOpts);
var b = watchify(browserify(opts));
gulp.task('bundle', bundle); // so you can run `gulp js` to build the file
b.on('update', bundle); // on any dep update, runs the bundler
b.on('log', gutil.log); // output build logs to terminal
b.plugin('tsify')

function bundle() {
    return b.bundle()
        // log errors if they happen
        .on('error', gutil.log.bind(gutil, 'Browserify Error'))
        .pipe(source('bundle.js'))
        // optional, remove if you don't need to buffer file contents
        .pipe(buffer())
        // optional, remove if you dont want sourcemaps
        .pipe(sourcemaps.init({loadMaps: true})) // loads map from browserify file
        // Add transformation tasks to the pipeline here.
        .pipe(sourcemaps.write({includeContent: false, sourceRoot: './'})) // writes .map file
        .pipe(gulp.dest('./html/js'));
}

使用Browserify和Typescript中的源映射进行Webstorm调试

1 个答案: