feat(prod): add bundling (angular#549)

Author: filipesilva

addon/ng2/blueprints/ng2/files/__path__/app/index.ts

@@ -0,0 +1,2 @@
+export {environment} from './environment';
+export {<%= jsComponentName %>AppComponent} from './<%= htmlComponentName %>.component';

addon/ng2/blueprints/ng2/files/__path__/main.ts

@@ -1,7 +1,6 @@
-import { bootstrap } from '@angular/platform-browser-dynamic';
-import { enableProdMode } from '@angular/core';
-import { environment } from './app/environment';
-import { <%= jsComponentName %>AppComponent } from './app/<%= htmlComponentName %>.component';
+import {bootstrap} from '@angular/platform-browser-dynamic';
+import {enableProdMode} from '@angular/core';
+import {<%= jsComponentName %>AppComponent, environment} from './app/';
 
 if (environment.production) {
   enableProdMode();

lib/broccoli/angular-broccoli-bundle.js

@@ -0,0 +1,32 @@
+/* jshint node: true, esversion: 6 */
+'use strict';
+
+const Plugin = require('broccoli-caching-writer');
+const Builder = require('systemjs-builder');
+const fse = require('fs-extra');
+const path = require('path');
+
+class BundlePlugin extends Plugin {
+  constructor(inputNodes, options) {
+    super(inputNodes, {});
+    options = options || {};
+    this.options = options;
+  }
+
+  build() {
+    var relativeRoot = path.relative(process.cwd(), this.inputPaths[0]);
+    var builder = new Builder(relativeRoot, `${relativeRoot}/system-config.js`);
+    return builder.bundle('main - [app/**/*]',
+        `${this.outputPath}/main.js`, {
+          minify: true
+        })
+      .then(() => builder.bundle('app - (app/**/*.js - [app/**/*.js])',
+        `${this.outputPath}/app/index.js`, {
+          minify: true
+        }))
+      .then(() => fse.copySync(`${this.inputPaths[0]}/system-config.js`,
+        `${this.outputPath}/system-config.js`));
+  }
+}
+
+module.exports = BundlePlugin;

lib/broccoli/angular2-app.js

@@ -1,22 +1,24 @@
 'use strict';
 const path = require('path');
+const fs = require('fs');
 
 const isProduction = require('./is-production');
 const BroccoliPlugin = require('broccoli-writer');
 const BroccoliConfigReplace = require('./broccoli-config-replace');
 const BroccoliTypescript = require('./broccoli-typescript');
 const BroccoliSwManifest = require('./service-worker-manifest').default;
+const BundlePlugin = require('./angular-broccoli-bundle');
 const BroccoliFunnel = require('broccoli-funnel');
 const BroccoliMergeTrees = require('broccoli-merge-trees');
-const BroccoliUglify = require('broccoli-uglify-js');
+const BroccoliSource = require('broccoli-source');
+const UnwatchedDir = BroccoliSource.UnwatchedDir;
 const Project = require('ember-cli/lib/models/project');
 const config = require('../../addon/ng2/models/config');
 
-
 class Angular2App extends BroccoliPlugin {
   constructor(project, inputNode, options) {
     const ngConfig = config.CliConfig.fromProject();
-    
+
     if (!options) {
       options = inputNode;
       inputNode = null;
@@ -117,7 +119,7 @@ class Angular2App extends BroccoliPlugin {
         }
       }));
     }
-    
+
     // Add the public folder in.
     buildTrees.push(new BroccoliFunnel(this._inputNode, {
       include: ['public/**/*'],
@@ -131,7 +133,12 @@ class Angular2App extends BroccoliPlugin {
     }));
 
     var merged = new BroccoliMergeTrees(buildTrees, { overwrite: true });
-    merged = new BroccoliMergeTrees([merged, new BroccoliSwManifest([merged])]);
+
+    if (isProduction) {
+      merged = this._getBundleTree(merged);
+      merged = new BroccoliMergeTrees([merged, new BroccoliSwManifest([merged])]);
+    }
+
     return new BroccoliFunnel(merged, {
       destDir: this._destDir
     });
@@ -279,7 +286,6 @@ class Angular2App extends BroccoliPlugin {
 
     if (isProduction) {
       tsTreeExcludes.push(excludeSpecFiles);
-      tsTree = BroccoliUglify(tsTree);
     }
 
     tsTree = new BroccoliFunnel(tsTree, {
@@ -307,7 +313,7 @@ class Angular2App extends BroccoliPlugin {
       vendorNpmFiles = vendorNpmFiles.concat(this._options.vendorNpmFiles);
     }
 
-    return new BroccoliFunnel('node_modules', {
+    return new BroccoliFunnel(new UnwatchedDir('node_modules'), {
       include: vendorNpmFiles,
       destDir: 'vendor',
       name: 'vendor'
@@ -357,6 +363,25 @@ class Angular2App extends BroccoliPlugin {
       getDestinationPath: () => 'environment.ts'
     });
   }
+
+  _getBundleTree(preBundleTree){
+    var indexFile = path.join(this._sourceDir, 'index.html');
+    var indexContent = fs.readFileSync(indexFile, 'utf8');
+    var scriptTagVendorFiles = indexContent.match(/vendor\/[^"']*\.js/gi);
+
+    var scriptTree = new BroccoliFunnel(preBundleTree, {
+      include: scriptTagVendorFiles
+    });
+
+    var nonJsTree = new BroccoliFunnel(preBundleTree, {
+      exclude: ['**/*.js', '**/*.js.map']
+    });
+    var jsTree = new BroccoliFunnel(preBundleTree, {
+      include: ['**/*.js']
+    });
+
+    return BroccoliMergeTrees([nonJsTree, scriptTree, new BundlePlugin([jsTree])], { overwrite: true });
+  }
 }
 
 module.exports = Angular2App;

package.json

@@ -35,7 +35,7 @@
     "broccoli-concat": "^2.2.0",
     "broccoli-funnel": "^1.0.1",
     "broccoli-merge-trees": "^1.1.1",
-    "broccoli-uglify-js": "^0.1.3",
+    "broccoli-source": "^1.1.0",
     "broccoli-writer": "^0.1.1",
     "chalk": "^1.1.3",
     "ember-cli": "2.5.0",
@@ -50,6 +50,7 @@
     "shelljs": "^0.7.0",
     "silent-error": "^1.0.0",
     "symlink-or-copy": "^1.0.3",
+    "systemjs-builder": "^0.15.16",
     "typescript": "^1.8.10",
     "typings": "^0.8.1"
   },

tests/e2e/e2e_workflow.spec.js

@@ -64,13 +64,25 @@ describe('Basic end-to-end Workflow', function () {
     // stuck to the first build done
     sh.exec('ng build --environment=production --silent');
     expect(existsSync(path.join(process.cwd(), 'dist'))).to.be.equal(true);
-    var envPath = path.join(process.cwd(), 'dist', 'app', 'environment.js');
-    var envContent = fs.readFileSync(envPath, { encoding: 'utf8' });
-    expect(envContent).to.include('production:true');
+    var appBundlePath = path.join(process.cwd(), 'dist', 'app', 'index.js');
+    var appBundleContent = fs.readFileSync(appBundlePath, { encoding: 'utf8' });
+    // production: true minimized turns into production:!0
+    expect(appBundleContent).to.include('production:!0');
     // Also does not create new things in GIT.
     expect(sh.exec('git status --porcelain').output).to.be.equal(undefined);
   });
 
+  it('Produces a service worker manifest after production build', function () {
+    var manifestPath = path.join(process.cwd(), 'dist', 'manifest.appcache');
+    expect(existsSync(manifestPath)).to.be.equal(true);
+    // Read the worker.
+    //TODO: Commenting this out because it makes eslint fail(need to figure out why this expect was commented out)
+    // var lines = fse.readFileSync(manifestPath, {encoding: 'utf8'}).trim().split('\n');
+
+    // Check that a few critical files have been detected.
+    // expect(lines).to.include(`${path.sep}index.html`);
+  });
+
   it('Can run `ng build` in created project', function () {
     this.timeout(420000);
 
@@ -87,17 +99,6 @@ describe('Basic end-to-end Workflow', function () {
       });
   });
 
-  it('Produces a service worker manifest after initial build', function () {
-    var manifestPath = path.join(process.cwd(), 'dist', 'manifest.appcache');
-    expect(existsSync(manifestPath)).to.be.equal(true);
-    // Read the worker.
-    //TODO: Commenting this out because it makes eslint fail(need to figure out why this expect was commented out)
-    // var lines = fse.readFileSync(manifestPath, {encoding: 'utf8'}).trim().split('\n');
-
-    // Check that a few critical files have been detected.
-    // expect(lines).to.include(`${path.sep}index.html`);
-  });
-
   it('Perform `ng test` after initial build', function () {
     this.timeout(420000);