Ionic Build Process Updates
Hello Ionites! Happy Halloween! ? I just wanted to give you a heads up about some changes to to our @ionic/app-scripts package. This package manages the build process for Ionic RC apps.
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.
The production release of Angular introduced several new concepts, including NgModules and Ahead-of-time compiling. 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’re 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, the Angular AoT compiler. We’re actively working with the Angular team to improve the quality of error messages and improve build times from ngc.
In addition, we underestimated the impact of some of our more ambitious changes with the build process. We chose a tool called Rollup to “bundle” 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 that weren’t 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’t 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.
What’s changing
As a result of the challenges with Rollup, we are switching to a different bundling tool called Webpack 2. 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 that makes Webpack 2 the default bundler. We are still going to support Rollup, and if you’re using Rollup and happy with it, we encourage you to continue using it. Think of Rollup as a more strict, standards-focused build tool.
If you wish to keep using Rollup, there are two options: If you have a custom rollup.config.js file set-up, @ionic/app-scripts will continue to use it by default. If you haven’t needed to add a custom configuration file, you can follow the documentation to set it up.
If you’re familiar with Webpack, you might know that it usually needs a good amount of configuration before it’s ready to go. Our goal is to make Ionic’s 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.
What do I need to do?
Please update the content of your tsconfig.json 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 is installed. If you run into any issues, please let us know.
To install the latest version, run the following command from the Ionic project directory:
npm install @ionic/app-scripts@latest
Roadmap
Over the next few weeks, we will continue to rapidly release new version of @ionic/app-scripts as we fix bugs and add functionality.
- Here’s what we view as high priorities:
Please let us know what you think of @ionic/app-scripts, and if you feel we’re missing the boat on anything. I’ve created a thread for discussion here.
Conclusion
We have made significant improvements to the build process since we released Ionic RC a few short weeks ago. If you haven’t updated, now is a great time to do so. We want to say a resounding THANK YOU to the Ionic community for sticking with us during the transition. All of the great issues and feedback on the @ionic/app-scripts project are very much appreciated. The feedback has been excellent and we are iterating quickly to provide a simple and powerful developer experience. Happy hacking!
