在我的情况下，如何捆绑Angle 2应用程序进行生产？

Question

我读了这篇文章-http://blog.mgechev.com/2016/06/26/tree-shaking-angular2-production-build-rollup-javascript/，并且我想将第一步Simple build with minification. 进入我的应用程序。 到目前为止，我已经像这样配置了它：

system.config.js

(function (global) {
  System.config({
    paths: {
      'npm:': 'node_modules/'
    },
    map: {
      app: 'js',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
      '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
      '@ng-bootstrap/ng-bootstrap': 'node_modules/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js'       
    },
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'                
      },
      rxjs: {
        defaultExtension: 'js'
      },
      primeng: {
          defaultExtension: 'js'
      }      
    }
  });
})(this);

的index.html

<script src="systemjs.config.js"></script>    
<script src="app.config.js"></script>
<script>
  System.import('app').then(
    function(module) {
      return module.start(appConfig, messagePropsData);
    }).catch(function(err){ console.error(err); });
</script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>    
  </body>

tsconfig.json

{
    "compilerOptions": {
        "target": "ES5",
        "module": "CommonJS",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false,
        "inlineSourceMap": false,
        "inlineSources": false,
        "outDir": "js"
    },
    "exclude": [
        "node_modules",
        "typings/main",
        "typings/main.d.ts"
    ],
    "compileOnSave": true
}

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
import { ValueProvider  } from '@angular/core';
import { AppModule } from './app.module';
import { AppConfig, APP_CONFIG, CONFIG_PROVIDER } from './app.config';
export function start(config: any) {
  CONFIG_PROVIDER.provider = { provide:APP_CONFIG, useValue: config }
  return platformBrowserDynamic([CONFIG_PROVIDER.provider]).bootstrapModule(AppModule);
}

如您所见，当我使用此命令"start": "tsc && concurrently \\"tsc -w\\" \\"lite-server\\" "我从.ts文件生成的所有.js文件都在js目录中创建。 现在，我可以使用本文中的build_prod命令（将其更改为build_prod js目录）在该目录中创建捆绑包和缩小的捆绑包。 问题是我已经告诉我的应用在该目录中查找main.js文件，而且我也不想命名捆绑的文件main.js （ app.bundle.minified.js更好）（该命令将首先从js目录中删除所有其他文件，并仅放置捆绑的文件），因此如何告诉我的应用程序启动时应先查找app.bundle.minified.js文件，然后查找app.bundle.js文件，然后是main.js

基本上，我不希望该应用程序从捆绑的缩小版本开始，如果找不到该版本，则应从main.js文件开始。 我应该在system.config.js和index.html哪些更改。 我怎样才能做到这一点？

Answer 1

我认为，您可以使用angular-cli进行angular2项目的生成和构建

角-CLI

ng-build可用于针对不同环境构建项目。

建立目标和环境文件

Answer 2

我怎样才能告诉我的应用程序，要启动它，应该先寻找app.bundle.minified.js文件，然后寻找app.bundle.js文件，然后寻找main.js。

我认为，答案非常简单。

当您使用Typescript及其它任何东西制作应用程序时，它将其转换为js。 因此，您可以在页面顶部

  <script src="app.bundle.minified.min.js"></script>
  <script src="app.bundle.js"></script>
  <script src="main.js"></script>

但是，这些文件会根据您的源代码自动调用。 所以，我想您需要先确保您的应用运行正常，然后再运行ng build

在我的情况下，如何捆绑Angle 2应用程序进行生产？

问题描述

2 个解决方案

解决方案1
3 2017-01-25 12:37:43

解决方案2
2 2017-01-29 12:22:31

在我的情况下，如何捆绑Angle 2应用程序进行生产？

问题描述

2 个解决方案

解决方案1 3 2017-01-25 12:37:43

解决方案2 2 2017-01-29 12:22:31

解决方案1
3 2017-01-25 12:37:43

解决方案2
2 2017-01-29 12:22:31