TypeScript tsconfig Output files in certain folder

问题:

I am trying to have 3 folders (ts,js,map)... 1 for TS, 1 for compiled js, and 1 for the map files. Is this not possible? I have seen a couple of questions on here, but didn't find the answer. I am using Webstorm, Npm, and running through the Angular2 example. I have the ts file in one folder and all the output in another, but can't get the map to go into it's own. Worst case senior at least can I get the maps to be one file. I've tried inlineSourceMap, inlineSources, sourceRoot, and mapRoot = all failed.

tsconfig.json (link to schema):

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors":true,
    "sourceMap": true,
    ------ Tried a combination of...
    "inlineSourceMap": true,
    "inlineSources": true,
    "mapRoot": "app/map",
    "sourceRoot": "app/map",
    ------
    "outDir": "app/js"
  },
  "exclude": [
    "node_modules",
    "bower_components"
  ]

package.json

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.2",
    "systemjs": "0.19.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.10"
  },
  "devDependencies": {
    "concurrently": "^1.0.0",
    "lite-server": "^1.3.4",
    "typescript": "^1.7.5"
  },
  "main": "",
  "author": "",
  "description": ""
}

回答1:

You are on the right track. Use the "outDir" in your tsconfig.json to set the out location of you want the transpiled.js to go, then use a task such as a gulp, grunt or custom -- to copy the map.js files to the desired location.

The sourceRoot and sourceMap don't do what you think they do. They just allow you to specify a path within the sourceMap where your browser should expect to find the map and source ts. They don't alter where they are output.

example gulpfile.js

var gulp = require('gulp');
var del = require('del');

gulp.task('move' => () {
    gulp.src(['app/js/**/*.map.js'])
        .pipe(del())
        .pile(dest('app/map'))
})

Something like that should work.