Closed DevinWalker closed 6 years ago
Here's my recommended plan for transitioning from Gulp to webpack and cleaning up our asset pipeline along the way.
You can see an example of this stack in the WP Business Reviews repository.
Phase 1 includes high-level front-end architecture changes. We're setting up the directory structure and pipeline, but we're not worried about refactoring individual assets.
webpack.config.js
to replace gulpfile.js
assets
directory into assets/src
and assets/dist
.
assets/src
js
- Source JS modulescss
- Sass partialsimages
- Source imagesfonts
- Fontsassets/dist
js
- Compiled/minified/concatenated JScss
- Preprocessed/minified/concatenated CSSimages
- Minified imagesfonts
- Fontsdist
directory which will remove minified assets from version control. Instead build the directory using an npm script.Phase 2 includes refactoring of individual assets to a more modern, class-based architecture made possible by ES6 and webpack. Most of Give's JS assets are currently a collection of expressions that work together without much structure. Furthermore a function in one file cannot be easily used in another file due to every file having its own scope.
If we instead write JS as classes and import them as modules throughout the Give asset pipeline, then we can start to treat our JS as series of interdependent modules rather than a collection of independent files.
Ran Gulp
commits every time you update assets. This new approach will also ensure minified assets are never forgotten since they are generated by a build script prior to release.Move https://github.com/WordImpress/Give-Form-Field-Manager/pull/201/files#diff-a0b8932df51abf64f7457c93c4e403f2R3127 get_parameter
to Give Core when we reform the Give Core JS
We also have a function related to this type In Give Admin JS
https://github.com/WordImpress/Give/blob/release/2.0/assets/js/admin/admin-scripts.js#L2945 get_url_params
Closing as Phase 1 of the webpack integration is complete in Give core 2.1.0
. Phase 2 (refactoring existing code) can be addressed in smaller targeted issues.
Issue Overview
Modernizing our JS is important to ensure we're up to date with current standards and
Future Stack
Questions: