Angular Babel Seed
Based on the official Angular QuickStarter.
After cloning or downloading this repo, run the following two commands inside the project folder to get it up and running.
yarn yarn dev
This will install all packages, transpile ES6 to ES5, Sass to CSS, run a server at localhost:8080 and watch the sources. If you want to additionally minify your project, run
yarn prod insted of
You can also use npm to install and run this project. However, since I develop with yarn myself, I cannot guarantee it works as intended.
Configuring Babel for Angular
After we've set up our gulpfile.js, we need to install presets for Babel so it knows what language the source code is written in and what framework we use. We do this by installing
babel-preset-angular2. When that's done, we need to go ahead and configure
babel-preset-env. We do that by specifying a
targets and a
modules property. In the first one, we tell Babel what web browsers our app should support. The second one prevents Babel from transforming ES6 modules into CommonJS modules, so webpack can do it. All of these rules get written inside the babel.config.js file.
Since Angular uses things that are still experimental and bleeding edge, it's just proper manners to include polyfills for older browsers. By name, these are core-js, reflect-metadata, rxjs and zone.js. All of these libraries get concatenated and then minified into bundle.js, which will then be referenced in index.html. Since we use webpack for bundling, our written Angular code gets included to bundle.js as well. So we do not need to worry about referencing our logic inside the HTML files.
You've probably wondered where all that minty Angular magic comes from. It originates from npm packages. You see all those
@angular/ dependencies? That's it! They then get used in main.js or app.module.js via
import statements. Inside package.json, you'll also find the aforementioned polyfills, gulp, Babel and webpack.
Hopefully my starter helped understand the unnecessarily complicated setup process for Angular projects. If you need further assistance or encounter any problems, feel free to open an issue. A list of other Angular + Babel starters can be found here.
- Extend the readme