将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,您应该看到dist文件夹中的所有已编译.js和.map.js文件.

注意:通过其他答案.它们非常有用且信息丰富.

Answer 2

我的解决方案与上述有点不同.我从这里定义的Angular2 Quickstart种子开始:https://github.com/angular/quickstart#create-a-new-project-based-on-the-quickstart

然后只改变了以下内容:

• 添加"outDir": "../dist"到tsconfig.json
• baseDir将内部属性更改bs-config.json为"baseDir": ["dist", "src"]

然后npm run start像以前一样工作(甚至html/css和其他文件没有任何复制),但编译.js和.map文件内置dist/app并且不会污染您的src/app目录.

请注意,我还没有测试它如何影响测试.

Answer 3

我可能也迟到但我这样做了.

先做raheel shan所说的.

然后创建dist文件夹.

创建文件夹后转到该文件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并保存文件,您应该看到所有已编译的文件夹.js和dist文件夹..map.js

Answer 4

Thanx raheel shan,你的答案开了头,

正如@Adavo在评论中正确地提到的那样

不幸的是,我的html/css文件不在dist文件夹中.怎么做才能复制dist文件夹中的所有html/css？

这个问题的答案是*在所有.ts文件中使用'/'(来自根目录)提供HTML/CSS文件的完整路径,主要是@Component的"templateURL"属性

经过很长一段时间 - 我得到了它 - 没有使用Gulp :) Yipppeee

Answer 5

所以,要解决这个问题:

不幸的是,我的html/css文件不在dist文件夹中.怎么做才能复制dist文件夹中的所有html/css？

执行@raheel shan和@Lirianer的答案中的步骤....然后你就可以用它来完成它.

我已经使用npm脚本为我的目的解决了这个问题.我的package.json文件中的scripts部分如下所示.解决方案是与服务器同时运行onchnage(npm包 - npm install --save onchange)tsc.然后使用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上的用户,您可以rsync通过cwRsyncCygwin等打包解决方案.

Answer 6

不幸的是,我的html/css文件不在dist文件夹中.怎么做才能复制dist文件夹中的所有html/css？

Angular 2中的相对路径并不那么简单,因为框架希望根据Angular 2文章中的组件相对路径加载文件(CommonJs,SystemJs等等)的灵活性.

正如文章解释的那样,module.id当与CommonJs一起使用时(检查你的tsconfig.json)包含模块的绝对根,它可以用来构造一个相对路径.

所以一个更好的选择可能是将css/html文件与ts文件一起保存并配置你的组件如下,假设你只是将你的构建文件放在一个名为dist的单独文件夹中.这样你的css和html文件将被加载通过将派生的构建路径转换为包含它们的源代码来使用相对路径没有问题 - 基本上将/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',
...
});

Answer 7

我试图@WillyC的建议和工作就像一个魅力,只是注意,您必须将添加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删除,请注意脚本命令上的--delete标志rsyncwatchassets