{"id":1478,"date":"2016-10-31T15:36:56","date_gmt":"2016-10-31T15:36:56","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=1478"},"modified":"2017-01-09T06:33:14","modified_gmt":"2017-01-09T06:33:14","slug":"ionic-build-process-updates","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/ionic-build-process-updates","title":{"rendered":"Ionic Build Process Updates"},"content":{"rendered":"

Hello Ionites! Happy Halloween! ? I just wanted to give you a heads up about some changes to to our @ionic\/app-scripts<\/code> package. This package manages the build process for Ionic RC apps.<\/p>\n

When we released Ionic RC a few weeks back, we made significant changes to the build process for Ionic apps. A few of these changes were necessary to make the leap to the production release of Angular 2, and a few were some of our ambitious ideas to simplify and dramatically improve the Ionic build process. Or goal is and will always be to reduce the amount of knowledge developers need to have about modern JS build tools to build Ionic apps.<\/p>\n

The production release of Angular introduced several new concepts, including NgModules<\/a> and Ahead-of-time compiling<\/a>. These changes will be very positive for Ionic apps, but they have also caused some frustration for developers making the transition to Ionic 2 RC with Angular 2 Final. We\u2019re really sorry about that. We recognize that we could have done a better job with documentation and examples during the transition. We are working around the clock to try to improve the developer experience with ngc<\/code>, the Angular AoT compiler. We\u2019re actively working with the Angular team to improve the quality of error messages and improve build times from ngc<\/code>.<\/p>\n

In addition, we underestimated the impact of some of our more ambitious changes with the build process. We chose a tool called Rollup<\/a> to \u201cbundle\u201d our code together. Rollup is a tool that specializes in blazing fast start-up performance and a small bundle size. In our internal testing, everything went well for the most part. When we released this to the community, we found the tool to be challenging for developers to use when working with third party libraries<\/a> that weren\u2019t using the modern ES2015 module format yet. Working around this for commonjs and other types of modules required complicated configuration and in some cases just wouldn\u2019t work at all. We are sorry for any frustration this may have caused, and we have a solution that is more forgiving and is going to work better for Ionic devs moving forward.
\n<\/p>\n

What\u2019s changing<\/h2>\n

As a result of the challenges with Rollup, we are switching to a different bundling tool called Webpack 2<\/a>. Webpack 2 is a more mature tool that we think will alleviate some of the challenges associated with the Ionic RC build process. Today, we are releasing a new version of @ionic\/app-scripts<\/code> that makes Webpack 2 the default bundler. We are still going to support Rollup, and if you\u2019re using Rollup and happy with it, we encourage you to continue using it. Think of Rollup as a more strict, standards-focused build tool.<\/p>\n

If you wish to keep using Rollup, there are two options: If you have a custom rollup.config.js<\/code> file set-up, @ionic\/app-scripts<\/code> will continue to use it by default. If you haven\u2019t needed to add a custom configuration file, you can follow the documentation<\/a> to set it up.<\/p>\n

If you\u2019re familiar with Webpack, you might know that it usually needs a good amount of configuration before it\u2019s ready to go. Our goal is to make Ionic\u2019s build chain zero-configuration, while still enabling power users to add custom loaders and features they want to use. We feel very strongly that the JS build chain is too complicated today, so I hope you see our goals through the lens of trying to remove the build process as a point of complexity for Ionic development.<\/p>\n

What do I need to do?<\/h2>\n

Please update the content of your tsconfig.json<\/a> file to match the latest version we’re providing. After that, everything with the switch to Webpack 2 should be seamless once the latest version of @ionic\/app-scripts<\/code> is installed. If you run into any issues, please let us know<\/a>.<\/p>\n

To install the latest version, run the following command from the Ionic project directory:<\/p>\n

npm install @ionic\/app-scripts@latest\n<\/code><\/pre>\n
Roadmap<\/h2>\n
Over the next few weeks, we will continue to rapidly release new version of @ionic\/app-scripts<\/code> as we fix bugs and add functionality.<\/p>\n