将Angular2的TypeScript文件和JavaScript文件分离到不同的文件夹中，可能是'dist'
我正在使用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，因此在代码编辑器中，map文件不会再次生成，但js文件仍然生成。
我只想在ts文件上工作，不想得到js和js.map文件的早午餐，我应该怎么做才能把所有的ts文件放在我的常规开发floder像app文件夹和所有的js和js。将文件映射到名为dist？的文件夹中
一个很好的例子可能是angular2-webpack-quickstart 。 但我没有弄清楚他们是怎么做到的？
任何build议如何做，当然不是手动。
谢谢，
可能晚了，但这是一个两步解决scheme。
步骤1
通过将'app'更新为'dist/app'来更改system.config.js ：
var map = { 'app': 'app', // 'dist/app', . . . };
现在看起来像这样：
var map = { 'app': 'dist/app', // 'dist/app', . . . };
第2步
创builddist文件夹。
编辑tsconfig.json并添加：
"outDir": "dist"
生成的tsconfig.json ：
{ "compilerOptions": { . . . . "outDir": "dist" // Pay attention here }, "exclude": [ . . . ] }
运行npm start ，你应该看到dist文件夹中的所有已编译的.js和.map.js文件。
注意 ：通过其他答案。 它们也非常有用和信息丰富。
我的解决scheme与上述有点不同。 我从这里定义的Angular2快速入门种子开始： https ： //github.com/angular/quickstart#create-a-new-project-based-on-the-quickstart
然后只改变了以下内容：
- 添加
"outDir": "../dist"到tsconfig.json - 将
bs-config.json的baseDir属性更改为"baseDir": ["dist", "src"]
然后npm run start像以前一样工作（即使html / css和其他文件没有任何复制），但编译的.js和.map文件内置dist/app ，不会污染您的src/app目录。
请注意，我还没有testing这如何影响testing。
我可能也迟到了，但我做到了。
首先做什么raheel山说 。
然后创builddist文件夹。
创build文件夹后，转到文件tsconfig.json并添加这个：
"outDir": "dist"
生成的tsconfig.json
{ "compilerOptions": { "target": "es5", "module": "commonjs", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": false, "outDir": "dist" }, "exclude": [ "node_modules", "typings/main", "typings/main.d.ts" ] }
如果你现在运行npm start并保存一个文件，你应该可以在dist文件夹中看到所有已编译的.js和.map.js文件。
Thanx raheel shan，你的回答给了一个开始，
正如@Adavo在评论中正确地问上面
不幸的是，我的html / css文件不在dist文件夹中。 如何做，以复制所有的HTML / CSS文件夹中的dist？
这个问题的答案是*在所有.ts文件中使用'/'（从根目录）提供HTML / CSS文件的完整path，主要在@Component的“templateURL”属性中
经过很多时间 – 我弄明白了 – 没有使用Gulp 🙂 Yipppeee
不幸的是，我的html / css文件不在dist文件夹中。 如何做，以复制所有的HTML / CSS文件夹中的dist？
Angular 2中的相对path并不是那么直截了当，因为框架想要根据Angular 2文章中的组件相对path来加载文件（CommonJs，SystemJs，..等等）。
正如本文解释的module.id与CommonJs module.id使用时（检查你的tsconfig.json）包含模块的绝对根，它可以用来构造一个相对path。
所以一个更好的select可能是离开的CSS文件的CSS / HTML文件和像下面configuration你的组件，假设你只有你的构build文件在一个单独的文件夹名为dist ..这样你的CSS和HTML文件将加载通过将派生的构buildpath转换为包含它们的源path，使用相对path没有任何问题 – 实际上是将/dist/重命名为/src/ ;）
@Component({ moduleId: module.id.replace("/dist/", "/"), templateUrl: 'relative-path-to-template/component.html', ... });
如果你有独立的源文件夹和内部版本，你可以这样做：
@Component({ moduleId: module.id.replace("/dist/", "/src/"), templateUrl: 'relative-path-to-template/component.html', ... });
所以，要解决这个问题：
不幸的是，我的html / css文件不在dist文件夹中。 如何做，以复制所有的HTML / CSS文件夹中的dist？
在@raheel shan和@lirianer的答案中都要采取步骤。 那么你可以用这个完成它。
我已经使用npm脚本解决了这个问题。 下面是我的package.json文件中的脚本部分。 解决的办法是与onchnage和服务器同时运行onchnage （一个npm包 – npm install --save onchange ）。 然后使用rsync来复制你想要移动的资产：
"scripts": { "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" \"npm run watchassets\" ", "lite": "lite-server", "postinstall": "typings install", "tsc": "tsc", "tsc:w": "tsc -w", "typings": "typings", "movesssets": "rsync -a --include='*.css' --include='*.html' --include='*/' --exclude='*' ./app/ ./build/", "watchassets": "onchange 'app/**/*.css' 'app/**/*.html' -e 'build/*' -v -- rsync -a --include='*.css' --include='*.html' --include='*/' --exclude='*' ./app/ ./build/" }
对于那些在Windows上的人，你可以通过Cygwin获得rsync ，或者使用cwRsync等打包解决scheme。
我尝试了@WillyC的build议，像一个魅力工作，只需要注意，你必须添加onchange依赖到你的package.json文件。 我添加了一些额外的脚本，在第一次运行时就有了一个干净的设置，同时也删除了剩余的html / css文件（如果TSC可以完成的话，那将会很好）
无论如何，这是我的package.json文件的一部分
{ ... "scripts": { "start": "npm run cleandist && npm run moveassets && tsc && concurrently \"tsc -w\" \"lite-server\" \"npm run watchassets\" ", ... "cleandist": "rm -rf dist/*", "moveassets": "rsync -a --include='*.css' --include='*.html' --include='*/' --exclude='*' ./app/ ./dist/", "watchassets": "onchange 'app/**/*.css' 'app/**/*.html' -e 'dist/*' -v -- rsync -a --include='*.css' --include='*.html' --include='*/' --exclude='*' --delete ./app/ ./dist/" }, ... "devDependencies": { ... "onchange":"^3.0.2" } }
对于rsync删除，请注意watchassets脚本的rsync命令上的--delete标志
Angular2的TypeScript文件和JavaScript文件放到不同的文件夹中
这里是我为Angular 2configuration的最新版本V2.1.1，它工作得很好！
tsconfig.json
{ "compilerOptions": { "target": "es5", "module": "commonjs", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": false, "outDir": "./app/dist" } }
受@Nagyl启发，我开发了我自己的方式，我相信这是值得分享的：
1）安装cpx
npm install cpx
2）更新bs-config.json并将baseDir从“src”更改为“dist”
"baseDir":"dist"
3）更新tsconfig.json并将outDir添加到compilerOptions的末尾：
"outDir": "../dist"
4）更新package.json：4.1）添加一个新的命令到脚本结束：
"cpx": "cpx \"src/**/*.{html,css,js,png,jpg}\" dist --watch"
4.2）修改“开始”行以包含“cpx”命令：
"start": "concurrently \"npm run build:watch\" \"npm run cpx\" \"npm run serve\"",
您可以在浏览器中传输.ts文件，就像plunker正在做的2 ts模板一样。
只需启动编辑器，select新的，然后AngularJS和2.0.x（TS）选项（在底部）。 但使用webpack（或任何其他捆绑工具）的重点是在本地传输文件。
我尝试了上面提到的几个选项，最后，这就是我所说的： Peep – Visual Studio Code的扩展 。
如何安装：
- 查看 – >扩展
- 窥视
- 安装
- 刷新
- 查看 – >命令托盘
- 窥视无
- 根据需要修改.vscode / settings.json（如下所示）
–
{ "typescript.check.workspaceVersion": false, "files.exclude": { "**/*.js": true, "**/*.js.map": true, "node_modules/": true, "dist/": true, "lib/": true } }
01/25/2017 – 更新：开箱即用，照顾这一点。 和安装工程，现在。
我尝试了这里列出的解决scheme。 他们很好，但对我来说并不理想。 我想要一个简单的解决scheme 我不想在所有组件文件中硬编码path信息。 我不想安装更多的npm包来照顾这个。
所以我想出了一个最简单的select。 这不是对这个问题的直接回答，但对我来说效果很好。
我只是调整我的工作区设置，以便/app下的js文件不显示。 他们仍然在那里。 他们只是从我的工作区隐藏。 对我来说，这就够了。
我正在使用Sublime Text，所以这里是我的项目设置：
"file_exclude_patterns": ["app/*.js"]
我相信很多其他编辑有类似的function。
更新：
只需使用Angular CLI。 一切都自动照顾。
对于使用快速入门文件的Angular 4来说，我所要做的只是以下内容（前面提到的答案的组合，但略有不同的值）：
- 在tsconfig.json（add）中：
"outDir": "../dist" - 在bs-config.json（更改）中：
"baseDir": ["dist", "src"], - 在bs-config.e2e.json（更改）中：
"baseDir": ["dist", "src"],
没有改变systemjs.config.js。
我试了@raheel的build议，它为我工作。 我根据自己的需要修改了结构。
我正在使用以下结构
为了得到这个，我只修改了两个文件1. systemjs.config.js和2.tsconfig.json
在systemjs.config.js我改变了
map: { // previously it was app: 'app', app: 'app/js', ...
和在tsconfig.json我必须添加"outDir": "app/js"
我正在使用Angular 2.4。 我需要一个额外的步骤，使其工作。 这是更新systemJs引用index.html中的main.js文件，它来自：
System.import（'main.js'）。catch（function（err）{console.error（err）;}）;
至：
System.import（'dist / main.js'）。catch（function（err）{console.error（err）;}）;
加上什么raheel山说的顶部。 我不得不在index.html中进行额外的更改以反映现在导入正确的JavaScript文件。
这是我的总结。
tsconfig.json
之前
{ "compilerOptions": { "target": "es5", "module": "commonjs", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "lib": [ "es2015", "dom" ], "noImplicitAny": true, "suppressImplicitAnyIndexErrors": true } }
后：
{ "compilerOptions": { "target": "es5", "module": "commonjs", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "lib": [ "es2015", "dom" ], "noImplicitAny": true, "suppressImplicitAnyIndexErrors": true, "outDir": "dist" }, "exclude": [ "node_modules", "typings/main", "typings/main.d.ts" ] }
systemjs.config.js
之前：
'app': 'app',
后：
'app': 'dist/app', //'app
的index.html
之前：
System.import('main.js').catch(function(err){ console.error(err); });
后：
System.import('dist/main.js').catch(function(err){ console.error(err); });
