Angular 2 TypeScript：与 JSPM 捆绑时的 enableProdMode答案

【问题标题】：Angular 2 TypeScript: enableProdMode when bundling with JSPMAngular 2 TypeScript：与 JSPM 捆绑时的 enableProdMode
【发布时间】：2016-05-28 20:37:34
【问题描述】：

我正在构建一个 Angular 2 应用程序并将其与 SystemJS/JSPM 捆绑在一起。

在开发过程中，我将应用程序导入index.html：

<script src="jspm_packages/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="systemjs.importapp.js"></script>

我捆绑：

jspm bundle-sfx app assets/js/myapp.sfx.min.js --minify --no-mangle --skip-source-maps

并且拥有index.html 的版本

<script src="assets/js/myapp.sfx.min.js" defer></script>

替换上面三个。

我的main.ts 起点是这样的：

// CORE IMPORTS
import 'es6-shim';
import 'reflect-metadata';
import 'zone.js';
import 'zone.js/dist/zone';
import 'zone.js/dist/long-stack-trace-zone';
import 'rxjs';

// ADD ALL OPERATORS TO OBSERVABLES
import 'rxjs/Rx';

// APP INITIALISATION
import {bootstrap} from 'angular2/platform/browser';
import {enableProdMode} from 'angular2/core';
import {AppComponent} from './app.component';
import {ROUTER_PROVIDERS} from 'angular2/router';

bootstrap(AppComponent, [
  ROUTER_PROVIDERS
]);

我想做的是仅在与jspm bundle-sfx 捆绑时调用enableProdMode()。

最好的方法是什么？

【问题讨论】：

标签： typescript angular production-environment systemjs jspm

【解决方案1】：

我找到了一个解决方案：制作一个外部 JSON 文件，例如environment.json，与我的应用程序的main.ts 入口点在同一目录中，包含：

{
  'env': 'dev'
}

然后在main.ts:

import _environment from './environment.json!json';

if (_environment.env === 'dev') {
  console.log('Running in dev mode.')
}

if (_environment.env === 'prod') {
  console.log('Running in production mode.');
  enableProdMode();
}

这需要安装 SystemJS JSON 插件：

jspm install json

然后，在我的构建脚本中，我在构建包之前将env 更改为prod，然后使用jq 更改回dev。

【讨论】：