[TIMOB-24609] Replace uglifyjs usage with babel to parse ES6+ code

GitHub Issue	n/a
Type	Improvement
Priority	None
Status	Closed
Resolution	Fixed
Resolution Date	2017-05-04T17:15:34.000+0000
Affected Version/s	n/a
Fix Version/s	Release 6.1.0, node-titanium-sdk 0.2.0
Components	CLI, Tooling
Labels	n/a
Reporter	Christopher Williams
Assignee	Christopher Williams
Created	2017-04-20T18:17:00.000+0000
Updated	2017-05-16T23:24:58.000+0000

Description

When we build apps, we run jsanalyze from our titanium-sdk node modules. That file is specifically used to: - Parse the JS file (validity check) - Walk the AST and collect/record Ti.* API usages - Optionally, minify the code Unfortunately, uglifyjs hasn't supported ES6 and has lagged for years. Nowadays, people typically use babel and related projects. We should replace our usage of uglifyjs with babel-related modules so that we can parse ES6+ code. Specifically we can use babylon for parsing, babel-traverse/babel-core/babel-types for AST walking, and babili preset for minification.

Comments

Christopher Williams 2017-05-04

https://github.com/appcelerator/titanium_mobile/pull/8972
Christopher Williams 2017-05-04

Re-opening for 6.1.0 backport
Brenton House 2017-05-04
Christopher Williams 2017-05-04

This has been back ported to the 6_1_X branch: https://github.com/appcelerator/titanium_mobile/pull/9018
Abir Mukherjee 2017-05-16

[~cwilliams] how do I validate the change? Do I specifically check for something in the log when building apps?
Abir Mukherjee 2017-05-16

Tested with this environment: Node Version: 6.10.1 NPM Version: 3.10.10 (4.4.4 for Windows) OS: Mac OS 10.12.4, Windows 10.0.14393 Appc CLI: 6.2.1 Appc CLI NPM: 4.2.9 Titanium SDK version: 6.1.0.v20170516103606, 6.2.0.v20170515114643 Appcelerator Studio, build: 4.8.1.201612050850 Xcode 8.3.2 Devices: iOS 10.3, Android 7.1, Windows 8.1, Windows 10. I used Han's demo code and verified that the following work as expected for iOS and Android. It does not work for Windows 8.1 & 10. Specifically, when I built and installed the app, an alert pops up. After dismissing the pop-up, a trigger button is displayed. Each time I clicked on Trigger, "Hello world!" was printed on the console. In the case of the Windows phones, the Alert popped up, but after dismissing it, the screen become white, and no Trigger button was seen.

Abir Mukherjee 2017-05-16

For convenience, pasting demo code here:

   class Application {
           
       constructor(cb) { 
           this.window = Ti.UI.createWindow({
               backgroundColor: '#fff'
           });
   
           var btn = Ti.UI.createButton({
               title: 'Trigger'
           });
   
           btn.addEventListener('click', function() {
               Ti.API.info('Hello world!');
           });
   
           this.window.add(btn);
       }
       
       open(cb) {
           this.window.open();
           cb('ES6 rocks!');
       }
   }
   
   var app = new Application();
   app.open((text) => {
       alert(text);
   });

Samir Mohammed 2017-05-16

[~amukherjee] Change the background color (following code snippet will change the window color to red)

   constructor(cb) { 
           this.window = Ti.UI.createWindow({
               backgroundColor: '#ff0000'
           });

JSON Source