源地圖不適用於離子2

Question

我使用TypeScript與Ionic 2，但我的源地圖不起作用。我想我的TypeScript吞嚥任務有些問題，但我找不到問題。

這裏是我的gulpfile.js

var gulp = require("gulp"), 
    gulpWatch = require("gulp-watch"), 
    del = require("del"), 
    runSequence = require("run-sequence"), 
    typescript = require("gulp-typescript"), 
    argv = process.argv; 


/** 
* Ionic hooks 
* Add ':before' or ':after' to any Ionic project command name to run the specified 
* tasks before or after the command. 
*/ 
gulp.task("serve:before", ["watch"]); 
gulp.task("emulate:before", ["build"]); 
gulp.task("deploy:before", ["build"]); 
gulp.task("build:before", ["build"]); 

// we want to 'watch' when livereloading 
var shouldWatch = argv.indexOf("-l") > -1 || argv.indexOf("--livereload") > -1; 
gulp.task("run:before", [shouldWatch ? "watch" : "build"]); 

/** 
* Ionic Gulp tasks, for more information on each see 
* https://github.com/driftyco/ionic-gulp-tasks 
* 
* Using these will allow you to stay up to date if the default Ionic 2 build 
* changes, but you are of course welcome (and encouraged) to customize your 
* build however you see fit. 
*/ 
var buildBrowserify = require("ionic-gulp-browserify-es2015"); 
var buildSass = require("ionic-gulp-sass-build"); 
var copyHTML = require("ionic-gulp-html-copy"); 
var copyFonts = require("ionic-gulp-fonts-copy"); 
var copyScripts = require("ionic-gulp-scripts-copy"); 

var isRelease = argv.indexOf("--release") > -1; 

gulp.task("watch", ["clean"], function (done) { 
    runSequence(
     ["sass", "html", "fonts", "typescript", "scripts"], 
     function() { 
      gulpWatch("app/**/*.scss", function() { gulp.start("sass"); }); 
      gulpWatch("app/**/*.html", function() { gulp.start("html"); }); 
      buildBrowserify({ watch: true }).on("end", done); 
     } 
    ); 
}); 

gulp.task("typescript", function() { 
    var tsProject = typescript.createProject("tsconfig.json"); 
    var tsResult = tsProject 
     .src() 
     .pipe(typescript(tsProject)); 

    return tsResult.js.pipe(gulp.dest(function (f) { 
     return f.base; 
    })); 
}); 

gulp.task("build", ["clean"], function (done) { 
    runSequence(
     ["sass", "html", "fonts", "typescript", "scripts"], 
     function() { 
      buildBrowserify({ 
       minify: isRelease, 
       browserifyOptions: { 
        debug: !isRelease 
       }, 
       uglifyOptions: { 
        mangle: false 
       } 
      }).on("end", done); 
     } 
    ); 
}); 

gulp.task("sass", buildSass); 
gulp.task("html", copyHTML); 
gulp.task("fonts", copyFonts); 
gulp.task("scripts", copyScripts); 
gulp.task("clean", function() { 
    return del("www/build"); 
}); 

這裏是我的tsconfig：

{ 
    "compilerOptions": { 
    "target": "es6", 
    "module": "commonjs", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": true 
    } 
    "exclude": [ 
    "node_modules" 
    ] 
} 

Answer 1

於是，我找到了解決辦法，這裏是ionic.config.json怎麼看起來像

{ 
    "name": "project-name", 
    "app_id": "", 
    "v2": true, 
    "typescript": true, 
    "defaultBrowser": "chrome" 
} 

這裏是tsconfig的樣子：

{ 
    "compilerOptions": { 
    "target": "es5", 
    "module": "commonjs", 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true 
    }, 
    "filesGlob": [ 
    "**/*.ts", 
    "!node_modules/**/*" 
    ], 
    "exclude": [ 
    "node_modules", 
    "typings/main", 
    "typings/main.d.ts" 
    ], 
    "compileOnSave": false, 
    "atom": { 
    "rewriteTsconfig": false 
    } 
} 

這裏是一飲而盡文件的樣子：

var gulp = require('gulp'), 
    gulpWatch = require('gulp-watch'), 
    del = require('del'), 
    runSequence = require('run-sequence'), 
    argv = process.argv; 


/** 
* Ionic hooks 
* Add ':before' or ':after' to any Ionic project command name to run the specified 
* tasks before or after the command. 
*/ 
gulp.task('serve:before', ['watch']); 
gulp.task('emulate:before', ['build']); 
gulp.task('deploy:before', ['build']); 
gulp.task('build:before', ['build']); 

// we want to 'watch' when livereloading 
var shouldWatch = argv.indexOf('-l') > -1 || argv.indexOf('--livereload') > -1; 
gulp.task('run:before', [shouldWatch ? 'watch' : 'build']); 

/** 
* Ionic Gulp tasks, for more information on each see 
* https://github.com/driftyco/ionic-gulp-tasks 
* 
* Using these will allow you to stay up to date if the default Ionic 2 build 
* changes, but you are of course welcome (and encouraged) to customize your 
* build however you see fit. 
*/ 
var buildBrowserify = require('ionic-gulp-browserify-typescript'); 
var buildSass = require('ionic-gulp-sass-build'); 
var copyHTML = require('ionic-gulp-html-copy'); 
var copyFonts = require('ionic-gulp-fonts-copy'); 
var copyScripts = require('ionic-gulp-scripts-copy'); 

var isRelease = argv.indexOf('--release') > -1; 

gulp.task('watch', ['clean'], function(done){ 
    runSequence(
    ['sass', 'html', 'fonts', 'scripts'], 
    function(){ 
     gulpWatch('app/**/*.scss', function(){ gulp.start('sass'); }); 
     gulpWatch('app/**/*.html', function(){ gulp.start('html'); }); 
     buildBrowserify({ watch: true }).on('end', done); 
    } 
); 
}); 

gulp.task('build', ['clean'], function(done){ 
    runSequence(
    ['sass', 'html', 'fonts', 'scripts'], 
    function(){ 
     buildBrowserify({ 
     minify: isRelease, 
     browserifyOptions: { 
      debug: !isRelease 
     }, 
     uglifyOptions: { 
      mangle: false 
     } 
     }).on('end', done); 
    } 
); 
}); 

gulp.task('sass', buildSass); 
gulp.task('html', copyHTML); 
gulp.task('fonts', copyFonts); 
gulp.task('scripts', copyScripts); 
gulp.task('clean', function(){ 
    return del('www/build'); 
}); 

這裏是如何設置ionic2項目，打字稿：

ionic start project-name blank --v2 --ts