Question

我需要什么

在我的TypeScript代码中，我需要能够导入使用CommonJS模块系统的第三方库。
将打字稿编译成javascript
在浏览器中加载javascript并调试原始打字稿源文件。

我做了什么

在tsconfig.json中我设置了

"compilerOptions": {
   "target": "es5",
   "module": "commonjs",
   "moduleResolution": "node"
}

我创建了gulp任务，将打字稿文件编译到build/scripts/commonjs文件夹中，包括源地图，然后是另一个使用browserify捆绑来自build/scripts/commonjs的文件和源地图的任务：

var gulp = require('gulp'),
    browserify = require('gulp-browserify'),
    sourcemaps = require('gulp-sourcemaps'),
    typescript = require('gulp-typescript');

gulp.task('compile-typescript', function(){

    var tsProject = typescript.createProject('tsconfig.json');
    var tsResult = tsProject.src() // instead of gulp.src(...)
            .pipe(sourcemaps.init())
            .pipe(typescript(tsProject));

    return tsResult.js
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('build/scripts/commonjs'));

});

gulp.task("browserify", function () {
    return gulp.src('build/scripts/commonjs/app.js')
        .pipe(browserify({
            debug : true, //this generates source map
    }))
    .pipe(gulp.dest('build/scripts/'));
});

`compile-typescript＆＃39;的输出是：

build
   scripts
      commonjs
         -app.js
         -app.js.map
         -testmodule.map
         -testmodule.js.map

来自browserify：

build
   scripts
      -app.js //this contains source map inside

我在html中包含了捆绑包（＆＃39; build / scripts / app.js＆＃39;）并且它在浏览器中工作，但是调试调试仅适用于已编译的javascript文件。

是否可以先编译打字稿然后捆绑它，同时仍能调试原始资源

在浏览器中使用commonjs模块调试TypeScript

0 个答案: