angular - 将 Angular2 HTML 和 TypeScript 构建到单个文件

Question

我正在使用 Angular2 和 TypeScript 构建一个应用程序(大型)。它将需要分成许多项目，每个项目将有许多组件，每个组件都有一个 .html View 、.css 样式表和 .ts逻辑/类。

我希望每个项目都编译成单个 *.js 文件，并复制到将在 IIS 中运行的主机网站。这类似于使用 .xaml 文件构建 WPF 或 Silverlight 应用程序的方式，所有这些文件都被编译到 .dll 中。

我浏览了 Web 并能够使用 -- 将 .ts 文件构建为单个 .js 文件 - outFile 选项。但这对 .html 文件或 css 没有帮助。

任何帮助将不胜感激，即使是说我所要求的是不可能的:-)

斯蒂芬

Answer 1

如果您使用默认的 Angular2 tsconfig.json 和 SystemJS loader :

"module": "system",
"moduleResolution": "node",
...

您可以将所有繁重的工作留给SystemJS Build Tool .这就是我在项目中使用 gulp 执行此操作的示例:

1. 编译 *.ts 和内联 *.html 模板

   我正在使用 gulp-angular-embed-templates立即将所有 templateUrl 内联到 template 字符串中(此插件适用于 Angular 1.* 和 Angular 2)。

   var tsc = require('gulp-typescript');
   var tsProject = tsc.createProject('tsconfig.json');
   var embedTemplates = require('gulp-angular-embed-templates');
   
   gulp.task('app.build', function () {
       var tsResult = gulp.src('app/src/**/*.ts', {base: './app/src'})
           .pipe(embedTemplates()) // inline templates
           .pipe(tsc(tsProject));
   
       return tsResult.js
           .pipe(gulp.dest('build/js'));
   });
   

   这会产生很多anonymous System.register modules在 build/js 目录中。所有这些都已经内联了它们的 templateUrl。

2. 将所有内容捆绑到一个 .js 文件中

   我使用 SystemJS Build Tool为此，因为我认为它比使用例如 webpack 更容易。因此，我有另一个 gulp 任务来自动化这个过程:

   var SystemBuilder = require('systemjs-builder');
   
   gulp.task('app.systemjs.bundle', function () {
       var builder = new SystemBuilder('build/js, {
           paths: {
               '*': '*.js'
           },
           meta: {
               'angular2/*': {
                   build: false
               },
               'rxjs/*': {
                   build: false
               }
           }
       });
   
       return builder.bundle('main', 'build/js/app.bundle.js');
   });
   

   构建器采用与 SystemJS 相同的选项所以检查他们的Config API .

   调用 builder.bundle('main', ...) 搜索 main.js(这是我使用 Angular 的 bootstrap 的初始脚本> 调用。这是您可以看到的同一个文件 in the 5 min quickstart ) 因为我将 .js 附加到构建器搜索的所有路径。这是因为在 TS 中导入模块时，通常会调用:

   import {ModalResultComponent} from './modal-result.component';
   

   它被编译为 ./modal-result.component 依赖项，它不关心文件扩展名。这就是为什么我必须将 *.js 添加到所有路径以帮助构建器找到所有已编译的 JavaScript 文件。

   meta 选项只是告诉构建器忽略我不想捆绑的依赖项。这是 Angular2 本身和 rxjs 库，因为我在 main.ts 中包含了 import 'rxjs/add/operator/map'。

   这会生成一个 app.bundle.js 文件，其中所有模块都使用 System.register 注册为命名模块。 .

3. 使用我们的 app.bundle.js

   最后一部分是小菜一碟。我们只导入默认的 Angular2 东西然后使用 bundle option告诉 SystemJS 我们所有的依赖项在哪里。

   <script>
   System.config({
       packages: {
           '/web': {
               format: 'register',
               defaultExtension: 'js'
           }
       },
       bundles: {
           '/web/app.bundle': ['main']
       }
   });
   System.import('main').then(null, console.error.bind(console));
   </script>
   

   当我们调用 System.import('main') 时，它实际上首先下载 /web/app.bundle.js 并在包中注册所有模块，然后它使用我们的 Angular2 Bootstrap 导入模块 main。

   就是这样!

您实际上根本不需要使用 gulp 并使用纯 node 脚本完成所有操作。

使用 cssnano 之类的东西可以很容易地捆绑 CSS 文件我相信您到处都能找到有关如何使用它的教程。

我敢肯定还有其他方法可以解决同样的问题。 Angular2 旨在不限制您只能使用一种技术。但是，在我看来，使用 SystemJS 似乎是最简单的方法，因为它默认使用与 Angular2 相同的模块系统。

我确定您也可以使用例如 commonjs 格式，但这需要您还为 require() 加载器使用一些 polyfill，但我没有试过了。我相信UMD可能也值得一试。