Webstaff: Replace Grunt with Webpack + Angular 1.6
Affects | Status | Importance | Assigned to | Milestone | |
---|---|---|---|---|---|
Evergreen |
Fix Released
|
Medium
|
Unassigned |
Bug Description
Evergreen 3.0 / Wishlist
As mentioned in https:/
1. It can be integrated as a drop-in replacement for Grunt. Application code changes are not required.
2. It (natively) supports named file bundles, e.g. core JS bundle, external dependencies bundle, etc. These bundles reduce the number of files downloaded on initial page load, improving render times.
3. Like Grunt, it has minification plugins.
4. It supports ES6-style 'import' statements, should we decide to integrate those into our web staff code in the future (as prep for Angular5).
5. Webpack is used by default in Angular5 / ng-cli
Patch en route to make these changes and bump our AngularJS version up to 1.6. The following bugs will be superseded by this bug:
https:/
https:/
New commands:
1. 'grunt test' will be replaced with 'npm run test'.
2. 'grunt build' will be replaced with 'npm run build' and 'npm run build-prod' (for minification).
Changed in evergreen: | |
importance: | Undecided → Medium |
Changed in evergreen: | |
assignee: | Jason Stephenson (jstephenson) → nobody |
Changed in evergreen: | |
assignee: | nobody → Galen Charlton (gmc) |
Changed in evergreen: | |
status: | Fix Committed → Fix Released |
Code pushed:
http:// git.evergreen- ils.org/ ?p=working/ Evergreen. git;a=shortlog; h=refs/ heads/user/ berick/ lp1626157- ang-1.6- plus-webpack
Included in the branch are doc updates, make_release updates, minor cleanup to remove unused files, and commented-out repetitive debug messages that affect unit test running in particular.
==
There is one work flow change in this branch that bears discussion:
I have configured webpack to create a 'core.bundle.js' file from the EG services/*.js files that are loaded on every page, i.e. the list in base_js.tt2. (That part alone reduced the file download count by 20. Note the bundle has a generated inline source map so tracking errors to specific lines of code is still possible). Creating this bundle means webpack has to be run before every code change is deployed on a test server, since base_js.tt2 imports the bundle, not the individual service files.
To make this easier, I have added a 'npm run build-watch' command for auto-compiling builds as changes are applied to affected files. If this process is started and left running in a second terminal, then a typical work flow of "change some js files, copy them into place" will work like before. Note that for now this only affects core service files, not app.js files.
If this is too disruptive, we could avoid creating the core.bundle.js builds when building in developer mode. It would just require webpack communicate to base_js.tt2 that it needs to import individual files (a la EXPAND_WEB_IMPORTS) in dev mode.