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\" "时所看到的，.js文件中生成的所有.ts文件都是在js目录中创建的。现在我可以使用文章中的build_prod命令（将其更改为js目录ofcourse）来在该目录中创建bundle和minified bundle。问题是我已经告诉我的应用程序在该目录中查找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项目生成和构建

Angular-Cli

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

Build Targets and Environment Files

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

如何捆绑角度2应用程序进行生产？

2 个答案: