Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Modularize Javascript and Introduce Webpack #6977

merged 27 commits into from Oct 9, 2018

Modularize Javascript and Introduce Webpack #6977

merged 27 commits into from Oct 9, 2018


Copy link

Fixes #3535

Proposed Changes:

  1. Only load relevant javascript on admin pages.

To test:

It should be ensured that all scripts listed in are loaded on their necessary pages.

This is my proposal for updating EDD's Javascript infrastructure. I consider this "Step 1" since this implementation does not change any of the code's base architecture, and only changes how it is loaded.

The major component of this proposal is using Webpack to help bundle the Javascript. My reason for introducing Webpack is eventually I would like to see it be used for handling all of EDD's assets, and the removal of Grunt.

Webpack is currently the bundler of choice for Gutenberg (all hail) and the majority of the principles for how it is being used in this PR are based off that. Webpack works with standard Node packages which means any of the existing Grunt-wrapper packages can easily be converted to their native libraries in the future (removing dependencies).

Webpack also allows trans/compilers like Babel (which is implemented in this proposal) to use "next generation" Javascript which is not currently supported in all browsers. This is the basis for implementing this PR as it allows for easy import/export functionality between Javascript files.

This PR also introduces ESLint and the standard WordPress coding standards for Javascript (again mainly taken from Gutenberg). Linting can be run by the npm run lint command and automatic fixes applied with npm run lint:fix

To make this implementation easier to test and to avoid changing the development process of the repository further, minified scripts and sourcemaps have been committed to this branch. This means if a user downloads the repository they will have access to a working plugin because all scripts are included. The committed scripts are automatically in development mode and their sourcemaps will allow for easy user debugging.

In my opinion it would be more ideal in the future to remove these scripts from the repository and require developers who work directly from the repository to run the necessary build scripts. This will ensure a better developer experience (cleaner diffs, up to date scripts, and locked dependencies) while ensuring the repository remains a development-only resource. Users will still be able to download built packages from tagged releases.

tl;dr Everything should work exactly how it was before. This creates no functional or visual changes.

spencerfinnell and others added 24 commits September 6, 2018 13:10
A `npm run package-plugin` command will run a Webpack build and the rest of the Grunt tasks to create a .zip
…ingle file for keeping compatibility until further testing.
Copy link
Contributor Author

Here is an example of the types of simple refactors that comes much easier when only working with a single component: test/webpack...js/dashboard

Copy link

JJJ commented Oct 9, 2018

Merged release/3.0 changes into test/webpack to prepare this for merging back the other direction.

@spencerfinnell spencerfinnell changed the title Modularize Javascript Modularize Javascript and Introduce Webpack Oct 9, 2018
…r hook.

Also rename jQuery Credit Card Validator to camelCase as needed by some case-sensitive environments.

This ensures that webpack'ed scripts are adaptable and enqueued in the places and ways that are the most predictable.
@JJJ JJJ merged commit d416c8e into release/3.0 Oct 9, 2018
@JJJ JJJ added this to the 3.0 milestone Oct 9, 2018
@JJJ JJJ deleted the test/webpack branch October 9, 2018 19:56
JJJ added a commit that referenced this pull request Oct 10, 2018
* Move custom Chosen styling into `edd-admin-chosen.css`
* Revert camelCase of Credit Card Validator JS - enqueue process abstracts this
* Add jQuery Flot Time back in for back-compat support
* Remove suffix logic from Graph classes (these always use minified versions)
* Introduce `edd_doing_script_debug()` to abstract `SCRIPT_DEBUG` constant check
* Update Webpack and Grunt config files as needed

See #6977.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
None yet

Successfully merging this pull request may close these issues.

None yet

2 participants