{"id":18074895,"url":"https://github.com/robinloeffel/angular-babel-seed","last_synced_at":"2025-04-12T06:16:58.418Z","repository":{"id":97102083,"uuid":"62509234","full_name":"robinloeffel/angular-babel-seed","owner":"robinloeffel","description":"The super simple Angular quickstarter with ES6","archived":false,"fork":false,"pushed_at":"2017-12-29T14:01:07.000Z","size":216,"stargazers_count":19,"open_issues_count":0,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-05-19T03:22:15.815Z","etag":null,"topics":["angular","babel","es6","quickstart","seed","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/robinloeffel.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-07-03T18:14:14.000Z","updated_at":"2020-10-20T23:40:30.000Z","dependencies_parsed_at":"2023-04-28T20:15:49.604Z","dependency_job_id":null,"html_url":"https://github.com/robinloeffel/angular-babel-seed","commit_stats":null,"previous_names":["rbnlffl/angular-babel-seed"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robinloeffel%2Fangular-babel-seed","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robinloeffel%2Fangular-babel-seed/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robinloeffel%2Fangular-babel-seed/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robinloeffel%2Fangular-babel-seed/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/robinloeffel","download_url":"https://codeload.github.com/robinloeffel/angular-babel-seed/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222392451,"owners_count":16976975,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","babel","es6","quickstart","seed","webpack"],"created_at":"2024-10-31T10:23:43.028Z","updated_at":"2024-10-31T10:23:43.685Z","avatar_url":"https://github.com/robinloeffel.png","language":"JavaScript","readme":"# Angular Babel Seed\n[![GitHub release](https://img.shields.io/github/release/rbnlffl/angular-babel-seed.svg?style=flat-square)](https://github.com/rbnlffl/angular-babel-seed/releases) [![Status of dependencies](https://img.shields.io/david/rbnlffl/angular-babel-seed.svg?style=flat-square)](https://david-dm.org/rbnlffl/angular-babel-seed) [![Status of devDependencies](https://img.shields.io/david/dev/rbnlffl/angular-babel-seed.svg?style=flat-square)](https://david-dm.org/rbnlffl/angular-babel-seed?type=dev)\n\nThe super simple [Angular](https://angular.io/) quickstarter with ES6 ([Babel](https://babeljs.io/)) instead of [TypeScript](https://www.typescriptlang.org/). Built with [gulp](http://gulpjs.com/), bundled with [webpack](https://github.com/webpack/webpack).\n\n\nBased on the official [Angular QuickStarter](https://angular.io/docs/ts/latest/quickstart.html).\n\n![Angular Babel Seed in action](docs/screencap.png)\n\n## Setup\nAfter cloning or downloading this repo, run the following two commands inside the project folder to get it up and running.\n\n    yarn\n\n    yarn dev\n\nThis will install all packages, transpile ES6 to ES5, Sass to CSS, run a server at [localhost:8080](http://localhost:8080) and watch the sources. If you want to additionally minify your project, run `yarn prod` insted of `yarn dev`.\n\n_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._\n\n## Guide\n### Configuring Babel for Angular\nAfter we've set up our [gulpfile.js](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-env` and `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](config/babel.config.js) file.\n\n### Including Stuff in [index.html](src/index.html)\nSince 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](https://github.com/zloirock/core-js), [reflect-metadata](https://www.npmjs.com/package/reflect-metadata), [rxjs](https://www.npmjs.com/package/rxjs) and [zone.js](https://github.com/angular/zone.js/). All of these libraries get concatenated and then minified into bundle.js, which will then be referenced in [index.html](src/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.\n\n### What's in [package.json](package.json)?\nYou'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](src/js/main.js) or [app.module.js](src/js/app.module.js) via `import` statements. Inside package.json, you'll also find the aforementioned polyfills, gulp, Babel and webpack.\n\n## Any Questions?\nHopefully 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](https://github.com/AngularClass/awesome-angular2#angular-2-in-babel).\n\n## ToDo\n* Extend the readme\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobinloeffel%2Fangular-babel-seed","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frobinloeffel%2Fangular-babel-seed","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobinloeffel%2Fangular-babel-seed/lists"}