基于 npm 和 typescript 构建 Angular 应用程序的指南答案

【问题标题】：A guideline to building angular apps based on npm and typescript基于 npm 和 typescript 构建 Angular 应用程序的指南
【发布时间】：2016-06-19 22:07:09
【问题描述】：

随着 angular2 的发布，我第一次真正遇到了 typescript、npm 等，我真的很欣赏它的强大功能，所以我几乎没有掌握表面。

在“开发模式”中我能找到自己的路，但最终：

问题：

我想生成一个独立的文件夹，其中包含所有必要的依赖项：js、css、html 文件，并且可以移植，不再需要 npm、转译器……。（所以基本上我想把这个生成的文件夹复制到服务器上，人们可以像往常一样访问 index.html）

问题

设置

npm（作为模块管理器和构建工具）npm as a build tool, npm as a build tool II
typescript（tsc 作为编译器）
angular2（带有分离的html、css文件），SystemJS

需要的指南

为实现规定目标而采取的步骤的（抽象）指南，即具有（所有）功能并从打字稿文件构建的文件夹，（可能是 .scss-files，...）以独立且独立的方式。

可能我正在搜索错误的关键字，但到目前为止我只找到了部分答案，我非常感谢我可以逐步完成的（教程等）列表。（目前我感到迷茫）

【问题讨论】：

从这里开始angular.io/docs/js/latest/quickstart.html。在你觉得有问题的地方问关于这个问题的问题
谢谢，但是 typescript 和 angular2 不是问题。我想我已经完全理解了 angular 文档中的快速入门和其他教程（以及如何使用 npm 安装模块，...）。问题在于从开发模式（npm 知道所有文件位置，lite-server 正在运行，......）到一个完全自洽的分发文件夹，其中包含新生成的 index.html 文件和所有需要的 css， html 和 js 文件包含在正确的位置（因此我可以将文件夹移动到任何我想要的位置）。

标签： build typescript npm angular

【解决方案1】：

我会看看systemjs builder，使用诸如gulp、gulp-inject之类的构建过程来配置index.html，并像这样构成构建：

构建打字稿文件
使用 build 文件夹中的 systemjs 捆绑 js 文件
在 build 文件夹中构建 scss 文件（必须有 gulp 插件）
复制 build 文件夹中的所有 html 文件
在 index.html 中注入依赖项

这是对您问题的原始答案，未经测试，并且是我的想法，但我希望它可以引导您找到解决方案。我在this repository 有一点东西。

【讨论】：

非常感谢。这个答案进入了我一直在寻找的方向。你知道是否有一种自动化的方式来处理最后两个步骤吗？（抱歉，我还没有权限投票给你的答案）
您可以使用 gulp 复制文件，执行类似gulp.src('app/**/*.html').pipe(gulp.dest('build/') 的操作并使用 gulp-inject 注入依赖项。