generator-angular-webpack-es6
Yeoman generator for AngularJS + Webpack with ES6 and SASS.
- Latest Webpack with Tree Shaking feature enabled
- Babel 6 with ES2017 features included
- Perfectly compatible with angularOcLazyLoad plugin
- SASS as CSS preprocessor
- Angular UI router as default router already included
- Optional installation bootstrap-sass source
- Optional angular modules installation
- All necessary webpack loaders already included (Sass, Images, Fonts, ngAnnotate, ngTemplateCache, etc.)
- Config has options for development and production mode
Use only webpack with npm. No external dependencies like bower, grunt, gulp...
Webpack@2 still in Beta and it may contain some bugs. Please, report them to Webpack developers directly.
Install
Install required tools yo, and webpack:
npm install -g yo webpack
Install generator-angular-webpack-es6:
npm install -g generator-angular-webpack-es6
Directory Layout
βββ /e2e/ # End to End test folder
β βββ main.component.spec.js # End to end test example
βββ /config/ # Build config
β βββ /webpack/ # Webpack config files
β βββ /environments/ # Webpack env dependent configs
β βββ global.js # Global webpack settings for all envs
βββ /dist/ # The folder for compiled output
βββ /node_modules/ # 3rd-party libraries and utilities
βββ /src/ # Source folder
β βββ /app/ # Application code
β β βββ /components/ # Shared UI components
β β β βββ /footer/ # Footer shared component. Place footer's styles, directives, templates here
β β βββ /core/ # Shared angular services/directives
β β β βββ /directives/ # Shared directives
β β β βββ /services/ # Shared services
β β β βββ /core.module.js # Import of all core components should be here
β β βββ /pages/ # All pages-dependent content should place here
β β β βββ /main/ # Main page
β β β β βββ /main.controller.js # Main page Controller
β β β β βββ /main.controller.spec.js # Test file for main page controller
β β β β βββ /main.html # Main page template
β β β β βββ /main.module.js # Main page module
β β β β βββ /main.route.js # Main page routes
β β β βββ /.../ # Other pages...
β β βββ /index.bootstrap.js # Entry point. Import internal and external modules and bootstrap (RUN) angular application
β β βββ /index.components.js # Define all your custom components here
β β βββ /index.config.js # Function that will be triggered in Angular's "config" phase
β β βββ /index.module.js # Main application's module
β β βββ /index.routes.js # Describe only "otherwise" and async routes here
β β βββ /index.run.js # Function that will be triggered in Angular's "run" phase
β β βββ /index.vendor.js # Import all vendors and 3rd party plugins here
β βββ /assets/ # Static content
β β βββ /images/ # Images
β β βββ /js/ # Extra libs folder
β β βββ /styles/ # Styles folder
β β βββ /css/ # CSS
β β βββ /sass/ # SASS
β βββ favicon.ico # Application icon to be displayed in bookmarks
β βββ tpl-index.html # Template for html-webpack-plugin that will be transpiled into index.html in /dist
βββ .babelrc # Babel config with presets and plugins
βββ .gitignore # List of files to ignore by git
βββ karma.conf.js # Karma config
βββ protractor.conf.js # protractor config
βββ spec.bundle.js # The bundle file for including in karma config
βββ package.json # The list of project dependencies and NPM scripts
βββ webpack.config.js # Bundling and optimization settings for WebpackRun
Create a new directory, and go into:
mkdir my-new-project && cd $_
Run yo angular-webpack-es6, and select desired technologies.
npm start or npm run dev - to start development server on http://localhost:8080.
npm run build - To make production-ready build run after few moments you will see build id dist folder.
Test
Unit testing
The app uses Karma to run the unit tests, which you can find near the test target (*.spec.js files). see example test in the above directory structure. For running these tests run this command in project directory:
npm test
This command will automatically watch for changes that happening in test files and rerun the test suite To disable the above behaviour , please check package.json file
End-to-end testing
The app uses Protractor, an end-to-end test framework designed for AngularJS apps, to the end-to-end tests, which you can find in the e2e folder.
Setup development environment for running end-to-end tests
- First make sure that you did
npm install. - Download the necessary binaries for Selenium Server
npm run webdriver-update. - Open onother command line and run the development server
npm startand make sure the running port match the baseUrl port in protractor.conf.js file. - Finally run
npm run test:e2e.
Example tests
-
Check the example test for unit tests using jasmin api in
/src/app/pages/main/main.controller.spec.jsAll your unit test files must end with
.spec.js -
Check the example test for e2e test in e2e directory.
/e2e/main.component.spec.js
Known bugs:
- Problem: Webpack2 unable to import function with only export default value.
Workaround: Use
import * as variable from "package"instead ofimport variable from "package"
- Problem: Webpack3: ExtractTextPlugin and file-loader do not work with the use syntax. Link to the issue.
Contribute
If you want to contribute:
- Fork repository and clone project to your machine
- Install npm packages and create new feature/fix branch
- Link local project to be able install generator with
yofrom folder like from global installed package:npm link- Make PR
- ...
- PROFIT
TODO:
- Add .dockerfile
Add example testing environment with karma and protractor- Add more dotfiles
Add better examples with lazy-loaded modulesAdded in 0.1.2Update to Babel6Added in 0.2.0