How to properly tree-shake with buildstatic? #709

Activity

1. asapach commented on Oct 6, 2016

   

   asapach

   on Oct 6, 2016

   Member

   More actions

   Rollup only works for ES6 modules and my guess is that your gulp task transpiles to either commonjs or system format. Try using https://github.com/frankwallis/plugin-typescript#rollup-support
2. RoxKilly commented on Oct 7, 2016

   

   RoxKilly

   on Oct 7, 2016

   Last edited by RoxKilly

   Author

   More actions

   @asapach Thanks for the link. I followed the advice and installed plugin-typescript, but I am unable to use it. Please see whether anything jumps out as incorrect:

   systemjs.config.js

   System.config({
       transpiler: "ts",                                  // this is plugin-typescript 5.2.6
       typescriptOptions: { typeCheck: true, tsconfig: true },
       map: { app: 'dev', '@angular': 'node_modules/@angular' },
       packages: {
           app: {
               main: './main.ts',
               defaultExtension: 'ts' ,
               meta: { '*.ts': {'loader':'ts'} }
           },
           '@angular/core':  {main: './bundles/core.umd.js', defaultExtension:'js'},
           ...
           "ts":             { main: "./lib/plugin.js"},
           "typescript": {                                   // this is typescript 2.0.3
               main: "./lib/typescript.js",
               meta: {"./lib/typescript.js": {"exports": "ts"} }
           }
       }
   });
   

   tsonfig.json

   "compilerOptions": {
       "target": "es6",
       "module": "es6",
       "moduleResolution": "node",
       "emitDecoratorMetadata": true,
       "experimentalDecorators": true,
       "outDir": "./dist",
       "baseUrl": "."
   },
   

   systemjs-builder gulp task

   gulp.task('bundle', function() {
       var builder = new SystemBuilder();
       builder.loadConfig('./systemjs.config.js').then(function(){
               return builder.buildStatic('app', 'dist/bundle.js');
           });
   });
   

   When I execute the gulp task, this error is thrown:

   Cannot find module '@angular/core'

   The path node_modules/@angular/bundles/core.umd.js is resolved correctly (If I change the file name, a file not found error ensues), but the module is not found.
3. RoxKilly commented on Oct 9, 2016

   

   RoxKilly

   on Oct 9, 2016

   Author

   More actions

   To resolve this I had to create another task that runs the typescript compiler first, to transpile .ts to .js files:

   var exec = require('child_process').exec;
   
   // this task will process TS files with settings from tsconfig.json
   // and generate Javascript files
   gulp.task('tsc', function (cb) {
       exec('"node_modules/.bin/tsc" -p ./', function (err, stdout, stderr) {
           console.log(stdout);
           console.log(stderr);
           cb(err);
       });
   });
   

   After this, I could run the bundling task:

   // this task uses main.js as a starting point, and bundles the whole project
   // into one Javascript file
   gulp.task('bundle', function() {
       var builder = new SystemBuilder();
       builder.loadConfig('./systemjs.config.js').then(function(){
               return builder.buildStatic('dist/main.js', 'dist/bundle.js',
                               {minify: true, encodeNames:false, rollup:true}
               );
           });
   });
   

   As @asapach pointed out, I needed to set "module":"es6" in tsconfig.json
4. RoxKilly

   closed this as completedon Oct 9, 2016