javascript - 将 Angular2 TypeScript 文件和 JavaScript 文件分离到不同的文件夹中，可能是“dist”

Question

我正在使用 5 min quickstart来自 angular.io 网站，其中包含如下文件结构:

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，所以在代码编辑器中，map文件不再生成，但是js文件还是生成了。

我只想处理 ts 文件并且不想获得 js 和 js.map 文件的早午餐，我应该怎么做才能将我的所有 ts 文件放在我的常规开发文件夹中，例如 app 文件夹和所有 js和 js.map 文件到一个名为 dist 的文件夹中？

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

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

谢谢，

Answer 1

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

步骤 1

通过将 'app' 更新为 'dist/app' 来更改 system.config.js:

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

现在它看起来像这样:

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

第二步

创建 dist 文件夹。

编辑 tsconfig.json 并添加:

"outDir": "dist"

生成的tsconfig.json:

{
  "compilerOptions": {
    .
    .
    .
    .

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

运行 npm start 你应该会在 dist .js 和 .map.js 文件strong> 文件夹。

注意:查看其他答案。它们也非常有用且内容丰富。