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 Webpack
Run
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 filesand rerun the test suiteTo 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.jsCheck 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
Inspired by generator-gulp-angular project.
-
一、依赖处理 1.升级通用依赖 借用 ncu 库实现，帮你改写需要升级的package.json 然后再 npm install ncu -u <packages> # 可以指定依赖 ncu # 升级全部依赖 大概列了下升级的效果 add-asset-html-webpack-plugin ^2.1.3 → ^5.0.2 clean-webpack-plugin
-
这三个月我又自学了jQuery库和ES6语法，敲了大量的代码去练习。因为需要一边写论文一边自学这些前端的知识，所以进度可能有点慢，但我觉得能一直坚持每天学一点也是一种毅力，在这里想分享一下看完这两者的心得体会。 jQuery库---现在已经不流行 强调的理念是write less,do more(写得少，做得多），所以它提供的独特的 选择器 功 能 、 链式 操作方式、事件处理机制和封装 完善的A
-
multipages-generator（简称MG）是一个为移动端h5量身打造的网站脚手架，用它可以让你相对的以正确的姿势、迅速的身手、专注于业务，愉快的进行h5开发，以及有配套的快速发布流程。 本文适合的读者???? 现在在手淘，京东，今日头条，美柚等过亿用户的手机app中的，都常见h5网页，他们有更新快，灵活，便于分享和传播的特性。这里有他们中的几个h5的例子：（手淘，美柚）。这些app
-
对于 webpack 自我Z总结进行的简化操作 webpack -v -g 代表全局安装 -d 代表局部安装 --save 和--save-dev下载标签 他们表面上的区别是 –save 会把依赖包名称添加到 package.json 文件 dependencies 键下， –save-dev 则添加到 package.json 文件 devDependencies 键下.
-
generator-angular-pro Web/mobile Angular project generator for scalable, enterprise-grade applications. Includes modern (and stable) tools and workflow, best practices, base template and an exhaustive
-
The Angular Full-Stack Generator Yeoman generator for creating MEAN/SEAN stack applications, using ES2017, MongoDB/SQL, Express, Angular, and Node - lets you quickly set up a project following best pr
-
Complete starter seed project for Angular Material Branch with Universal (Server-side rendering) support Featuring Material Design 2, Webpack (and Webpack DLL plugin for faster dev builds), HMR (Hot M
-
问题内容： 我们将DaftMonk / AngularJS Full- Stack生成器用于projet。生成的代码包含用于管理用户（注册，登录，角色等）的逻辑，这很棒。但是，使用代码时会出现问题，并且当前用户的角色有时是不确定的。 我们想要实现一个简单的功能时遇到了这个问题：登录/注册后，应该将用户重定向到一个取决于其角色的URL。例如，应将用户重定向到，将用户重定向到。由于Auth.getCu
-
不幸的是，我不允许共享任何代码。但如果有人有任何建议，我将非常感激。
-
下面是我得到的解析错误。 错误：模板分析错误：无法绑定到“routerlink”，因为它不是“a”的已知属性。（“r>Menu][routerlink]=r.routerlink[routerlinkactive]=”['active']“>{{r.text}}”）:t@0:359无法绑定到“routerlinkactive”，因为它不是“a”的已知属性。（“项ui红色”*ngfor=“让r个路由