将Angular2 TypeScript文件和JavaScript文件分离到不同的文件夹中，也许是“ dist”

Question

我正在使用angular.io网站上的5分钟快速入门，该网站包含这样的文件结构：

angular2-quickstart
 app
   app.component.ts
   boot.ts
 index.html
 license.md
 package.json
 tsconfig.json

tsconfig.json是这样的代码块：

{
  "compilerOptions": {
    "target": "ES5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules"
  ]
}

还有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.0",
    "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.1",
    "typescript": "^1.7.3"
  }
}

我将sourceMap从true更改为false，因此在代码编辑器中，不会再次生成映射文件，但仍会生成js文件。

我只想处理ts文件，而不想获取js和js.map文件的早午餐，应该怎么做才能将所有ts文件放入我的常规开发文件夹中，例如app文件夹以及所有js和js。将文件映射到名为dist的文件夹中？

一个很好的例子可能是angular2-webpack-
quickstart
。但是我不知道他们是怎么做到的？

任何建议如何做到这一点，当然都不是手动的。

谢谢，

Answer 1

可能要晚了，但这是一个两步解决方案。

第1步

通过更新为来更改 system.config.js ：'app'``'dist/app'

var  map = {
    'app':                        'app', // 'dist/app',
    .
    .
    .
};

现在看起来像这样：

var  map = {
    'app':                        'dist/app', // 'dist/app',
    .
    .
    .
};

第2步

创建 dist 文件夹。

编辑 tsconfig.json 并添加：

"outDir": "dist"

结果tsconfig.json：

{
  "compilerOptions": {
    .
    .
    .
    .

    "outDir": "dist" // Pay attention here
  },
  "exclude": [
    .
    .
    .
  ]
}

运行npm start，你应该看到所有的编译.js和.map.js在文件 DIST 文件夹。

注意 ：进行其他回答。它们也非常有用和有用。