Minify, uglify and bundle your JavaScript in NativeScript Angular 2 app

Today I’ll show you how to use WebPack, Babel and UglifyJS to minify, uglify and bundle your JavaScript in NativeScript Angular 2 app.

Install NativeScript:

npm install nativescript -g

Create new Angular 2 app:

tns create MyApp --ng

Install nativescript-dev-webpack, babel-core, babel-preset-es2015 and babel-loader in your app:

cd MyApp
npm install nativescript-dev-webpack --save-dev
npm install babel-core --save-dev
npm install babel-preset-es2015 --save-dev
npm install babel-loader --save-dev

Open the app in your favorite editor and add babel-loader at the end of the loaders section and UglifyJS plugin at the end of the plugins section in webpack.common.js:

{
    test: /nativescript-intl.*\.js$/,
    loader: 'babel-loader',
    query: {
       presets: ['es2015']
    }
}

new webpack.optimize.UglifyJsPlugin({ compress: false })

* Compression is disabled because of NativeScript Android class generation at build time. UglifyJS compressor is a tree transformer which reduces the code size by applying various optimizations on the AST.

Bundle and run your app:

npm run start-android-bundle

or

npm run start-ios-bundle

Observe the result in your platform ios/android folder:

The generated JavaScript is minified, uglified and bundled.

Enjoy!