我如何实际部署 Angular 2 + Typescript + systemjs 应用程序? [英] How do I actually deploy an Angular 2 + Typescript + systemjs app?

问题描述

angular.io 上有一个使用 typescript & 的快速入门教程.系统js.既然我已经运行了那个小程序，我将如何创建可部署的东西?我找不到任何关于它的信息.

There's a quickstarter tutorial over at angular.io which uses typescript & systemjs. Now that I've got that miniapp running, how would I go about creating something deployable? I couldn't find any info about it whatsoever.

我是否需要任何额外的工具或 System.config 中的任何额外设置?

Do I need any extra tools, any additional settings in System.config?

(我知道我可以使用 webpack 并创建一个 bundle.js，但我想使用 systemjs，因为它在教程中使用过)

(I know that I could use webpack & create a single bundle.js, but I'd like to use systemjs as it is used in the tutorial)

有人可以用这个设置分享他们的构建过程吗(Angular 2、TypeScript、systemjs)

Could someone share their build process with this setup (Angular 2, TypeScript, systemjs)

推荐答案

在这一层要理解的关键是，使用下面的配置，是不能直接concat编译后的JS文件的.

The key thing to understand at this level is that using the following configuration, you can't concat compiled JS files directly.

在 TypeScript 编译器配置中:

At the TypeScript compiler configuration:

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "declaration": false,
    "stripInternal": true,
    "module": "system",
    "moduleResolution": "node",
    "noEmitOnError": false,
    "rootDir": ".",
    "inlineSourceMap": true,
    "inlineSources": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules"
  ]
}

在 HTML 中

System.config({
  packages: {
    app: {
      defaultExtension: 'js',
      format: 'register'
    }
  }
});

事实上，这些 JS 文件将包含匿名模块.匿名模块是使用 System.register 但没有模块名称作为第一个参数的 JS 文件.这是 systemjs 配置为模块管理器时 typescript 编译器默认生成的内容.

As a matter of fact, these JS files will contain anonymous modules. An anonymous module is a JS file that uses System.register but without the module name as first parameter. This is what the typescript compiler generates by default when systemjs is configured as module manager.

因此，要将所有模块整合到一个 JS 文件中，您需要利用 TypeScript 编译器配置中的 outFile 属性.

So to have all your modules into a single JS file, you need to leverage the outFile property within your TypeScript compiler configuration.

您可以在 gulp 中使用以下内容:

You can use the following inside gulp to do that:

const gulp = require('gulp');
const ts = require('gulp-typescript');

var tsProject = ts.createProject('tsconfig.json', {
  typescript: require('typescript'),
  outFile: 'app.js'
});

gulp.task('tscompile', function () {
  var tsResult = gulp.src('./app/**/*.ts')
                     .pipe(ts(tsProject));

  return tsResult.js.pipe(gulp.dest('./dist'));
});

这可以与其他一些处理相结合:

This could be combined with some other processing:

• 丑化已编译的 TypeScript 文件
• 创建一个app.js文件
• 为第三方库创建一个 vendor.js 文件
• 创建一个 boot.js 文件以导入引导应用程序的模块.该文件必须包含在页面的末尾(加载所有页面时).
• 更新index.html以考虑这两个文件

• to uglify things the compiled TypeScript files
• to create an app.js file
• to create a vendor.js file for third-party libraries
• to create a boot.js file to import the module that bootstrap the application. This file must be included at the end of the page (when all the page is loaded).
• to update the index.html to take into account these two files

gulp 任务中使用了以下依赖项:

The following dependencies are used in the gulp tasks:

• gulp-concat
• gulp-html-replace
• gulp 打字稿
• 吞咽丑化

以下是一个示例，因此可以对其进行调整.

The following is a sample so it could be adapted.

• 创建app.min.js文件

gulp.task('app-bundle', function () {
  var tsProject = ts.createProject('tsconfig.json', {
    typescript: require('typescript'),
    outFile: 'app.js'
  });

  var tsResult = gulp.src('app/**/*.ts')
                   .pipe(ts(tsProject));

  return tsResult.js.pipe(concat('app.min.js'))
                .pipe(uglify())
                .pipe(gulp.dest('./dist'));
});

创建vendors.min.js文件

gulp.task('vendor-bundle', function() {
  gulp.src([
    'node_modules/es6-shim/es6-shim.min.js',
    'node_modules/systemjs/dist/system-polyfills.js',
    'node_modules/angular2/bundles/angular2-polyfills.js',
    'node_modules/systemjs/dist/system.src.js',
    'node_modules/rxjs/bundles/Rx.js',
    'node_modules/angular2/bundles/angular2.dev.js',
    'node_modules/angular2/bundles/http.dev.js'
  ])
  .pipe(concat('vendors.min.js'))
  .pipe(uglify())
  .pipe(gulp.dest('./dist'));
});

创建boot.min.js文件

gulp.task('boot-bundle', function() {
  gulp.src('config.prod.js')
    .pipe(concat('boot.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('./dist'));
 });

config.prod.js 只包含以下内容:

 System.import('boot')
    .then(null, console.error.bind(console));

更新index.html文件

gulp.task('html', function() {
  gulp.src('index.html')
    .pipe(htmlreplace({
      'vendor': 'vendors.min.js',
      'app': 'app.min.js',
      'boot': 'boot.min.js'
    }))
    .pipe(gulp.dest('dist'));
});

index.html 如下所示:

<html>
  <head>
    <!-- Some CSS -->

    <!-- build:vendor -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="node_modules/angular2/bundles/http.dev.js"></script>
    <!-- endbuild -->

    <!-- build:app -->
    <script src="config.js"></script>
    <!-- endbuild -->
  </head>

  <body>
    <my-app>Loading...</my-app>

    <!-- build:boot -->
    <!-- endbuild -->
  </body>
</html>

请注意，System.import('boot'); 必须在正文的末尾完成，以等待所有应用组件从 app.min 注册.js 文件.

Notice that the System.import('boot'); must be done at the end of the body to wait for all your app components to be registered from the app.min.js file.

我不在这里描述处理 CSS 和 HTML 缩小的方法.

I don't describe here the way to handle CSS and HTML minification.

这篇关于我如何实际部署 Angular 2 + Typescript + systemjs 应用程序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！